Accordion
Collapsible content sections. Supports single or multiple open panels with smooth transitions.
Installation
$ npx shadcn@latest add accordionPreview
Usage (React/TSX)
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion"
export default function FAQ() {
return (
<Accordion type="single">
<AccordionItem value="q1">
<AccordionTrigger value="q1">What industries?</AccordionTrigger>
<AccordionContent value="q1">
Finance, hospitality, real estate, automotive, and more.
</AccordionContent>
</AccordionItem>
<AccordionItem value="q2">
<AccordionTrigger value="q2">Remote work?</AccordionTrigger>
<AccordionContent value="q2">
Yes, we're remote-first with 4 global offices.
</AccordionContent>
</AccordionItem>
</Accordion>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Whether one or multiple items can be open. |
| children | ReactNode | β | AccordionItem children. |