Accordion
Animated, accessible, and customizable Accordion component.
Install
pnpm dlx shadcn@latest add https://www.katestroyui.com/r/accordionUsage
1import {2 Accordion,3 AccordionContent,4 AccordionItem,5 AccordionTrigger,6} from "@/components/ui/accordion"78<Accordion type="single" defaultValue="item-1">9 <AccordionItem value="item-1">10 <AccordionTrigger>Accordion Title</AccordionTrigger>11 <AccordionContent>Content</AccordionContent>12 </AccordionItem>13</Accordion>
Props
| Prop | Type | Description | Default |
|---|---|---|---|
| type | "single" | "multiple" | Accordion type (single or multiple selection) | "single" |
| defaultValue | string | string[] | Initially open item(s) | - |
| value | string | string[] | Controlled value (controlled usage) | - |
| onValueChange | (value) => void | Called when value changes | - |