Collapsible

A single panel that expands and collapses to show or hide secondary content behind a CollapsibleTrigger row. Reach for it to tuck away one optional region — extra details, advanced settings, a long list's overflow — keeping the default view tight. Use Accordion instead when you have several stacked sections where opening one should manage the others; Collapsible is the standalone, one-section case. It has no variants, tones, or sizes — the trigger renders a full-width label plus a chevrons-up-down affordance, and the content height animates open and closed.

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