Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Preview
Is it accessible?
Yes. It adheres to the WAI-ARIA design pattern.
Is it styled?
Yes. It comes with default styles using shadcn/ui theming.
Is it animated?
Yes. It uses CSS animations for smooth transitions.
Usage
<ui-accordion type="single" collapsible>
<ui-accordion-item value="item-1">
<ui-accordion-trigger>Is it accessible?</ui-accordion-trigger>
<ui-accordion-content>Yes. It adheres to the WAI-ARIA design pattern.</ui-accordion-content>
</ui-accordion-item>
<ui-accordion-item value="item-2">
<ui-accordion-trigger>Is it styled?</ui-accordion-trigger>
<ui-accordion-content>Yes. It comes with default styles using shadcn/ui theming.</ui-accordion-content>
</ui-accordion-item>
<ui-accordion-item value="item-3">
<ui-accordion-trigger>Is it animated?</ui-accordion-trigger>
<ui-accordion-content>Yes. It uses CSS animations for smooth transitions.</ui-accordion-content>
</ui-accordion-item>
</ui-accordion>
Sub-components
<ui-accordion> <ui-accordion-item> <ui-accordion-trigger> <ui-accordion-content>
Props
<ui-accordion>
| Prop | Type | Default | Description |
|---|
type | "single" | "multiple" | "single" | Whether one or multiple items can be opened at the same time. |
defaultValue | string | string[] | — | The default open item(s). |
collapsible | boolean | false | Whether an open item can be collapsed. |
<ui-accordion-item>
| Prop | Type | Default | Description |
|---|
value | string | — | A unique value for the item. |
<ui-accordion-trigger> Custom wrapper
| Prop | Type | Default | Description |
|---|
href | string | — | URL to navigate to. Renders as a link when set. (Custom prop) |
All components also accept standard HTML attributes (class, id, style, data-*, aria-*, etc.) which are passed through to the underlying element.