Skip to main content

Accordion

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

import { Accordion } from "@/fragments/ui";Source

Preview

import { Accordion } from '@/components/Accordion';

<Accordion type="single" collapsible defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>What is Fragments UI?</Accordion.Trigger>
    <Accordion.Content>

Installation

npx @usefragments/cli add accordion

Writes src/fragments/ui/components/Accordion plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Anatomy

Accordion is a compound: import the root and reach its parts through dot notation.

  • Accordion.Item
  • Accordion.Trigger
  • Accordion.Content

Opening one section closes the last.

import { Accordion } from '@/components/Accordion';

<Accordion type="single" collapsible 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 '@/components/Accordion';

<Accordion type="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 '@/components/Accordion';

<Accordion type="single" collapsible defaultValue="available">
  <Accordion.Item value="available">
    <Accordion.Trigger>Notification preferences</Accordion.Trigger>
    <Accordion.Content>

API

Component props
Prop
Type
Default
Description
typeenumsinglemultiplesingleWhether one or multiple items can be open
valueunionNot setControlled open item(s): string in single mode, string[] in multiple mode
defaultValueunionNot setInitially open item(s): string in single mode, string[] in multiple mode
onValueChangeunionNot setCalled when open items change (single: string | undefined, multiple: string[])
childrenRequirednodeNot setAccordion items (use Accordion.Item with Accordion.Trigger and Accordion.Content)
collapsiblebooleanfalseWhether all items can be closed (single mode only)
headingLevelunion234563Semantic heading level for accordion triggers

Accessibility

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

Guidance

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)

Related

  • 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