Accordion
A disclosure list with spring height animation, rotating chevrons, and single or multiple open modes.
A collection of animated React components built with Tailwind CSS and Framer Motion.
Multiple open
type="multiple" lets any number of panels stay open at once.
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/accordion.json"Usage
tsx
import { Accordion } from "@godui/components";
<Accordion
type="single"
defaultValue="a"
items={[{ value: "a", title: "Question", content: "Answer" }]}
/>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | AccordionItem[] | — | { value, title, content, disabled? }. |
type | "single" | "multiple" | "single" | Open behavior. |
defaultValue | string | string[] | — | Initially open value(s). |
collapsible | boolean | true | Allow closing the open panel in single mode. |