Skip to content
Sisyphos UI

Accordion

Collapsible panels with single or multiple expansion modes and full keyboard support.

Data Display·Available inReactVueAngular·View as Markdown

Preview

tsx

Every token is a CSS variable under `--sisyphos-*`. Override them globally or scoped to any DOM subtree.

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework
import { Accordion } from "@sisyphos-ui/react";

export const Faq = () => (
  <Accordion defaultValue="install">
    <Accordion.Item value="install">
      <Accordion.Trigger>How do I install it?</Accordion.Trigger>
      <Accordion.Content>pnpm add @sisyphos-ui/react</Accordion.Content>
    </Accordion.Item>
  </Accordion>
);

Multiple expansion

`multiple` lets several panels open at once. Pass a `string[]` to `defaultValue` / `value`.

tsx

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.

Ghost variant

Borderless chrome for accordions nested inside other containers.

tsx

Use the `ghost` variant when the accordion sits inside cards or panels that already provide their own container styling.

Disabled item

Mark individual items `disabled`. The trigger stays focusable for screen readers.

tsx

Always available. Up to 3 projects.

Controlled

Sync with external state via `value` + `onValueChange`. Pass `null` to collapse all.

tsx
Active:overview

Controlled accordions let you sync the open panel with external state — URL hash, analytics, a side menu, etc.

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 on npm.

Need more?View on npm →
Was this page helpful?