React Accordion component

Preview

import { Accordion } from '@usefragments/ui';

<Accordion defaultValue={['item-1']}>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>What is Fragments UI?</Accordion.Trigger>
    <Accordion.Content>

Usage

Use when

Answers most readers skip
Settings grouped by area
Long forms broken into stages
Navigation with nested children

Avoid when

Content everyone needs to read
A line or two — just show it
Steps in an order (use Stepper)
Switching between panels (use Tabs)

Implementation notes

Headers should say what is inside
Single mode when one answer at a time is enough
Multiple mode when sections get compared
Open the section most readers came for
Never nest an accordion inside an accordion

Installation

pnpm add @usefragments/ui

Import styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.

Anatomy

Import Accordion once, then compose its parts with dot notation.

Accordion.Item
Accordion.Trigger
Accordion.Content

Opening one section closes the last.

import { Accordion } from '@usefragments/ui';

<Accordion defaultValue={['item-1']}>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>What is Fragments UI?</Accordion.Trigger>
    <Accordion.Content>
      Fragments UI is a modern React component library built on Base UI primitives, providing accessible and customizable components.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>How do I install it?</Accordion.Trigger>
    <Accordion.Content>
      Install via npm or pnpm: pnpm add @usefragments/ui
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Content>

Examples

Multiple Open

Sections stay open so answers can be compared.

import { Accordion } from '@usefragments/ui';

<Accordion multiple defaultValue={['features', 'pricing']}>
  <Accordion.Item value="features">
    <Accordion.Trigger>Features</Accordion.Trigger>
    <Accordion.Content>

With Disabled

An unavailable section stays visible but inert.

import { Accordion } from '@usefragments/ui';

<Accordion defaultValue={['available']}>
  <Accordion.Item value="available">
    <Accordion.Trigger>Notification preferences</Accordion.Trigger>
    <Accordion.Content>

API reference

Component props
Prop	Type	Default	Description
`children`Required	`React.ReactNode`	Not set	Accordion items (use Accordion.Item with Accordion.Trigger and Accordion.Content)
`className`	`string \| undefined`	Not set	—
`Content.children`Required	`React.ReactNode`	Not set	—
`Content.className`	`string \| undefined`	Not set	—
`Content.hiddenUntilFound`	`boolean \| undefined`	Not set	Let the browser's find-in-page reveal closed content.
`Content.keepMounted`	`boolean \| undefined`	Not set	Keep the content mounted while closed.
`defaultValue`	`AccordionValue \| undefined`	Not set	Items open at first (uncontrolled)
`disabled`	`boolean \| undefined`	`false`	Make every item inert
`headingLevel`	`AccordionHeadingLevel \| undefined`	`3`	Semantic heading level for accordion triggers
`Item.children`Required	`React.ReactNode`	Not set	—
`Item.className`	`string \| undefined`	Not set	—
`Item.disabled`	`boolean \| undefined`	Not set	Make this item inert (focusable, dimmed once).
`Item.value`Required	`string`	Not set	Unique value for this item.
`multiple`	`boolean \| undefined`	`false`	Let several items stay open at once; a single accordion closes the open item when another opens or when it is pressed again
`onValueChange`	`((value: AccordionValue, eventDetails: AccordionChangeEventDetails) => void) \| undefined`	Not set	Called with the open items - (value: string[], eventDetails) => void
`Trigger.children`Required	`React.ReactNode`	Not set	—
`Trigger.className`	`string \| undefined`	Not set	—
`value`	`AccordionValue \| undefined`	Not set	Controlled open items

Accessibility

Keyboard navigation with Enter/Space to toggle
Uses proper ARIA expanded/controls attributes
Focus is visible on accordion triggers

TabsalternativeUse Tabs for horizontal switching between related views
DialogalternativeUse Dialog for focused content that interrupts the flow
CardcomplementaryAccordion items can contain Card-like content

Next steps

Accessibility guidanceThe keyboard, focus and naming rules every component carries.
Every componentThe catalog, grouped by what each component does.