Accordion

Component accordion-demo not found in registry.

Installation

pnpmnpmyarnbun
pnpm dlx createui@latest add accordion
Copy

Usage

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

Copy<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>

Examples

Basic

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

Component accordion-basic not found in registry.

Multiple

Use type="multiple" to allow multiple items to be open at the same time.

Component accordion-multiple not found in registry.

Disabled

Use the disabled prop on AccordionItem to disable individual items.

Component accordion-disabled not found in registry.

Borders

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

Component accordion-borders not found in registry.

Card

Wrap the Accordion in a Card component.

Component accordion-card not found in registry.

API Reference

See the Radix UI documentation for more information.