Accordion
An animated accordion / FAQ expander with a bouncy transition, supporting single-open and multi-open modes.
Height expansion is driven by a spring physics model that bounces back as it settles; the content slides up slightly at the same time, keeping the layers distinct.
Loading preview…
npx shadcn@latest add https://webberui.com/r/accordion.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<Accordion />
Installation
npx shadcn@latest add https://webberui.com/r/accordion.jsonOr, once registries are configured in components.json, install it as @webberui/accordion.
Usage
import { Accordion } from "@/components/ui/accordion";
<Accordion
defaultValue="a"
items={[
{ value: "a", title: "First question", content: "The answer to the first question." },
{ value: "b", title: "Second question", content: "The answer to the second question." },
]}
/>;For multi-open mode pass multiple, and defaultValue can take an array of strings:
<Accordion multiple defaultValue={["a", "b"]} items={items} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | AccordionItemData[] | — | Data for each row, containing value, title, and content |
multiple | boolean | false | Allows several rows to be expanded at once |
defaultValue | string | string[] | — | The value(s) expanded by default |
bounce | boolean | true | Whether the transition carries a bounce; turning it off uses a smooth fade in |
className | string | — | Forwarded to the outermost container |
AccordionItemData fields: value (unique identifier), title (ReactNode), content (ReactNode).
Accessibility
- The trigger is a native
buttoncarryingaria-expandedandaria-controls; the content area is aregionpointing back at the trigger witharia-labelledby - With "reduce motion" enabled at the system level, it degrades to a brief smooth fade in with no height bounce