Accordion
DisclosureVertically stacked sections where users can expand or collapse content.
npx shadcn@latest add accordionDefault
Preview
LiveYou are billed monthly for the plan you choose. Credits roll over to the next cycle and never expire.
tsx
1<Accordion defaultValue={["item-1"]}>2 <AccordionItem value="item-1">3 <AccordionTrigger>How does billing work?</AccordionTrigger>4 <AccordionContent>Answer text goes here.</AccordionContent>5 </AccordionItem>6 <AccordionItem value="item-2">7 <AccordionTrigger>Can I cancel anytime?</AccordionTrigger>8 <AccordionContent>Answer text goes here.</AccordionContent>9 </AccordionItem>10</Accordion>
API reference
All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.
| Prop | Type | Description |
|---|---|---|
| type | "single" | "multiple"= "single" | Whether one or many panels can be open at once. |
| defaultValue | string[] | Panels open by default. |