Shadcn UI Components
Accordion
An accordion component for displaying collapsible content sections. Supports single or multiple expanded items.
Accordion Examples
Single Accordion
Multiple Accordion
Installation
# The component is already installed at:
# src/components/ui/shadcn/accordion.tsx
Usage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/shadcn/accordion'
export function AccordionDemo() {
return (
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
</Accordion>
)
}
Props
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
| type | single | multiple | - | Whether one or multiple items can be open |
| collapsible | boolean | false | When type is single, allows closing all items |
Components
| Component | Description |
|---|---|
| Accordion | The root component |
| AccordionItem | Container for each item |
| AccordionTrigger | The clickable header |
| AccordionContent | The collapsible content |