Open studio

Accordion

A stack of collapsible sections, one or many open at a time.

const items = /* ... */;

<Accordion className="max-w-sm">
  {items.map((item) => (
    <AccordionItem id={item.id} key={item.id}>
      <AccordionTrigger>{item.question}</AccordionTrigger>
      <AccordionPanel>{item.answer}</AccordionPanel>
    </AccordionItem>
  ))}
</Accordion>

Installation

pnpm dlx shadcn@latest add @dotui/accordion

Anatomy

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion"
<Accordion>
  <AccordionItem>
    <AccordionTrigger>Heading</AccordionTrigger>
    <AccordionPanel>Content</AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionTrigger>Heading</AccordionTrigger>
    <AccordionPanel>Content</AccordionPanel>
  </AccordionItem>
</Accordion>

AccordionTrigger renders the heading, the button, and the marker; AccordionPanel holds the collapsible content. For a single section with a trigger of your own, use Collapsible.

Open state

Expanded items are tracked by each AccordionItem's id. Give the group defaultExpandedKeys for uncontrolled state, or expandedKeys with onExpandedChange to control it — both are a Set of ids. Pass allowsMultipleExpanded to let the set hold more than one id at a time.

<Accordion defaultExpandedKeys={["getting-started"]}>
  <AccordionItem id="getting-started">
    <AccordionTrigger>How do I get started?</AccordionTrigger>
    <AccordionPanel>…</AccordionPanel>
  </AccordionItem>
</Accordion>

Examples

FAQ

Getting started is simple! Install the package using your preferred package manager, then import the components you need. All components are built on React Aria Components and follow accessibility best practices out of the box.

Product Features

  • Real-time multiplayer editing
  • Inline comments and mentions
  • Shared workspaces with roles

Settings Panel

API Reference

Accordion

An accordion is a group of collapsible items. It supports both single and multiple expanded items.

PropType
boolean
ReactNode | function
Iterable<Key>
Iterable<Key>
boolean

AccordionItem

An AccordionItem is one collapsible section: a heading trigger and a panel.

PropType
ReactNode | function
boolean
Key
boolean
boolean

AccordionTrigger

An AccordionTrigger renders the item's heading, button, and marker.

PropType
ReactNode | function
boolean
boolean

AccordionPanel

An AccordionPanel provides the content for an item.

PropType
ReactNode
ElementType

Last updated on 9/14/2026