Accordion

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>

Examples

Multiple Open Items

Allow multiple accordion items to be open simultaneously.

Default Expanded

Set accordion items to be expanded by default.

Disabled Items

Disable specific accordion items to prevent interaction.

Chevron Indicator

Use chevron icons as expand/collapse indicators.

Indicator at Start

Position the expand/collapse indicator at the start of the trigger.

Without Indicator

Hide the expand/collapse indicator for a minimal design.

With Icon

Add custom icons to accordion triggers.

With Subtitle

Include descriptive subtitles in accordion triggers.

Outline Variant

Display accordion with outline styling.

Split Variant

Use split styling for separated accordion items.

Isolated Bordered Variant

Apply bordered styling to isolated accordion items.

Isolated Filled Variant

Use filled background styling for isolated items.

Isolated Filled Bordered Variant

Combine filled background with borders for isolated items.

Nested Variant

Create nested accordion structures with indentation.

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.

Custom Props

Accordion

AccordionTrigger

Modified Defaults

Our implementation changes the following Base UI prop default:

• Accordion: multiple defaults to false (Base UI doesn't set a default)