Components
/
Collapsible
Collapsible
An interactive component which expands/collapses a panel.
Installation
npx shadcn@latest add https://ui.saturation.io/r/collapsible.jsonUsage
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible"Examples
With Icon
Add an icon that rotates when the collapsible is opened.
Controlled
Control the open state with the open and onOpenChange props.
State: Closed
File Tree
Use nested collapsibles to create a file tree structure.
components.json
API Reference
Collapsible
The root component that manages the collapsible state.
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | The controlled open state of the collapsible. |
| defaultOpen | boolean | false | The open state of the collapsible when it is initially rendered. |
| onOpenChange | (open: boolean) => void | - | Event handler called when the open state changes. |
| disabled | boolean | false | When true, prevents the user from interacting with the collapsible. |
CollapsibleTrigger
The button that toggles the collapsible.
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child. |
CollapsibleContent
The component that contains the collapsible content.
| Prop | Type | Default | Description |
|---|---|---|---|
| forceMount | boolean | false | Used to force mounting when more control is needed. |
Deploy your Saturation UI app
Build beautiful, saturated interfaces with our component library.
Deploy to Vercel for the best performance and developer experience.