Search

Search components and blocks

Sign in

Accordion

One connected card with divider lines between rows instead of shadcn's underlined list — opening a row expands it in place rather than pushing a gap through the group. Content height animates to a measured pixel value rather than Motion's built-in 'auto' interpolation, which is what makes the reveal feel exact instead of janky.

pnpm dlx shadcn@latest add @ditherui/accordion

Yes. It's built on Radix UI's accordion primitive, which handles focus and keyboard navigation out of the box.

Pass type="multiple" instead of type="single" and each item opens independently.

A ResizeObserver measures the content's real pixel height, and Motion springs to that exact number instead of interpolating to "auto".

Yes — pass disabled to an AccordionItem and it becomes inert and dimmed.

Install

$ pnpm dlx shadcn@latest add @ditherui/accordion

Props

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

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