# Accordion

> Sections that open in place: the height eases open, the content rises out of a blur a beat later, and opening one folds the other at the same time.

Accordions often animate a max-height guess, so they lag on close and snap at the end. Here each section opens by grid rows (0fr to 1fr, no guessing), its content rises out of a blur a beat later, and the chevron turns in the same motion. In single mode, opening one folds the other at the same time so the page below barely moves.

## Install

```bash
npx shadcn@latest add https://hairlineui.com/r/accordion.json
```

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

- npm: none
- Hairline UI components it needs (the CLI installs them too): `ui-interaction-motion`
- Docs and live preview: https://hairlineui.com/ui/accordion
- Registry item (source): https://hairlineui.com/r/accordion.json

## Usage

```tsx
import { Accordion } from "@/components/ui/accordion";

<Accordion items={[
  { value: "shipping", title: "Shipping", content: "Ships in 2 days." },
  { value: "returns", title: "Returns", content: "30 days, free." },
]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `AccordionItem[]` | – | value, title, subtitle, content, disabled. |
| `type` | `"single" \| "multiple"` | `"single"` | How many can be open. |
| `value / defaultValue` | `string[]` | – | Open sections. |
| `onValueChange` | `(value: string[]) => void` | – | Called on change. |
| `variant` | `"rows" \| "cards"` | `"rows"` | Hairline rows or cards. |

## States

- **open**: Height eases (420ms), content rises from a blur (300ms, 90ms later), chevron turns.
- **close**: Content fades fast (160ms) while the height folds.

## What it handles

max-height tricks make closing feel slow and opening stop with a jolt; measured rows don't.

- **Real height**: grid-template-rows 0fr → 1fr, eased 420ms.
- **Content through a blur**: Rises 6px out of a 4px blur, 90ms after the height starts.
- **Single or multiple**: Folding the old one while the new one opens.
- **Keyboard**: ↑/↓ between headers, Home/End.

## Replaces

Radix Accordion, disclosure wiring, height animation

## Where it fits

- **Settings**: Advanced options folded under each group.
- **Filters**: Collapsible filter groups in a sidebar.
- **Order and invoice details**: Line items you can open.
- **Help**: Questions inside an app.

## Notes

- Headers are buttons in h3s with aria-expanded and aria-controls; panels are regions.
- Folded content is inert.
- Reduced motion: sections open in place.

License: MIT (https://hairlineui.com/license#components)