Accordion

Stacked sections that expand one at a time, or several at once.

You do. Shelf copies plain React and StyleX source into your app, so you can read and change every line.

When to use

Use when: Several related sections where people usually need one or two at a time, such as FAQs or settings groups.
Avoid when: The content is short enough to show at once, or people need to compare sections side by side.

Installation

bunx shelf add accordion

The source lands in src/components/ui/accordion.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Accordion from "@/components/ui/accordion";

<Accordion.Root defaultValue={["billing"]}>
  <Accordion.Item value="billing">
    <Accordion.Trigger>How does billing work?</Accordion.Trigger>
    <Accordion.Panel>…</Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

Examples

Multiple

Several sections can stay open at once.

Orders ship within two business days.

Return anything within 30 days for a full refund.

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, Icons, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.

Who owns the code?

How do updates work?

Is it accessible?

When to use

Installation

Usage

Examples

Multiple

Shipping

Returns

Warranty

Built on