Accordion
Collapsible panels with single or multiple expansion modes and full keyboard support.
Preview
example.tsxtsx
Every token is a CSS variable under `--sisyphos-*`. Override them globally or scoped to any DOM subtree.
React 17, 18, and 19. All components are `forwardRef` with stable `displayName`.
Yes. Install the umbrella for DX, or import individual component packages for the smallest footprint.
Installation
Install the individual package:
$ pnpm add @sisyphos-ui/accordion @sisyphos-ui/coreOr use the umbrella package that bundles everything:
$ pnpm add @sisyphos-ui/uiUsage
Import the component styles and the component itself:
snippet.tsxtsx
import "@sisyphos-ui/accordion/styles.css";
import { Accordion } from "@sisyphos-ui/accordion";Multiple expansion
`multiple` lets several panels open at once. Pass a `string[]` to `defaultValue` / `value`.
example.tsxtsx
Orders placed before 4pm ship same day. Tracking numbers arrive by email the moment a parcel leaves the warehouse.
30-day window, no questions asked. Print a prepaid label from your order page and drop it at any carrier.
Two years on all hardware defects. Extend to five via the Pro plan.
Ghost variant
Borderless chrome for accordions nested inside other containers.
example.tsxtsx
Use the `ghost` variant when the accordion sits inside cards or panels that already provide their own container styling.
Less visual weight, same keyboard interactions and ARIA wiring.
Disabled item
Mark individual items `disabled`. The trigger stays focusable for screen readers.
example.tsxtsx
Always available. Up to 3 projects.
Unlimited projects, priority support.
This panel is disabled in the demo — the trigger stays focusable for screen readers but cannot toggle.
Controlled
Sync with external state via `value` + `onValueChange`. Pass `null` to collapse all.
example.tsxtsx
Active:
overviewControlled accordions let you sync the open panel with external state — URL hash, analytics, a side menu, etc.
Pass `value` + `onValueChange`. Pass `null` to collapse all.
API
Props table is being written. See the package README for the complete API surface.
The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README.
Was this page helpful?
Edit this page on GitHub