Accordion
Sections that open one at a time, divided by quiet lines; each heading leans, led by a slanted sliver that lights with the accent while open.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/accordionExamples
Questions, one open at a time
When the crate is signed for at the north gate. Half if it arrives late.
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger,} from "@/components/zero/accordion";const answers = [ [ "When am I paid?", "When the crate is signed for at the north gate. Half if it arrives late.", ], [ "Can I hand a job back?", "Until you pick the crate up. After that it is yours to deliver.", ], [ "What does Rush mean?", "The reward is higher and the window is shorter. Rush jobs cannot be handed back.", ],] as const;export default function AccordionFaq() { return ( <Accordion defaultValue={["When am I paid?"]} className="max-w-lg"> {answers.map(([question, answer]) => ( <AccordionItem key={question} value={question}> <AccordionTrigger>{question}</AccordionTrigger> <AccordionContent>{answer}</AccordionContent> </AccordionItem> ))} </Accordion> );}Behaviour
Opening one section closes the others; pass multiple to let several stay open. The section unfolds to its own height and folds back faster; under reduced motion it simply appears.
Arrow keys move between headings, Enter or Space opens one. Each heading is a button inside a heading element.
Props
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
| multiple | boolean | false | Lets several sections stay open. |
| defaultValue / value | any[] | — | The open sections, by their items' values. |
Also takes every prop of Base UI's Accordion.Root.
AccordionItem, AccordionTrigger, AccordionContent
Also takes every prop of Base UI's Accordion.Item.