Accordion
A vertically stacked set of collapsible containers allowing users to toggle content visibility. Customize the animation effects with variants and transitions for expanding/collapsing the sections.
Examples
Accordion Basic
Accordion with icons
You can control transformations on elements inside AccordionTrigger using group-data-[expanded]:.....
Here, we apply -rotate-180 to rotate the icon 180 degrees when its associated section is expanded.
Accordion custom variants
Installation
npx shadcn add "https://motion-primitives.com/c/accordion.json"Component API
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | The content elements of the accordion. | |
| className | string | Optional CSS class for styling the accordion container. | |
| transition | Transition | Transition settings from motion for animation effects. | |
| variants | { expanded: Variant; collapsed: Variant } | Custom variants for expanded and collapsed states. | |
| expandedValue | React.Key | null | Controlled expanded value. | |
| onValueChange | (value: React.Key | null) => void | Callback function when the expanded value changes. |
AccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
| value | React.Key | Unique identifier for controlling the accordion item state. | |
| children | ReactNode | The content elements of the accordion item. | |
| className | string | Optional CSS class for styling the accordion item container. |
AccordionTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Content of the trigger, typically a string or formatted text. | |
| className | string | Optional CSS class for styling the trigger element. |
AccordionContent
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | The content displayed when the accordion item is expanded. | |
| className | string | Optional CSS class for styling the content container. |