Collapsible
An interactive component that can be expanded or collapsed to show or hide content. Lighter than Accordion — best for single items.
$cookest-ui add collapsible
Basic
A simple collapsible section for recipe tips.
Chef's Tips
Always use guanciale, not bacon.
Ingredient Notes
Use Collapsible to progressively reveal substitution information.
GuancialePancetta or thick-cut bacon
Pecorino RomanoParmigiano Reggiano
Egg yolks onlyWhole eggs (lighter result)
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
onOpenChange | (open: boolean) => void | — | Callback when open state changes. |
defaultOpen | boolean | false | Uncontrolled default open state. |
CollapsibleTrigger | ReactNode | — | Element that toggles the collapsible. Supports asChild. |
CollapsibleContent | ReactNode | — | The content shown/hidden based on open state. |