Docs › Components › Accordion

Shadcn Accordion

The shadcn/ui Accordion is a copy-paste set of collapsible sections, styled with Tailwind CSS v4. Built on accessible primitives, it supports keyboard navigation and single or multiple open items. Accordions power FAQs, product details, and settings across ShadcnStore blocks.

Key features

• Single or multiple open items via the multiple prop (defaults to one open item).
• Open items can collapse, keyboard navigation, and roving focus.
• Controlled or uncontrolled open state with value and defaultValue as string arrays.
• Smooth expand/collapse with CSS variables for height.

Installation

npx shadcn@latest add accordion

Usage

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

export function Example() {
  return (
    <Accordion>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>Yes. It follows the WAI-ARIA pattern.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Single vs multiple

By default one section stays open at a time and items can collapse. Set multiple to let several sections stay open, which suits FAQs and filter panels. Pass an array to defaultValue.

// One open at a time, items can collapse (default)
<Accordion>…</Accordion>

// Several open at once
<Accordion multiple defaultValue={["item-1", "item-2"]}>…</Accordion>

Default open item

<Accordion defaultValue={["item-1"]}>…</Accordion>

Controlled state

const [open, setOpen] = useState<string[]>(["item-1"])

<Accordion value={open} onValueChange={setOpen}>…</Accordion>

Anatomy

Part	Purpose
Accordion	Root; sets multiple, defaultValue, and value (string arrays).
AccordionItem	A section, identified by value.
AccordionTrigger	The button that toggles the item.
AccordionContent	The collapsible panel.

Accessibility

• Each trigger is a button that toggles its panel and exposes the expanded state to assistive tech.
• Arrow keys move between triggers; Enter or Space toggles the focused item.
• Use real heading elements around triggers where the page outline calls for it, so screen-reader users can navigate by heading.

When to use the Accordion

Use an Accordion to condense long content into scannable sections the user opens on demand: FAQs, product specs, and grouped settings. For switching between a few peer views that are all short, use Tabs instead. Do not hide critical content that every user needs behind a collapsed panel.

Used in these blocks

• FAQs: collapsible question lists.
• Features: expandable feature details.
• Product overview: specs and details.

Related components

For peer views use Tabs; for a single show/hide use a simpler toggle. Accordions often sit inside a Card and pair with a Button call to action below.

FAQ

What is the shadcn accordion used for?

The Accordion shows collapsible sections that expand one at a time, ideal for FAQs, product details, and settings where space is limited.

Can multiple accordion items be open at once?

Yes. Set multiple on the Accordion root to allow several items open. By default only one item is open and items can collapse.

How do I open an accordion item by default?

Set defaultValue to an array containing the value(s) you want open, e.g. defaultValue={["item-1"]}, or use value and onValueChange with string arrays to control it.

How do I animate the accordion?

The content exposes a CSS variable for its height, so you can animate open and close with a Tailwind transition on that variable.