Accordion

Installation

pnpm dlx shadcn@latest add @saturation-ui/accordion

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Multiple

Accordion with multiple items open at once.

Disabled

Accordion with a disabled item.

Bordered

Accordion wrapped in a border.

Card

Accordion inside a Card.

Split

Card-style split accordion.

API Reference

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	`"single"`	Whether one or multiple items can be opened.
`collapsible`	`boolean`	`false`	When type is single, allows closing content.
`defaultValue`	`string \| string[]`	—	The default expanded item(s).
`value`	`string \| string[]`	—	The controlled expanded item(s).
`onValueChange`	`(value: string \| string[]) => void`	—	Event handler for state changes.

AccordionItem

Prop	Type	Default	Description
`value`*	`string`	—	A unique value for the item.
`disabled`	`boolean`	`false`	Disables interaction with this item.

AccordionTrigger

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	The trigger button content.
`asChild`	`boolean`	`false`	Render as child element.

AccordionContent

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	The content to reveal.
`forceMount`	`boolean`	—	Force mount for animation control.

Accessibility

Built on Radix UI, which adheres to the WAI-ARIA Pattern.

Keyboard Interactions

Key	Description
`Space`	Toggles the collapsed state.
`Enter`	Toggles the collapsed state.
`ArrowDown`	Moves focus to the next trigger.
`ArrowUp`	Moves focus to the previous trigger.
`Home`	Moves focus to the first trigger.
`End`	Moves focus to the last trigger.

Installation

pnpm dlx shadcn@latest add @saturation-ui/accordion

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Multiple

Accordion with multiple items open at once.

Disabled

Accordion with a disabled item.

Bordered

Accordion wrapped in a border.

Card

Subscription & Billing

Common questions about your account, plans, payments and cancellations.

Accordion inside a Card.

Split

Card-style split accordion.

API Reference

Accordion

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	`"single"`	Whether one or multiple items can be opened.
`collapsible`	`boolean`	`false`	When type is single, allows closing content.
`defaultValue`	`string \| string[]`	—	The default expanded item(s).
`value`	`string \| string[]`	—	The controlled expanded item(s).
`onValueChange`	`(value: string \| string[]) => void`	—	Event handler for state changes.

AccordionItem

Prop	Type	Default	Description
`value`*	`string`	—	A unique value for the item.
`disabled`	`boolean`	`false`	Disables interaction with this item.

AccordionTrigger

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	The trigger button content.
`asChild`	`boolean`	`false`	Render as child element.

AccordionContent

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	The content to reveal.
`forceMount`	`boolean`	—	Force mount for animation control.

Accessibility

Built on Radix UI, which adheres to the WAI-ARIA Pattern.

Keyboard Interactions

Key	Description
`Space`	Toggles the collapsed state.
`Enter`	Toggles the collapsed state.
`ArrowDown`	Moves focus to the next trigger.
`ArrowUp`	Moves focus to the previous trigger.
`Home`	Moves focus to the first trigger.
`End`	Moves focus to the last trigger.

Accordion

Installation

Usage

Examples

Multiple

Disabled

Bordered

Card

Split

API Reference

Accordion

AccordionItem

AccordionTrigger

AccordionContent

Accessibility

Keyboard Interactions

Accordion

Is it accessible?

Is it styled?

Is it animated?

Installation

Usage

Examples

Multiple

Budget Overview

Expense Management

Financial Reports

Disabled

Available Section

Disabled Section

Another Available Section

Bordered

Shipping Options

Return Policy

Customer Support

Card

What plans do you offer?

When am I billed?

How do I cancel?

Split

What features are included?

How is my data secured?

Can I migrate from another platform?

What support options are available?

API Reference

Accordion

AccordionItem

AccordionTrigger

AccordionContent

Accessibility

Keyboard Interactions

Is it accessible?

Is it styled?

Is it animated?

Budget Overview

Expense Management

Financial Reports

Available Section

Disabled Section

Another Available Section

Shipping Options

Return Policy

Customer Support

What plans do you offer?

When am I billed?

How do I cancel?

What features are included?

How is my data secured?

Can I migrate from another platform?

What support options are available?