Collapsible
shadcn/ui
Single toggleable section. Lighter than Accordion — no group logic, no header chrome by default.
@/components/ui/collapsibleStates
| State | Preview | Token |
|---|---|---|
| Closed | Recent tickets | data-[state=closed] — content hidden, height: 0 |
| Open | Recent tickets T7A3763 · Fix login redirect T7A3801 · Update filters | data-[state=open] — content visible, animated height |
Trigger patterns
Icon button in header
Recent tickets
Chevron on full header
Status: Open
Priority: High
Text trigger
Collapsible vs Accordion
| Collapsible | Accordion | |
|---|---|---|
| Number | Single section | Multiple sections, grouped |
| Logic | Independent — no group coordination | type="single" can enforce only one open |
| Chrome | None — bring your own header UI | Built-in AccordionTrigger styling |
| Use for | Filters, advanced options, secondary info | FAQs, ticket detail sections, settings groups |
Sub-components
| Component | Role |
|---|---|
| Collapsible | Root — manages open state. open + onOpenChange for controlled mode |
| CollapsibleTrigger | Toggles the open state on click — use asChild to wrap any element |
| CollapsibleContent | Animated content area — hidden when closed, visible when open |
On this page