023
Accordion
NavigationRun the npx shadcn add command shown on each page; the source is copied into your project.
Open: install
Customize
Mode
Collapse
Code
<Accordion defaultValue={["install"]}>
<AccordionItem value="install">
<AccordionTrigger>How do I install a component?</AccordionTrigger>
<AccordionContent>…</AccordionContent>
</AccordionItem>
…
</Accordion>Install
npx shadcn@latest add https://components.haedong.dev/r/accordion.json
Props
Accordion props below. AccordionItem takes value; AccordionTrigger and AccordionContent take native button / div props. Closed panels unmount.
| Prop | Type | Description |
|---|---|---|
| value / defaultValue | string[] | Open items (controlled / uncontrolled). |
| onValueChange | (value: string[]) => void | Called when an item opens or closes. |
| multiple | boolean | Several items may be open at once. Defaults to false. |
| collapsible | boolean | In single mode, allow closing the open item. Defaults to true. |
| scramble | boolean | Replay the character-scramble decode on trigger labels on hover. Defaults to true. |