Collapsible

Expandable/collapsible content.

displaycollapsecontent

Import

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui";

Basic Usage

Collapsible Preview

This content can be expanded and collapsed. It supports both controlled and uncontrolled modes with smooth transitions.

Code

tsx

<Collapsible>
  <CollapsibleTrigger asChild>
    <Button variant="ghost" className="w-full justify-between">
      Toggle Content
      <ChevronDown className="h-4 w-4" />
    </Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    <div className="p-4">
      This content can be collapsed and expanded.
    </div>
  </CollapsibleContent>
</Collapsible>

Controlled State

Manage open state externally

1const [open, setOpen] = useState(false);
2
3return (
4  <Collapsible open={open} onOpenChange={setOpen}>
5    <CollapsibleTrigger asChild>
6      <Button variant="outline">
7        {open ? "Hide" : "Show"} details
8      </Button>
9    </CollapsibleTrigger>
10    <CollapsibleContent>
11      <div className="mt-4 p-4 border rounded">
12        Detailed information goes here...
13      </div>
14    </CollapsibleContent>
15  </Collapsible>
16);

Sidebar Menu

Common sidebar pattern

1<Collapsible defaultOpen>
2  <CollapsibleTrigger className="flex items-center gap-2 w-full p-2 hover:bg-muted rounded">
3    <Folder className="h-4 w-4" />
4    <span>Documents</span>
5    <ChevronDown className="ml-auto h-4 w-4" />
6  </CollapsibleTrigger>
7  <CollapsibleContent className="ml-6 space-y-1">
8    <NavLink href="/docs/intro">Introduction</NavLink>
9    <NavLink href="/docs/guide">Guide</NavLink>
10    <NavLink href="/docs/api">API Reference</NavLink>
11  </CollapsibleContent>
12</Collapsible>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring