Accordion

On the first of each month. You can switch to yearly billing any time and we’ll prorate the difference.

Installation

pnpm dlx shadcn@latest add @paneui/accordion

Usage

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

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionPanel>Yes. It follows the WAI-ARIA accordion pattern.</AccordionPanel>
  </AccordionItem>
</Accordion>

Composition

Accordion
└── AccordionItem
    ├── AccordionTrigger
    └── AccordionPanel

Examples

Basic

Use for FAQs and settings where one open answer at a time is enough.

Multiple

Disabled

With icons

Use icons when readers scan the list by topic.

Borderless

Use the borderless variant inside cards or panels that already have a frame.

Borderless, multiple

Borderless, disabled

Borderless, with icons

Use one icon family (solid) per list so the bare glyphs line up.

RTL

Motion

The panel height springs open (about 8% overshoot) and eases shut without bounce. With reduced motion the panel opens instantly.

API Reference

Built on the Accordion primitive. Only the props this library adds or changes are listed; everything else passes through.

The container. Single-open by default. Also accepts every prop of Accordion.Root.

variant= "default": "default" | "ghost"; default is an inset well of raised rows; ghost is borderless, with spacing between items and rows that fill on hover.
defaultValue: any[]; Values of the items open on first render.
value: any[]; Controlled open items.
onValueChange: (value: any[]) => void; Called when items open or close.
multiple= false: boolean; Allow more than one open item.
disabled= false: boolean; Disable every item.

Prop	Type	Default	Description
variant	"default" \| "ghost"	"default"	`default` is an inset well of raised rows; `ghost` is borderless, with spacing between items and rows that fill on hover.
defaultValue	any[]	—	Values of the items open on first render.
value	any[]	—	Controlled open items.
onValueChange	(value: any[]) => void	—	Called when items open or close.
multiple	boolean	false	Allow more than one open item.
disabled	boolean	false	Disable every item.

AccordionItem

Also accepts every prop of Accordion.Item.

value: any; Identifies the item in value / defaultValue.
disabled= false: boolean; Disable this item.

Prop	Type	Default	Description
value	any	—	Identifies the item in `value` / `defaultValue`.
disabled	boolean	false	Disable this item.

data-open: Present while the item is open (raised card in default, soft fill in ghost).

Data attribute	Description
data-open	Present while the item is open (raised card in `default`, soft fill in `ghost`).

AccordionTrigger

Also accepts every prop of Accordion.Trigger.

icon: ReactNode; Leading icon. In default it sits in a round chip that turns primary when open; in ghost it is bare at 16px and muted until open. The panel text lines up with the label.

Prop	Type	Default	Description
icon	ReactNode	—	Leading icon. In `default` it sits in a round chip that turns primary when open; in `ghost` it is bare at 16px and muted until open. The panel text lines up with the label.

AccordionPanel

Also accepts every prop of Accordion.Panel.

keepMounted= false: boolean; Keep the content in the DOM while closed.
typeset= false: boolean | "docs" | "reading" | "chat"; Turn prose styles back on for the panel content inside a typeset container, or name a preset when it stands alone. The content then keeps the surrounding text size and colour.

Prop	Type	Default	Description
keepMounted	boolean	false	Keep the content in the DOM while closed.
typeset	boolean \| "docs" \| "reading" \| "chat"	false	Turn prose styles back on for the panel content inside a `typeset` container, or name a preset when it stands alone. The content then keeps the surrounding text size and colour.

When am I charged?

Who can see my data?

How do I reach support?