Accordion

Installation

bunx --bun shadcn@latest add @sui/accordion

Install with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@workspace/ui/components/accordion"

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Composition

Use the following composition to build an Accordion:

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

Basic

A basic accordion that shows one item at a time. The first item is open by default.

Multiple

Use the multiple prop to allow multiple items to be open at the same time.

Disabled

Use the disabled prop on AccordionItem to disable individual items.

Borders

Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.

Card

Wrap the Accordion in a Card component.

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

API Reference

See the Base UI documentation for more information.