Accordion
A vertically stacked set of interactive headings that each reveal a section of content. Built on Base UI's accordion primitive.
Last updated January 1, 1980
CreditsModifiedPublished
Copied from shadcn/ui.
- Trigger uses text-start and a single chevron that rotates 180° via aria-expanded, instead of two swapped icons — reads correctly in both LTR and RTL without an icon-mirroring rule
Overview
Installation
Usage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"
export function Example() {
return (
<Accordion defaultValue={["item-1"]}>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
</Accordion>
)
}Examples
RTL
API Reference
Accordion
API reference: Base UI Accordion .