Motion Accordion

A clean Motion-powered FAQ accordion with spring-animated content reveal.

Installation

File Structure

motion-accordion.tsx

Usage

import { MotionAccordion } from "@/components/unlumen-ui/motion-accordion";

const items = [
  {
    question: "What is Unlumen UI?",
    answer:
      "A collection of premium components built with Motion and Tailwind CSS.",
  },
  {
    question: "Do I need to install a package?",
    answer:
      "No — every component is delivered as source code via the registry.",
  },
];

<MotionAccordion items={items} />;

API Reference

MotionAccordion

PropTypeDefault
items
MotionAccordionItem[]
-
gap?
number
10
className?
string
-

MotionAccordionItem

PropTypeDefault
question
string
-
answer
string
-

Notes

  • Item backgrounds use hsl(var(--foreground)) so they invert correctly across themes.
  • Only one item can be open at a time. Clicking an open item collapses it.
  • Content height is measured with ResizeObserver so the spring animation always targets the exact pixel height, even for dynamic content.
  • Motion handles the icon rotation, panel height, and subtle vertical easing so the interaction stays snappy without extra visual effects.