Docs
Components
Accordion

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Docs

Preview

Code

Yes. It adheres to the WAI-ARIA design pattern.

Installation

CLI

Manual

npx shadcn-ui@latest add @kanpeki/accordion

Anatomy

Single import

Multiple imports

import { Accordion } from "~/components/ui/accordion";

<Accordion.Root defaultExpandedKeys={["item-1"]}>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Content>
      Yes. It adheres to the WAI-ARIA design pattern.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>;

Animation

The accordion uses the --disclosure-panel-height CSS variable to animate the height of the content area.

Customization

If you need to customize the internal padding of the accordion content, you can use the *: Tailwind variant to target the content area directly.

<Accordion.Content className="*:pb-12">
  Customized padding for the content area.
</Accordion.Content>

API Reference

Accordion.Root

Prop	Type	Default
`allowsMultipleExpanded`	`boolean`
`defaultExpandedKeys`	`Iterable<Key>`
`expandedKeys`	`Iterable<Key>`
`onExpandedChange`	`function`
`isDisabled`	`boolean`

Accordion.Item

Prop	Type	Default
`id`	`Key`
`isDisabled`	`boolean`
`isExpanded`	`boolean`
`defaultExpanded`	`boolean`
`onExpandedChange`	`function`

Accordion.Trigger

Prop	Type	Default
`isDisabled`	`boolean`
`children`	`ReactNode`

Accordion.Content

Prop	Type	Default
`children`	`ReactNode`

February 2026 - Resizable Component Alert

On This Page

Installation
Anatomy
Animation
Customization
API Reference
Accordion.Root
Accordion.Item
Accordion.Trigger
Accordion.Content

Contribute