Navigation
Accordion
Disclosure rows that open in place.
When to reach for it
Examples
default
Notes
Radix root, re-exported. Pass type="single" collapsible for an FAQ and type="multiple" for a settings stack; Radix's own discriminated union then types value correctly for each.
Props
Takes no props of its own.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
AccordionItem
One disclosure row: a hairline-ruled trigger and its panel.
The marker is a plus that rotates into a minus, not a chevron. A chevron says "there is more below"; a plus says "this opens" — and in a stack of rows the difference decides whether the reader expects navigation or expansion.
The panel animates on Radix's own --radix-accordion-content-height, so it opens to its real height without measuring anything at the call site.
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| titlerequired | ReactNode | The row's summary — what the reader clicks. Named `title` rather than inherited from the DOM attribute of the same name, which is a tooltip. |
Also accepts everything in Omit<ComponentProps<typeof AccordionPrimitive.Item>, 'children' | 'title'>. Those are forwarded to the underlying element and are not listed row by row.
Re-exports
Accordion = AccordionPrimitive.RootRadix root, re-exported. Pass type="single" collapsible for an FAQ and type="multiple" for a settings stack; Radix's own discriminated union then types value correctly for each.