Accordion — Frontfriend

Interactive preview

Built on React Aria. Component colors, typography and styling come from your Design System.

Installation

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

npx frontfriend download accordion -f react --primitive aria --registry v4

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

Usage & composition

React Aria retains its native API. Use onPress and isDisabled for buttons. Its DialogTrigger is the outer controller, and Dialog contains the modal; it does not use the Radix root/content arrangement.

import {
  Accordion, AccordionItem,
  AccordionTrigger, AccordionContent,
} from '@/components/ui/accordion';

export function Example() {
  return (
    <Accordion type="single">
      <AccordionItem value="identity">
        <AccordionTrigger>Your design system</AccordionTrigger>
        <AccordionContent>Unmistakably yours.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

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 actual content in its panel.

API reference

Frontfriend-owned props and selected target integration points. Native HTML and inherited primitive props remain documented by React Aria.

Prop / part	Type	Default	Purpose
`last`	boolean	`true`	Apply the configured trailing item treatment.
`naked`	boolean	`false`	Omit the configured root treatment.
`type`	single \| multiple	`single`	Choose one or multiple expanded items.
`expandedKeys`	Set<Key>	`—`	Controlled expansion. Use the target-native value shape and change handler.
`AccordionItem.value`	string	`—`	Stable item identity, mapped to the native disclosure id in React Aria.

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

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.