Collapsible
Opens and closes the section under a one-line row, for detail the reader may want.
Configurations
Supported configurations for this component.
States
Interaction states covered by the API and the style contract.
Configurations
5 examplesRead 3 sources on Q3 renewals and kept the two with dated figures.
Read 3 sources on Q3 renewals and kept the two with dated figures.
Read 3 sources on Q3 renewals and kept the two with dated figures.
Read 3 sources on Q3 renewals and kept the two with dated figures.
States
3 examplesAdd to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
Collapsible
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | Controlled open state. Pair with onOpenChange. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | - | Called with the next open state when the trigger is pressed. |
| disabled | boolean | false | The row cannot be toggled: dimmed to the disabled opacity, not-allowed cursor, no hover, no aria-expanded. The section keeps whatever state `open` gives it. |
| children | React.ReactNode | - | A CollapsibleTrigger followed by a CollapsibleContent. |
| className | string | - | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | - | Inline styles applied to the root element. |
CollapsibleTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenreq | React.ReactNode | - | The row's label, set medium weight. |
| indicator | React.ReactNode | - | Replaces the caret, e.g. a Spinner while the section has nothing in it yet. Drawn in a glyph-sized slot, aria-hidden. |
| meta | React.ReactNode | - | Trailing text pushed to the right edge in text.secondary: a duration, a count, a state word. |
| size | 'sm'|'md' | 'sm' | Row rung: 12 / 14px label, 16 / 18px caret, 8px gap. |
| onClick | (event: React.MouseEvent<HTMLButtonElement>) => void | - | Runs before the toggle; call preventDefault to keep the row as it is. |
| className | string | - | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | - | Inline styles applied to the root element. |
CollapsibleContent
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The section. Children stack in a column 12px apart. |
| guide | boolean | false | Hang the section off a hairline rule under the caret (the step-trace look). Off, the section starts where the label starts. |
| className | string | - | Merged onto the section's box (the element that carries the padding and gap). |
| style | React.CSSProperties | - | Merged onto the section's box. |
AI Canvas