Accordion
A vertically stacked set of interactive headings that reveal or hide content.
Introduction
The Accordion component lets users show and hide sections of related content on a page. Built on Radix UI for accessibility and smooth animations.
Installation
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';Usage
<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>Examples
Default
A single-mode accordion where only one item can be open at a time.
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
export default function Component() {
return (
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Is it styled?</AccordionTrigger>
<AccordionContent>Yes. It comes with default styles that match the UX4G design system.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Is it animated?</AccordionTrigger>
<AccordionContent>Yes. It uses CSS animations for smooth transitions.</AccordionContent>
</AccordionItem>
</Accordion>
);
}Multiple
Set type="multiple" to allow multiple items open simultaneously.
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
export default function Component() {
return (
<Accordion type="multiple" className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>Can I open multiple items?</AccordionTrigger>
<AccordionContent>Yes. Set type="multiple" to allow multiple items open at once.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>How does it work?</AccordionTrigger>
<AccordionContent>Each item maintains its own state independently.</AccordionContent>
</AccordionItem>
</Accordion>
);
}Borderless
Figma defines a borderless variant that drops the divider between items.
import {
export default function Component() {
return (
<Accordion type='single' collapsible className='w-full max-w-lg'>
<AccordionItem borderless value='eligibility'>
<AccordionTrigger>Who is eligible to apply?</AccordionTrigger>
<AccordionContent>
Any resident of India aged 18 or over holding a valid Aadhaar number.
</AccordionContent>
</AccordionItem>
<AccordionItem borderless value='documents'>
<AccordionTrigger>What documents are required?</AccordionTrigger>
<AccordionContent>
Proof of identity, proof of address, and a recent passport-size photograph.
</AccordionContent>
</AccordionItem>
</Accordion>
);
}API Reference
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
type | single | multiple | — | Whether one or multiple items can be open |
collapsible | boolean | false | When type="single", allows closing all items |
defaultValue | string | string[] | — | Initially open item(s) |
AccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Unique identifier for the item |
AccordionTrigger
The clickable header that toggles content visibility. Includes a chevron icon that rotates on open.
AccordionContent
The collapsible content area with smooth height animation.