Accordion

The accordion stacks collapsible sections, each with a header that toggles its content. Use it for FAQs, settings groups, or any list where showing one section at a time keeps the page short.

Preview

Installation

npx shadcn@latest add @cubby-ui/accordion

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/cubby-ui/accordion";

<Accordion>
  <AccordionItem>
    <AccordionTrigger />
    <AccordionContent />
  </AccordionItem>
</Accordion>

Composition

Accordion
└── AccordionItem
    ├── AccordionTrigger
    └── AccordionContent

AccordionTrigger renders its own AccordionHeader internally, so you compose only these four parts.

Examples

Multiple Open Items

Set multiple on Accordion to keep more than one item open at once.

Default Expanded

Pass defaultValue on Accordion to expand items on first render.

Disabled Items

Set disabled on an AccordionItem to prevent it from toggling.

Chevron Indicator

Set indicatorType="chevron" on AccordionTrigger to use a chevron instead of the plus.

Indicator at Start

Set indicatorPosition="start" on AccordionTrigger to move the indicator before the label.

Without Indicator

Set showIndicator={false} on AccordionTrigger to hide the indicator.

With Icon

Use the icon prop on AccordionTrigger to render a custom icon before the label.

With Subtitle

Use the subtitle prop on AccordionTrigger to render secondary text below the label.

Variants

Use variant on Accordion to change how items are framed and separated.

API Reference

The Accordion component is built on top of Base UI's Accordion. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI Accordion documentation.

Props

Accordion

Collapsible container that groups expandable content sections. Wraps Base UI's Accordion.Root.

AccordionTrigger

Clickable header that toggles content visibility. Wraps Base UI's Accordion.Trigger.