Accordion

Loading code...

Installation

pnpm dlx shadcn@latest add @uitopia/accordion

Usage

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

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

Examples

Single Accordion

Loading code...

Multiple Accordion

Loading code...

Controlled Accordion

Loading code...

Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with uitopia quickly.

Prop Mapping

Component	Radix UI Prop	Base UI Prop
`Accordion`	`type` (enum, `"single"` or `"multiple"`)	`multiple` (boolean, default: `true`)
`Accordion`	`collapsible`	removed

Quick Checklist

Replace type="single" → multiple={false} on Accordion
Remove type="multiple" from Accordion
Remove collapsible from Accordion
Always use arrays for defaultValue

Accordion

On this page