Motion FAQs Accordion

March 8, 2026

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

Installation

File Structure

motion-faqs-accordion.tsx

Usage

import { MotionAccordion } from "@/components/unlumen-ui/motion-faqs-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

Prop	Type	Default	Description
`items`	`MotionAccordionItem[]`	-	Array of FAQ items to render.
`gap?`	`number`	`10`	Gap between accordion items in pixels.
`className?`	`string`	-	Extra class names applied to the wrapper.

MotionAccordionItem

Prop	Type	Default	Description
`question`	`ReactNode`	-	The FAQ question shown in the header row.
`answer`	`ReactNode`	-	The answer text revealed when the item is open.

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.

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.