Accordion

Accordions let a page hold supporting detail without forcing a route change, modal, or giant wall of always-open copy. In this system they work especially well for product specifications, policy notes, and FAQs that are useful but not primary.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<Accordion type="single" collapsible>
  <AccordionItem value="shipping">
    <AccordionTrigger>Shipping profile</AccordionTrigger>
    <AccordionContent>Dispatches in five business days.</AccordionContent>
  </AccordionItem>
</Accordion>

Why This Primitive Exists

The accordion gives you progressive disclosure without hiding information behind a separate interaction surface.

• Use it when readers may need the detail, but not all at once.
• Prefer it to a modal when the content belongs to the current page's narrative.
• Avoid it for short lists that can stay visible without increasing noise.

Examples

Single-Open Detail Stack

Use type="single" when sections are mutually exclusive or when expanded content is long enough that multiple open rows would feel heavy.

<Accordion type="single" collapsible defaultValue="shipping">
  <AccordionItem value="shipping">
    <AccordionTrigger>Shipping profile</AccordionTrigger>
    <AccordionContent>Dispatches in five business days.</AccordionContent>
  </AccordionItem>
</Accordion>

Multiple Open Sections

Switch to type="multiple" when readers are likely to compare adjacent spec groups.

<Accordion type="multiple" defaultValue={["dimensions", "care"]}>
  <AccordionItem value="dimensions">{/* ... */}</AccordionItem>
  <AccordionItem value="care">{/* ... */}</AccordionItem>
</Accordion>

In Context

The primitive becomes more useful when the surrounding layout carries the overview and the accordion handles only the secondary layers.

Guidance

Keep Triggers Specific

• Write trigger labels so readers know what opens before they interact.
• Prefer concrete labels like Materials and finish over vague labels like More info.
• If every row needs a paragraph to explain itself, the content may want a different structure.

Choose The Right Expansion Model

• Use single for dense policy or FAQ stacks.
• Use multiple for spec comparisons or short independent sections.
• Add collapsible when it should be valid to leave everything closed.

Keep Hidden Content Secondary

• Put the primary summary above the accordion, not inside the first row.
• Avoid burying essential task instructions in collapsed panels.
• If the expanded content includes major actions, consider a card, dialog, or separate section instead.

API Reference

Root And Slots

Notable Props

Because the implementation is a thin Swiss wrapper around Radix Accordion, the underlying accessibility and state props remain available.