Search

Search components and blocks

Sign in

Accordion

Open page

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—

FAQ Accordion

ProOpen page

A dark, icon-led variant for support/FAQ sections — each row's icon pops up, tilts, and shifts to full color when its row opens, the trailing indicator morphs from a plus into a minus instead of rotating a chevron, and the open row's question bolds up while its answer blurs into focus and indents to sit under the question text rather than the icon.

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

Grab an API key from your dashboard and follow the quickstart — most teams are making their first call in under five minutes.

Yes. Fine-tune on your own data, or steer responses per-request with system prompts and temperature controls.

All traffic is encrypted in transit and at rest, and your data is never used to train shared models.

You'll get a heads-up at 80% usage. Requests queue briefly past the limit instead of failing outright.

Yes, start with a 14-day free trial with full access to all features. No credit card required, and you can upgrade or cancel anytime.

Props

Leading iconeach question ships its own icon; it pops up, tilts, and shifts to full foreground color when its row opens, and nudges on hover—
valuestring—
defaultValuestringlast question
onValueChange(value: string) => void—
Indicatora plus that morphs into a minus (two bars, the vertical one scales away) instead of a rotating chevron—
Active questionbolds to full foreground color while its answer is open—
Answer revealcontent blurs in from 6px alongside the height/opacity spring, instead of just fading—
Answer alignmentindented to line up under the question text, not the icon—
classNamestring—

Bouncy Accordion

NewOpen page

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