Collapsible
A collapsible panel controlled by a button.
Loading...
Loading code...
Installation
Usage
import {
Collapsible,
CollapsiblePanel,
CollapsibleTrigger,
} from "@/components/ui/collapsible"<Collapsible>
<CollapsibleTrigger>Can I access the file in the cloud?</CollapsibleTrigger>
<CollapsiblePanel>
Yes, you can access the file in the cloud.
</CollapsiblePanel>
</Collapsible>Comparing with Radix / shadcn
This section shows what to change when moving from shadcn/ui (Radix-based) to our Base UI–backed Collapsible. We cover only the most relevant differences.
Quick Checklist
- Use
CollapsiblePanelgoing forward;CollapsibleContentremains for legacy - If you used
asChildon parts, switch to therenderprop