Accordion — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to React Aria.

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download accordion -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion";
<div className="w-[400px]">
  <Accordion
    type="single"
    collapsible
    className="w-full"
    naked={false}
  >
    <AccordionItem value="item-1">
      <AccordionTrigger>Is it accessible?</AccordionTrigger>
      <AccordionContent>
        Yes. It adheres to the WAI-ARIA design pattern.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-2">
      <AccordionTrigger>Is it styled?</AccordionTrigger>
      <AccordionContent>
        Yes. It comes with default styles that matches the other
        components&apos; aesthetic.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-3">
      <AccordionTrigger>Is it animated?</AccordionTrigger>
      <AccordionContent>
        Yes. It&apos;s animated by default, but you can disable it if you
        prefer.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</div>;

One item, or several

Use type="multiple" when people need to compare content across sections. For a single-item accordion, keep the expanded state in the native shape of the selected target: React Aria uses expanded keys, Base UI uses a value array, Radix and Reka distinguish single and multiple values.

Keep item identities stable across renders. Put a short, descriptive label in each trigger and the actual content in its panel.

Accessibility

Keep the trigger a native primitive button and retain its expanded state.
Use headings that fit the surrounding page hierarchy.
Test keyboard navigation, activation and the relationship between trigger and panel.
Keep all content available when reduced motion is enabled.

Examples

Default

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion";
<div className="w-[400px]">
  <Accordion
    type="single"
    collapsible
    className="w-full"
    
  >
    <AccordionItem value="item-1">
      <AccordionTrigger>Is it accessible?</AccordionTrigger>
      <AccordionContent>
        Yes. It adheres to the WAI-ARIA design pattern.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-2">
      <AccordionTrigger>Is it styled?</AccordionTrigger>
      <AccordionContent>
        Yes. It comes with default styles that matches the other
        components&apos; aesthetic.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-3">
      <AccordionTrigger>Is it animated?</AccordionTrigger>
      <AccordionContent>
        Yes. It&apos;s animated by default, but you can disable it if you
        prefer.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</div>;

Multiple

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion";
<div className="w-[400px]">
  <Accordion type="multiple" className="w-full">
    <AccordionItem value="item-1">
      <AccordionTrigger>Is it accessible?</AccordionTrigger>
      <AccordionContent>
        Yes. It adheres to the WAI-ARIA design pattern.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-2">
      <AccordionTrigger>Is it styled?</AccordionTrigger>
      <AccordionContent>
        Yes. It comes with default styles that matches the other
        components&apos; aesthetic.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-3">
      <AccordionTrigger>Is it animated?</AccordionTrigger>
      <AccordionContent>
        Yes. It&apos;s animated by default, but you can disable it if you
        prefer.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</div>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Prop	Type	Default	Description
`last`	`boolean`	`true`
`naked`	`boolean`	`false`	Render the accordion without its default container styling.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.