Collapsible

Use cases

Supplementary content — show extra details, settings, or options that don't need to be visible by default.
Pinned items — display a summary count with a toggle to reveal all items.
Sidebar sections — collapse navigation groups to save space.

When NOT to use

Multiple collapsible sections in a list → use Accordion for mutual exclusion and keyboard group semantics.
Showing/hiding based on state (e.g. errors, empty) → use conditional rendering.

Key props

Prop	Type	Description
`open`	`boolean`	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	Called when state changes.
`defaultOpen`	`boolean`	Uncontrolled initial state.
`disabled`	`boolean`	Prevents toggling.
`triggerVariant`	`'plain' \| 'ghost' \| 'outline' \| 'soft'`	Root-level default trigger visual style.
`triggerSize`	`'auto' \| 'sm' \| 'md' \| 'lg' \| 'icon'`	Root-level default trigger sizing preset.
`contentVariant`	`'plain' \| 'panel' \| 'card' \| 'inset'`	Root-level default content surface style.
`contentPadding`	`'none' \| 'sm' \| 'md' \| 'lg'`	Root-level default content padding preset.
`contentAnimation`	`'height' \| 'fade' \| 'none'`	Root-level default content animation style.
`contentDuration`	`'fast' \| 'normal' \| 'slow'`	Root-level default content animation duration.
`variant`	`'plain' \| 'ghost' \| 'outline' \| 'soft'`	Trigger visual style.
`size`	`'auto' \| 'sm' \| 'md' \| 'lg' \| 'icon'`	Trigger sizing preset.
`justify`	`'start' \| 'center' \| 'between'`	Trigger content alignment.
`fullWidth`	`boolean`	Makes the trigger fill its parent.
`rotateIcon`	`boolean`	Rotates the last direct SVG child when open.
`duration`	`'fast' \| 'normal' \| 'slow'`	Content animation duration.
`animation`	`'height' \| 'fade' \| 'none'`	Content animation style.
`padding`	`'none' \| 'sm' \| 'md' \| 'lg'`	Content padding preset.

Anatomy

<Collapsible>
  <CollapsibleTrigger />   {/* Toggle button: variant, size, justify, icon rotation */}
  <CollapsibleContent />   {/* Hidden content: animation, duration, panel style */}
</Collapsible>

Animation

CollapsibleContent uses animate-collapsible-down / animate-collapsible-up for smooth height transitions.

Pass duration="fast" | "normal" | "slow" to tune the transition. The component includes reduced-motion-safe transition classes.

Composition

Use controlled mode (open + onOpenChange) when you need programmatic control (e.g. "Show all" button).
Pass option defaults to Collapsible when the full instance should share one configuration. Example: <Collapsible triggerVariant="outline" contentVariant="panel" contentPadding="md">.
Pass explicit props to CollapsibleTrigger or CollapsibleContent only when one child needs to override the root defaults.
CollapsibleTrigger renders a <button> with stable inline-flex defaults. Keep the visible label stable and rotate a fixed-size icon for open/closed state changes; swapping text such as "Show" / "Hide" can still change intrinsic width.
Use variant="outline" with fullWidth for filter panels, variant="plain" with justify="between" for card rows, and size="icon" for compact tool surfaces.
CollapsibleContent can be unframed (plain), framed (panel / card), or visually inset (inset). Use animation="none" for state changes that should not animate.
CollapsibleContent animates height on open/close. It is removed from the DOM when collapsed.
For multiple collapsible sections, use Accordion — it adds group semantics and optional mutual exclusion.