Loading...
Loading...
> A vertically stacked set of interactive headings that each reveal a section of content.
1import {2 Accordion,3 AccordionContent,4 AccordionItem,5 AccordionTrigger,6} from "@/components/ui/accordion"
1<Accordion type="single" collapsible className="w-full">2 <AccordionItem value="item-1">3 <AccordionTrigger>Is it accessible?</AccordionTrigger>4 <AccordionContent>5 Yes. It adheres to the WAI-ARIA design pattern.6 </AccordionContent>7 </AccordionItem>8</Accordion>
1<Accordion type="single" collapsible className="w-full">2 <AccordionItem value="item-1">3 <AccordionTrigger>Authentication</AccordionTrigger>4 <AccordionContent>5 NextAuth v5 with JWT sessions. Supports credentials and OAuth6 providers.7 </AccordionContent>8 </AccordionItem>9 <AccordionItem value="item-2">10 <AccordionTrigger>Database</AccordionTrigger>11 <AccordionContent>12 PostgreSQL with Prisma ORM. Includes migrations and type safety.13 </AccordionContent>14 </AccordionItem>15 <AccordionItem value="item-3">16 <AccordionTrigger>Payments</AccordionTrigger>17 <AccordionContent>18 Polar.sh integration with webhook handling for subscriptions.19 </AccordionContent>20 </AccordionItem>21</Accordion>
1<Accordion type="multiple" className="w-full">2 <AccordionItem value="item-1">3 <AccordionTrigger>Tech Stack</AccordionTrigger>4 <AccordionContent>5 Next.js 15 (App Router, React 19) with TypeScript strict mode.6 </AccordionContent>7 </AccordionItem>8 <AccordionItem value="item-2">9 <AccordionTrigger>Styling</AccordionTrigger>10 <AccordionContent>11 Tailwind CSS 4 with DaisyUI themes and design tokens.12 </AccordionContent>13 </AccordionItem>14 <AccordionItem value="item-3">15 <AccordionTrigger>Components</AccordionTrigger>16 <AccordionContent>17 87 production-ready components with Radix UI primitives.18 </AccordionContent>19 </AccordionItem>20</Accordion>
1<Accordion type="single" collapsible defaultValue="item-2" className="w-full">2 <AccordionItem value="item-1">3 <AccordionTrigger>Development</AccordionTrigger>4 <AccordionContent>5 Run npm run dev to start the development server on port 3000.6 </AccordionContent>7 </AccordionItem>8 <AccordionItem value="item-2">9 <AccordionTrigger>Build</AccordionTrigger>10 <AccordionContent>11 Run npm run build to create a production build with optimizations.12 </AccordionContent>13 </AccordionItem>14 <AccordionItem value="item-3">15 <AccordionTrigger>Deploy</AccordionTrigger>16 <AccordionContent>17 Deploy to Vercel with automatic CI/CD and edge runtime support.18 </AccordionContent>19 </AccordionItem>20</Accordion>
1const [value, setValue] = React.useState("item-1");23<Accordion type="single" value={value} onValueChange={setValue}>4 <AccordionItem value="item-1">5 <AccordionTrigger>Controlled Item</AccordionTrigger>6 <AccordionContent>7 State is managed externally via value prop.8 </AccordionContent>9 </AccordionItem>10</Accordion>
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Determines whether one or multiple items can be opened. |
| collapsible | boolean | false | Allow closing the open item (only for type='single'). |
| defaultValue | string | string[] | undefined | The default open item(s). |
| value | string | string[] | undefined | Controlled state for open item(s). |
| onValueChange | (value: string | string[]) => void | undefined | Callback when open item(s) change. |
| disabled | boolean | false | Disable all accordion items. |
✓ Use Accordion when:
✗ Don't use when:
Best Practices: