Accordion
Allows you to display content in collapsible panels, making it easy for users to explore details on demand while conserving screen space.
2.1 KB
•Updated on August 21, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/primitives-accordionUsage
Code
import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from '@/components/ui/accordion'Code
<Accordion>
<AccordionItem value="item-1">
<AccordionTrigger>Your Accordion Title Goes Here</AccordionTrigger>
<AccordionPanel>
This is where your accordion content will appear. You can customize this text with any message.
</AccordionPanel>
</AccordionItem>
</Accordion>Anatomy
Code
<Accordion>
<AccordionItem>
<AccordionTrigger />
<AccordionPanel />
</AccordionItem>
</Accordion>Accessibility
- Adheres to the WAI-ARIA Accordion Pattern.
- Each accordion header trigger is wrapped with the proper
aria-expandedandaria-controlsattributes.
Keyboard Interactions
| Key | Action |
|---|---|
| Space / Enter | Expands or collapses the focused accordion panel. |
| ArrowDown | Moves focus to the next accordion trigger. |
| ArrowUp | Moves focus to the previous accordion trigger. |
| Home | Moves focus to the first accordion trigger. |
| End | Moves focus to the last accordion trigger. |
API Reference
Accordion
Root component. Alias for Accordion.Root from Base UI.
AccordionItem
Individual accordion item container. Styled wrapper for Accordion.Item from Base UI with bottom border styling.
AccordionTrigger
Trigger button that toggles the accordion panel. Styled wrapper for Accordion.Trigger from Base UI. Includes a built-in chevron icon that rotates when expanded.
AccordionPanel
Collapsible content panel. Styled wrapper for Accordion.Panel from Base UI with animated height transitions. Also exported as AccordionContent.
Examples
Accordion allowing multiple panels open
Bordered accordion items