Docs·Motion Accordion

Motion Accordion

Rounded FAQ accordion with spring height, scale, and plus-to-minus transitions.

Installation

$pnpm dlx shadcn@latest add @spiderui/motion-accordion

Usage

API Reference

PropTypeDefault
itemsQuestion and answer content for every FAQ row.
MotionAccordionItem[]—
gapPixel gap between accordion cards.
number10
classNameAdditional classes for the accordion wrapper.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
Yes. Copy the component into your project, customize it, and ship it in personal or commercial work.
Yes. Every answer is measured with ResizeObserver, so the spring animation follows content changes without fixed heights.
Yes. Motion transitions become immediate when the visitor prefers reduced motion.
import { MotionAccordion } from "@/components/ui/motion-accordion"
const items = [
  {
    question: "Can I use this commercially?",
    answer: "Yes. Customize it and ship it in any project.",
  },
  {
    question: "Does it support dynamic answers?",
    answer: "Yes. Content height is measured automatically.",
  },
]

export function Demo() {
  return <MotionAccordion items={items} gap={10} />
}