Installation

Usage

import { Accordion } from '@/components/sora-ui/disclosure/accordion';

const items = [
  {
    title: 'What is Sora UI?',
    content:
      'Sora UI is an animated component registry for React and Next.js, built on Motion.',
    defaultOpen: true,
  },
  {
    title: 'How do I install a component?',
    content: 'Run npx shadcn@latest add @soralabs/accordion after initializing shadcn/ui.',
  },
];

export default function Page() {
  return <Accordion items={items} />;
}

For custom content per item, pass a React node as content or compose with the compound API:

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

export default function Page() {
  return (
    <Accordion>
      <AccordionItem defaultOpen>
        <AccordionTrigger>Custom layout</AccordionTrigger>
        <AccordionContent>
          <div className="pb-5 text-sm">Your own markup here.</div>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Props

Accordion

AccordionItem

When to Use

Use the Accordion for FAQ sections, settings panels, or any content group where users need to scan multiple topics quickly and expand only the ones they care about. It works well when you have 4–12 items of similar importance and collapsing them reduces cognitive load — for example, product feature breakdowns, pricing tier details, or support documentation.

Avoid it when all items need to be visible at once, or when there are fewer than 3 items (a simple list or card layout is clearer).

Accessibility

AccordionTrigger renders as a native <button>, so keyboard navigation (Tab, Enter, Space) works without extra configuration. Each panel region gets an aria-expanded attribute and is linked to its trigger via aria-controls. When prefers-reduced-motion: reduce is active, expand and collapse animations are skipped while the items remain fully interactive.

Credits

Inspired by Annnimate. Reimplemented for Motion and React.