Components
Collapsible
Shows and hides one part of the page.
shadcn/uiData display
shadcn/ui docs (opens in a new tab)Radix API (opens in a new tab)components/ui/collapsible.tsxPreview
Three older versions
Version 4 · today
Installation
It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.
npx shadcn@latest add collapsibleProps
The ones that change how it looks or behaves. The rest are the Radix primitive's, in its API.
| Prop | Type | Default |
|---|---|---|
| open | boolean | – |
| defaultOpen | boolean | false |
| onOpenChange | (open: boolean) => void | – |
Guidelines
Use it
- Extra detail most people skip: more options, older items.
Don't
- Hide the one thing people came for.
Used in
The screens in this Base that show it, found in the code.
- The app shell, on every screen
Accessibility
- The trigger is a button with aria-expanded.