Components

Collapsible

Single expand/collapse primitive. Bare Radix — bring your own trigger and content styling. Use Accordion when you need multiple grouped panels.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<Collapsible>
  <CollapsibleTrigger asChild>
    <Button variant="ghost" size="sm">Show details</Button>
  </CollapsibleTrigger>
  <CollapsibleContent className="mt-2 text-sm text-muted-foreground">
    Payment was routed through Stripe · attempt 3 of 5 · settled at 12:41.
  </CollapsibleContent>
</Collapsible>

When to use

  • Individual 'Show more' toggles inside a card or row.
  • Optional detail rows in tables.

When not to use

  • For grouped panels — use Accordion.
  • For structural navigation — use Sidebar or Tabs.

Usage

Do
  • Animate the content with your own transition or rely on the parent's overflow.
Don't
  • Don't hide critical info inside a Collapsible by default.