Accordion

Installation

The component is exported from @by/experience-system. Add the package with your package manager:

pnpm add @by/experience-system

In this monorepo, depend on the workspace package (for example via workspace:* or your catalog) so imports resolve to packages/experience-system.

Composition

Use the following composition to build an Accordion:

Accordion
├── AccordionItem
│   ├── AccordionTrigger
│   └── AccordionContent
└── AccordionItem
    ├── AccordionTrigger
    └── AccordionContent

AccordionTrigger wraps Radix Header and Trigger (with BY styling and a chevron); you do not render a separate header part. Radix props and semantics are documented in API Reference and the Radix Accordion docs.

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@by/experience-system';

Accordion is a client component ('use client'). Use it inside a Client Component or a dynamic import when using the Next.js App Router.

<Accordion type="single" collapsible defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It follows the WAI-ARIA accordion pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Basic

A single-open accordion with the first item open by default (same preview as at the top of the page).

Multiple

Use type="multiple" to allow more than one section to stay open.

Disabled

Use the disabled prop on AccordionItem to prevent expanding an item.

Borders

Add a border around the whole accordion. Items already use bottom borders; you can tune both for a framed look.

Card

Wrap the accordion in Card (and related layout parts) for a contained FAQ or settings block.

RTL

The experience system targets RTL via Tailwind logical properties and start/end utilities where appropriate. Set dir="rtl" on a parent (for example html or a layout region) so text and the trigger chevron align correctly. For project-wide RTL configuration, follow your app’s i18n and layout guidelines.

For Radix-specific behavior, see the Radix Accordion documentation.

API Reference

The tables below mirror the Radix UI Accordion API. Subsection titles name the exports from @by/experience-system; Radix part names are noted where they differ.

Accordion

Contains all parts of an accordion.

AccordionItem

One collapsible section.

AccordionTrigger

Toggles the item. In Radix, Trigger must sit inside Header; this library composes both and adds the chevron. Trigger-level props apply to the inner Accordion.Trigger.

Header (internal):

Trigger:

AccordionContent

Collapsible panel for the item body.

For keyboard interaction, accessibility roles, and additional examples, see the Radix UI Accordion documentation.

Source in the repo: packages/experience-system/src/components/Accordion/Accordion.tsx.