Accordion

Installation#

pnpm add @ag/ui

Usage#

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@ag/ui"

<Accordion type="single" collapsible 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

Examples#

Basic#

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

Multiple#

Use type="multiple" 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 Radix UI documentation for more information.