iconiq.

Accordion

Single-open rows with spring height and staggered copy. Built with Framer Motion and your theme tokens.

Live preview

Install

v0

Ship the registry bundle to v0 and iterate on motion or layout with prompts.

Usage

Minimal example — see tile 05 for the full items contract and packages.

tsx
import { Accordion } from "@/components/ui/motion-accordion";

const items = [
  {
    id: "1",
    title: "What makes this accordion special?",
    content:
      "It uses spring-based physics animations powered by Framer Motion for natural transitions.",
  },
  {
    id: "2",
    title: "How does the animation work?",
    content:
      "The icon, panel height, and text stagger are driven by separate spring transitions.",
  },
];

export function Faq() {
  return <Accordion items={items} />;
}

Dependencies

Registry peers and how this component fits your app — same id, title, content shape as accordion data.

items prop (required)

Pass an array of objects with id (stable string key per row), title (visible question), and content (answer body as a string — the component splits on spaces for the stagger animation).

className (optional)

Forwarded to the root wrapper; use it to drop max-width, tweak spacing, or align with your layout grid.

framer-motion

Handles layout height springs, AnimatePresence for panel mount/unmount, opacity on list entrance, plus rotation and scale on the trigger icon.

lucide-react

Supplies the Plus icon. Replace the import with any Lucide icon or your own SVG if you prefer a different affordance.

Interaction model

Only one section stays open at a time (single-select). Clicking the active row closes it. Focus styles use ring tokens for keyboard users.

Accessibility

Each trigger is a native button with aria-expanded and aria-controls pointing at the animated panel id. Semantic structure works with screen readers and tab order.

shadcn registry

Peer dependencies are declared on the registry item so shadcn@latest add pulls framer-motion and lucide-react into your project when needed.

npx shadcn@latest add https://iconiqui.com/r/motion-accordion.json