Installation
Run the following command:
Update your imports:import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion"
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion"Usage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
export default function Home() {
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
AccordionTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default | outline | ghost | underline | card | default | Style variant of the trigger |
| iconPosition | right | left | right | Position of the chevron icon |
| icon | React.ReactNode | - | Custom icon element |
AccordionContent
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default | outline | ghost | underline | card | default | Style variant of the content |
| animation | default | fade | none | default | Animation style when expanding |
Radix UI Props
The Accordion components are built on Radix UI primitives and support all their props:
Accordion
Radix UI Accordion Root props:
type: 'single' | 'multiple'collapsible: booleanvalue: stringdefaultValue: stringonValueChange: (value: string) => void
AccordionItem
Radix UI Accordion Item props:
value: string (required)disabled: boolean
AccordionTrigger
Radix UI Accordion Trigger props
AccordionContent
Radix UI Accordion Content props
All components also support HTML attributes and event handlers appropriate to their element type.