Components

Accordion

Expandable sections separated by hairlines. The chevron turns and the content animates its height (instant under reduced motion).

Usage

Use it for:

  • FAQs and help.
  • Long settings or details grouped into sections people open one at a time.

Avoid it when:

  • People need to compare sections side by side: show them all.
  • Switching between views of the same thing: use Tabs.
  • A single show/hide: use a disclosure toggle.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Examples

FAQ (single, collapsible)

No. The standard plan has no monthly fee and no minimum balance.

Multiple, controlled

Redesign the checkout and the account settings.

API Reference

Accordion.Root

Radix Accordion.Root; all of its props are supported.

PropTypeDefault
type
"single""multiple"
value
string | string[]
defaultValue
string | string[]
onValueChange
(value: string | string[]) => void
disabled
boolean
false
className
string

Accordion.Item

Radix Accordion.Item, with a bottom hairline.

PropTypeDefault
value
string
disabled
boolean
false
className
string

Accordion.Trigger

The toggle button, inside a heading.

PropTypeDefault
level
23456
3
className
string

Accordion.Content

The panel (role="region", labelled by its trigger). Animates its height with .motion-collapse.

PropTypeDefault
className
string

Accessibility

Keyboard:

  • Tab: moves to the next trigger (and into open content).
  • Enter / Space: toggles the focused section.
  • ↓ / ↑: next / previous trigger; Home / End: first / last trigger. Disabled triggers are skipped.

ARIA and semantics:

  • WAI-ARIA accordion pattern (Radix): each trigger is a button inside a heading, with aria-expanded and aria-controls.
  • Content is a region labelled by its trigger.
  • Height animation and chevron rotation are off under reduced motion.
© 2026 Motion. Internal documentation.