127 Components
Accordion
NavigationSmooth collapsible disclosure panels with spring-rotated chevron indicators, single or multiple expansion modes, and full keyboard accessibility.
Run npx shadcn@latest add https://boseui.site/r/<slug>.json in your project terminal, or copy the TypeScript code directly from any component page.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/accordion.json"
Props
TypeScript props supported by <Accordion />.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | AccordionItem[] | — | Array of accordion items with id, title, optional subtitle, and content. |
| allowMultiple | boolean | false | When true, multiple panels can remain open at the same time. |
| defaultOpenIds | string[] | ["item-1"] | Array of item IDs expanded on initial render. |
Key Features
- Smooth height and opacity transitions powered by Framer Motion AnimatePresence.
- Supports both single-open and allowMultiple expansion modes.
- Optional monospace subtitle badges for each accordion header.
Keyboard & Accessibility
- Uses semantic <button> headers with aria-expanded state announcements.
- Full Enter and Space keyboard support for toggling panels.
- Respects prefers-reduced-motion automatically.