# Accordion

> Expandable sections with smooth height and a turning plus.

Component · Free · https://lodeui.com/components/accordion

## When to use

- FAQs and long settings pages where people scan headings first.

## When not to use

- Content everyone needs: show it.
- Switching views: use tabs.

## Installation

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

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Accordion } from "@/components/ui/accordion";

export function Faq() {
  return <Accordion items={[{ value: "refunds", title: "Can I get a refund?", content: "Yes, within 14 days." }]} />;
}
```

## API reference

### Accordion

Expandable sections.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `{ value; title; content }[]` | – | Sections. |
| type | `"single" \| "multiple"` | `"single"` | Whether opening one closes the others. |
| defaultValue | `string[]` | – | Open on first render. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Toggle the focused section |
| Tab | Move between headers |

## Accessibility

- Headers are buttons with aria-expanded controlling labelled regions.

## Motion

- Height animates to auto; the plus rotates into a cross.

## Responsive behavior

- Full width; titles wrap.

## Performance

- Closed panels are unmounted.

## Notes for AI

- Values must be unique.

## Related

- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.
- [Dialog](https://lodeui.com/components/dialog) — A modal or side sheet with focus trap, scroll lock and focus return.