‹ components

Accordion

draftv0.9.0·open in canvas

Collapsible sections on Radix Accordion — one open (default) or many.

Installnpx shadcn add @cids/accordion
Live demo

Motion · tap to replay

honors reduced-motion

Open/close animates height via `--radix-accordion-content-height` (settle curve, ~180ms); the chevron rotates over 150ms. Neutralized by `prefers-reduced-motion`.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Accordion } from "@/design-system";

<Accordion
  items={[
    { value: "fees", title: "Fees", content: <p>0.25% taker · 0.10% maker</p> },
    { value: "route", title: "Route details", content: <p>SOL → USDC via Jupiter</p> },
  ]}
/>

<Accordion type="multiple" items={items} />

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

**Closed** : title row onlychevron down.chevron rotated 180°.

Collapsible sections on Radix Accordion — one open (default) or many.

Anatomy

┌─ Fees ────────────────── ▾ ┐ ← Trigger (h-min 44px, chevron
├────────────────────────────┤    rotates 180° when open)
│ 0.25% taker · 0.10% maker  │ ← Content (height-animated)
├─ Route details ────────  ▾ ┤
└────────────────────────────┘ ← items divided by outline-variant

Props

PropTypeDefaultNotes
itemsAccordionItem[]—{ value, title, content } per section.
type"single" "multiple"`"single"Single is collapsible (all can close).
classNamestring—cn-merged onto the root.

Motion

Open/close animates height via --radix-accordion-content-height

(settle curve, ~180ms); the chevron rotates over 150ms. Neutralized by

prefers-reduced-motion.

A11y

Radix wiring: triggers are real buttons with aria-expanded +

aria-controls; panels are regions labelled by their trigger. Keyboard:

↑/↓ move between triggers, Home/End jump, Enter/Space toggle. The

chevron is aria-hidden — state is conveyed by aria-expanded, not the

glyph.

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.