Collapsible

Overlay

An interactive section that expands and collapses.

Collapsibles hide and reveal content. The trigger chevron rotates as the panel animates open and closed.

npx shadcn@latest add collapsible

Basic collapsible

A trigger paired with animated content.

Preview

Live

tsx

1<Collapsible className="max-w-sm rounded-lg border">
2  <CollapsibleTrigger>What is Shelf?</CollapsibleTrigger>
3  <CollapsibleContent>
4    <p className="text-sm text-muted-foreground">...</p>
5  </CollapsibleContent>
6</Collapsible>

Controlled

Control open state from outside when you need to.

Preview

Live

tsx

1const [open, setOpen] = useState(false)
2
3<Collapsible open={open} onOpenChange={setOpen}>
4  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
5  <CollapsibleContent>...</CollapsibleContent>
6</Collapsible>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
open	boolean= false	Controlled open state.
defaultOpen	boolean= false	Whether the collapsible is open initially.
onOpenChange	(open) => void	Called when the collapsible opens or closes.
disabled	boolean= false	Disables the collapsible.