Stacked sections that open and close in place: one at a time or several, on glass or plain hairlines.
Accordion holds a list of questions, settings groups or details where people read one section at a time. type="single" keeps one section open (collapsible lets the open one close again); type="multiple" lets any number stay open.
Each header is a real heading (headingLevel, default h3) holding a button, so the page outline stays right. The panel animates its height with a grid-row transition, with no measuring, and reduced motion makes it instant. Closed panels are inert, so their links leave the tab order.
appearance="glass" is a frosted panel with hairlines between sections; "plain" is hairlines only, for use inside a Card or GlassPanel that already provides the surface.
Installation
npx shadcn@latest add KezLahd/rime/accordionAlso installs: base, icon.
Usage
import { Accordion } from "@/components/ui";
<Accordion
defaultValue={["billing"]}
items={[
{ id: "billing", title: "When is an invoice issued?", content: "On the first working day of each month." },
{ id: "seats", title: "Can I add a team member mid-cycle?", content: "Yes, from the day it is added." },
]}
/>Examples
Single, one open
Multiple open
Plain, inside a surface
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsRequired | ReadonlyArray<AccordionItem> | ||
| type | "single" | "multiple" | "single" | single = one section open at a time. multiple = any number. |
| value | ReadonlyArray<string> | Open ids, controlled. Pair with onValueChange. | |
| defaultValue | ReadonlyArray<string> | Open ids on first render, uncontrolled. | |
| onValueChange | (value: string[]) => void | ||
| collapsible | boolean | true | single only: false keeps one section open at all times. |
| headingLevel | 2 | 3 | 4 | 5 | 3 | Heading level the triggers sit in, to fit the page outline. |
| appearance | "glass" | "plain" | "glass" | glass = a frosted panel with hairlines between sections. plain = hairlines only. |
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --accordion-pad-x | calc(16px * var(--density)) | … |
| --accordion-pad-y | calc(14px * var(--density)) | … |
| --accordion-radius | var(--r-lg) | … |
| --accordion-width | min(560px, 100%) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --blur-panel-light | tokens.css | … |
| --border-w | tokens.css | … |
| --density | tokens.css | … |
| --dur | tokens.css | … |
| --dur-slow | tokens.css | … |
| --ease | tokens.css | … |
| --ease-out | tokens.css | … |
| --focus-color | tokens.css | … |
| --glass-edge | tokens.css | … |
| --glass-fill-nested | tokens.css | … |
| --ink-body | tokens.css | … |
| --ink-brand | tokens.css | … |
| --ink-disabled | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-muted | tokens.css | … |
| --line | tokens.css | … |
| --line-glass | tokens.css | … |
| --r-lg | tokens.css | … |
| --shadow-hairline-card | tokens.css | … |
| --shadow-specular | tokens.css | … |
| --text-body | tokens.css | … |
| --text-small | tokens.css | … |
| --wash-hover | tokens.css | … |
Accessibility
- WAI-ARIA accordion: each trigger is a <button> inside a heading, with aria-expanded and aria-controls; each panel is a region labelled by its trigger.
- Up and Down move focus between headers, Home and End jump to the first and last; Enter and Space toggle.
- Closed panels are inert, so nothing hidden can take focus.
- Focus shows as a 2px accent outline inset in the row.
Do and don't
Do
- Write titles as the question or the name of the group, so a closed list scans.
- Open the most useful section by default with defaultValue.
Don't
- Don't hide required form fields in a closed section.
- Don't nest accordions; use headings and a longer page instead.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open accordion.mdRelated: collapsible, card