# Motion Accordion

Setup checklist with per-step status.

- id: `motion-accordion`
- Page: https://agentic-ui-kit.com/components/motion-accordion
- Live preview: https://agentic-ui-kit.com/live/component/motion-accordion

## Install

```bash
agentic-ui add motion-accordion
npx shadcn@4.17.0 add @agentic-ui/motion-accordion
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** expand-collapse-transition, single-or-multiple-open, personality-tuning, reduced-motion-fallback, keyboard-navigation, informative-state-preservation
- **Intents:** explore-detail, configure, execute-flow
- **Suits domains:** saas, settings, knowledge, billing, project-management
- **Interaction:** click, keyboard-navigation, expand-collapse
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Setup checklist with per-step status, Frequently asked questions on a help or pricing page, Groups of advanced settings folded inside a configuration form, Invoice line breakdown by category
- **Avoid when:** Content the user needs to compare side by side at the same time, Navigation between sibling views, where tabs fit better
- **Preserve when adapting:** grid-rows-height-transition, aria-accordion-keyboard-model, accessible-informative-states, personality-tokens
- **Replace when adapting:** item-titles, item-status-copy, panel-content
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8.5/10, responsive 9/10, accessibility 9.5/10, code 9/10
- **Uses primitives:** accordion, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion