Components
Collapsible
An interactive element that expands and collapses a panel. Use it to hide secondary detail behind a trigger — order status, advanced options, a longer description — without leaving the page.
Preview
Order #4189
Rendered with live Cognition tokens — the trigger, border, and text remap on theme change, no dark: classes. Toggle the control to collapse the panel.
Triggers
Order #4189
<Collapsible defaultOpen className="w-full max-w-sm space-y-2">
<div className="flex items-center justify-between">
<h4 className="text-sm font-semibold">Order #4189</h4>
<CollapsibleTrigger asChild>
<Button variant="ghost" size="icon-sm" aria-label="Toggle order details">
<ChevronsUpDown />
</Button>
</CollapsibleTrigger>
</div>
<CollapsibleContent>
<div className="rounded-md border border-border-default px-4 py-3 font-mono text-sm">
Status: Shipped
</div>
</CollapsibleContent>
</Collapsible><Collapsible className="w-full max-w-sm space-y-2">
<CollapsibleTrigger asChild>
<Button
variant="outline"
className="w-full justify-between [&[data-state=open]>svg]:rotate-180"
>
View details
<ChevronDown className="size-4 transition-transform" />
</Button>
</CollapsibleTrigger>
<CollapsibleContent>…</CollapsibleContent>
</Collapsible>The trigger is yours to compose with asChild — an icon-only toggle beside a heading, or a full-width labeled button whose chevron rotates on data-[state=open].
States
Order #4189
<Collapsible>…</Collapsible>Order #4189
<Collapsible defaultOpen>…</Collapsible>Order #4189
<Collapsible disabled defaultOpen>…</Collapsible>Starts closed by default; pass defaultOpen to render it expanded, or disabled to lock the panel and dim its trigger.
API
Don't and Do
Don't use a Collapsible for a set of stacked sections — that's Accordion. And don't hide essential content or primary actions behind one; reach for it only for secondary, skippable detail.
<Collapsible>
<CollapsibleTrigger asChild>
<Button variant="ghost" size="icon-sm">
<ChevronsUpDown />
</Button>
</CollapsibleTrigger>
<CollapsibleContent>…</CollapsibleContent>
</Collapsible>import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
export function OrderPanel() {
return (
<Collapsible defaultOpen className="w-full max-w-sm space-y-2">
<div className="flex items-center justify-between">
<h4 className="text-sm font-semibold text-text-default">Order #4189</h4>
<CollapsibleTrigger asChild>
<Button variant="ghost" size="icon-sm" aria-label="Toggle">
<ChevronsUpDown />
</Button>
</CollapsibleTrigger>
</div>
<CollapsibleContent>
<div className="rounded-md border border-border-default px-4 py-3 font-mono text-sm text-text-default">
Status: Shipped
</div>
</CollapsibleContent>
</Collapsible>
);
}