Search

Search components and blocks

Sign in

Bouncy Accordion

New

Separate cards instead of one connected list, the round chevron flips with a bounce and squishes on press, while the height uses a softer spring so the answer glides open without jitter.

pnpm dlx shadcn@latest add @ditherui/bouncy-accordion

Every move uses a low-damping spring, so height, scale and the chevron overshoot their target and settle.

Yes. With prefers-reduced-motion the springs become instant and nothing scales or slides.

Pass type="multiple" and each card opens independently.

Install

$ pnpm dlx shadcn@latest add @ditherui/bouncy-accordion

Props

type"single" | "multiple"—
collapsiblebooleanfalse
valuestring | string[]—
defaultValuestring | string[]—
onValueChange(value: string | string[]) => void—
classNamestring—

When to use the accordion

Use an accordion to keep long content scannable: FAQs, settings groups, step details. Items expand with a spring, and this page includes a FAQ accordion and a bouncy variant.

  • Run the shadcn CLI with the DitherUI accordion name. It is built on Radix, so each item is keyboard accessible.

Suggested components