Search for a command to run...
Vertically stacked disclosure sections that expand and collapse. Bordered container, subtle tinted fill on the open item, animated height via Radix's `--radix-accordion-content-height` var. Use for FAQs, settings groups, or any "click-to-reveal" content.
type="single" opens one item at a time; type="multiple" allows several. collapsible lets the user close the open item to leave none expanded. The trailing chevron auto-rotates 180° on open — no icon swap needed.
AccordionForwards every Radix Accordion.Root prop. Two flavors:
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | — | Required. Pick one based on how many items can be open at once. |
collapsible | boolean | false | (single-type only) Allow the open item to close, leaving none expanded. |
value | string | string[] | — | Controlled value (string for single, array for multiple). |
defaultValue | string | string[] | — | Uncontrolled initial value. |
onValueChange | (value) => void | — | Fires on open/close. |
AccordionItemOne disclosure row. Open state gets a subtle bg-sand-9/5 tint so it visually anchors the focus.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Required, unique. The key Radix uses to track open state. |
disabled | boolean | false | Prevent the item from opening. |
AccordionTriggerThe clickable row. Renders a text-sm font-medium button with a trailing ChevronDownIcon that rotates 180° when open.
AccordionContentThe collapsible body. Uses pure-CSS transition-[height] against Radix's --radix-accordion-content-height var — no JS measuring, no custom keyframes. Content paragraphs get mb-4 rhythm and underlined links by default.
Reach for Accordion when content can be hidden by default without breaking the page — FAQ pages, advanced settings, "How does this work?" expansions.
Default an item open with defaultValue when one of the items is the most likely answer. The
user reads the first answer for free, then drills as needed.
Phrase triggers as the question ("How does billing work?") not a noun ("Billing"). The question primes the user to read for the answer below.
Use Accordion for navigation or peer views. Tabs is the right primitive — accordion's
open/close UX implies "more detail," not "switch context."
Cram dense interactive content (forms, lists with their own scroll) inside. The animated height settles cleanly only for static prose; complex content jumps mid-animation.