Skip to Content
ComponentsAccordion

Accordion

A vertically stacked set of collapsible sections built on Base UI’s Accordion primitive. Each item has a trigger header that reveals its panel with an animated height transition.

Import

import { Accordion } from "chunks-ui";

Basic Usage

<Accordion.Root>
  <Accordion.Item value="item-1">
    <Accordion.Header>
      <Accordion.Trigger>What is chunks-ui?</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>
      <div className="pb-4">A personal React component library.</div>
    </Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Header>
      <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>
      <div className="pb-4">Yes — keyboard nav and ARIA handled by Base UI.</div>
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

Multiple Open Items

By default only one item can be open at a time. Set multiple to allow expanding several items simultaneously:

<Accordion.Root multiple>
  {/* items */}
</Accordion.Root>

Default Open

Pass an array of item values to defaultValue to start with those items expanded:

<Accordion.Root defaultValue={["item-1"]}>
  {/* items */}
</Accordion.Root>

This item is open on first render via defaultValue.

Controlled

Accordion.Root infers the type of an item’s value from value or defaultValue (arrays of it), so a typed useState setter is an onValueChange:

function ControlledAccordion() {
  const [value, setValue] = useState<string[]>([]);
 
  return (
    <Accordion.Root value={value} onValueChange={setValue}>
      <Accordion.Item value="item-1">
        <Accordion.Header>
          <Accordion.Trigger>Section</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Panel>
          <div className="pb-4">Content</div>
        </Accordion.Panel>
      </Accordion.Item>
    </Accordion.Root>
  );
}

Disabled Item

Set disabled on Accordion.Item to prevent it from being opened:

<Accordion.Item value="item-2" disabled>
  <Accordion.Header>
    <Accordion.Trigger>Unavailable</Accordion.Trigger>
  </Accordion.Header>
  <Accordion.Panel>
    <div className="pb-4">Unreachable content.</div>
  </Accordion.Panel>
</Accordion.Item>

Animation

The panel height animates using CSS transitions via Base UI’s --accordion-panel-height CSS variable. No JavaScript animation library is required. To opt out, override the transition class on Accordion.Panel.

Respects prefers-reduced-motion — with reduced motion enabled the panel and chevron don’t transition.

Compound Parts

PartDescription
Accordion.RootState container. Manages which items are open.
Accordion.ItemWraps a single collapsible section. Requires a unique value.
Accordion.HeaderSemantic <h3> wrapper around the trigger.
Accordion.TriggerClickable button that toggles the panel. Includes the chevron icon.
Accordion.PanelThe collapsible content area. Animates height on open/close.

Props

All compound parts accept the same props as their underlying Base UI Accordion counterparts. No additional custom props are defined.

Last updated on
ComponentsAvatar