Collapsible

An interactive component which expands/collapses a panel.

Open by default

@radix-ui/primitives

@radix-ui/colors

@stitches/react

<Collapsible defaultOpen>
  <CollapsibleTrigger>@peduarte starred 3 repositories</CollapsibleTrigger>
  <Row>@radix-ui/primitives</Row>
  <CollapsibleContent>
    <Row>@radix-ui/colors</Row>
    <Row>@stitches/react</Row>
  </CollapsibleContent>
</Collapsible>

Closed by default

<Collapsible>
  <CollapsibleTrigger>Show more details</CollapsibleTrigger>
  <CollapsibleContent>…</CollapsibleContent>
</Collapsible>

Props

Component	Notable props
Collapsible	open, defaultOpen, onOpenChange, disabled
CollapsibleTrigger	Standard button props. Renders the label + chevrons-up-down icon.
CollapsibleContent	Animates height via data-state and accordion-up/down keyframes.

Source

packages/react/src/components/collapsible.tsx · Figma node 2819:22061