Accordion

Installation

npx shadcn@latest add @uqudo/accordion

Usage

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

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
</Accordion>

type="single" opens one item at a time; add collapsible so the open item can be closed again. Use type="multiple" to let several items stay open.

Examples

Multiple

Several sections can be expanded at once. defaultValue takes an array in this mode.

API Reference

Accordion

The root. Renders a bordered, rounded container and manages which items are open.

AccordionItem

One collapsible section. Gets a bottom border except on the last item and a subtle background while open.

AccordionTrigger

The clickable heading. Wraps AccordionPrimitive.Header and Trigger and appends a chevron that flips between down and up as the item toggles.

AccordionContent

The revealed panel. Animates its height on open and close; className is applied to the inner padding wrapper.

Data attributes