Layout UI

Accordion

Vertically stacked collapsible sections built on Base UI Accordion. The chevron rotates on open via data-[panel-open]. Supports single or multiple open items via the openMultiple prop.

Preview

Installation

bash
npx shadcn@latest add @layout/accordion

Usage

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

Examples

Multiple open

Guidelines for AI agents

Use for FAQ sections, settings groups, or sidebar navigation trees. Use openMultiple on the root to allow several panels open simultaneously. Each AccordionItem must have a unique value prop.

Never

  • Neveruse accordion for tab-like switching between mutually exclusive views; use Tabs
  • Neverput accordions inside accordions more than two levels deep
  • Neverhardcode the chevron rotation angle; rely on the data-[panel-open] selector in AccordionTrigger
  • Neverremove AccordionHeader; it is required for the correct heading hierarchy and accessibility tree

Tokens consumed

--layout-border--layout-fg--layout-muted-fg--layout-ring--layout-duration-base