Accordion
Stacked disclosure panels with rotating chevrons. Only the trigger is focusable — closed panels are unmounted.
Preview
Live preview
Copy components from the shadcn registry with npx shadcn add, or paste the source into your project — there is no runtime dependency on this library.
Usage
Examples
Multiple panels open
Invoices are issued on the 1st of each month.
<Accordion type="multiple">
<AccordionItem value="billing">
<AccordionTrigger>Billing</AccordionTrigger>
<AccordionContent>…</AccordionContent>
</AccordionItem>
<AccordionItem value="usage">
<AccordionTrigger>Usage</AccordionTrigger>
<AccordionContent>…</AccordionContent>
</AccordionItem>
</Accordion>Bordered variant
Rounded border around each item.
<Accordion type="single" variant="bordered" collapsible>…</Accordion>Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type(required) | "single" | "multiple" | — | Whether one panel or several can be open at once. |
| collapsible | boolean | false (single) | Lets the open item close itself when clicked again. |
| value / defaultValue | string | string[] | — | Controlled or uncontrolled open item(s). |
| onValueChange | (value: string | string[]) => void | — | Fires when the open set changes. |
| variant | "default" | "bordered" | "default" | Hairline dividers or boxed items. |
| AccordionItem value(required) | string | — | Identifies the panel; must be unique. |
Accessibility
Accessibility notes
- Triggers are real buttons with aria-expanded and aria-controls; panels carry role="region" and aria-labelledby.
- In single mode the inactive panels are unmounted, so hidden content is never reachable.
- The chevron rotates via data-[state=open] with a 200ms transform — no layout animation, no shift.
- Keep trigger labels specific ("How is vert-ui installed?", not "More").
- For long documents consider a heading-per-item navigation instead of an accordion.