Layout & containers
Accordion
Collapsible sections that keep a long page scannable — FAQs, settings groups, nested detail. Open one at a time or many at once, with a smooth height transition and a quietly rotating chevron.
npx shadcn@latest add @orbit/accordionOverview
Live — click a row to expand it.
Anatomy
Each header carries an optional leading icon, a title, an optional badge and a meta line — so a row can say a lot before it's even opened. The 32px icon square and the chevron pick up the accent when the row is open.
Variants
Separated cards for standalone groups, a single bordered list for a tight stack, and flush for embedding inside an existing panel.
Single vs. multiple
By default opening a row closes the others — best for FAQs where one answer at a time keeps focus. Set multiple to let people open several sections together, useful for settings.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| <Accordion> variant | "separated" | "bordered" | "flush" | "separated" | Spaced cards, one framed list with row dividers, or bare rows for embedding. |
| <Accordion> multiple | boolean | false | Allow several sections to be open at once. |
| <Accordion> defaultValue | string[] | [] | Item value(s) that start open (uncontrolled). |
| <Accordion> value | string[] | — | Controlled open item value(s); pair with onValueChange. |
| <Accordion> onValueChange | (value: string[]) => void | — | Called with the new open value(s) when an item is toggled. |
| <Accordion> accent | string | var(--pri) | CSS color for the open accent — chevron, icon tint, open border and shadow. |
| <Accordion> disabled | boolean | false | Ignore all user interaction. |
| <AccordionItem> value | string | — | Unique value matched by value/defaultValue. Auto-generated when omitted. |
| <AccordionItem> disabled | boolean | false | Dims the row and blocks toggling. |
| <AccordionItem> onOpenChange | (open: boolean) => void | — | Called when this item opens or closes. |
| <AccordionTrigger> icon | ReactNode | — | Leading 16px glyph in a 32px tinted square — picks up the accent when open. |
| <AccordionTrigger> badge | ReactNode | — | Small mono uppercase pill after the title (e.g. “Admin”). |
| <AccordionTrigger> meta | ReactNode | — | Muted second line under the title (e.g. “3 settings”). |
| <AccordionContent> children | ReactNode | — | Panel body — indented to align under the title and animated over 260ms. |
Usage
Lead with a clear header
People decide whether to expand from the title alone — make it specific and front-load the keyword.
Hide critical content
Anything a user must see to act shouldn’t start collapsed behind a click.
Use single mode for FAQs
One answer at a time keeps the reader oriented and the page from jumping.
Nest accordions deeply
More than one level of disclosure gets disorienting fast — flatten or split the page.
Keyboard & accessibility
Built on Base UI Accordion: each header is a native <button> inside a heading, aria-expanded reflects the open state, and the panel is referenced via aria-controls. Panels respect prefers-reduced-motion through the global guard.