iconiq

Accordion

Animated accordion with composable items, spring reveal, and theme-aware disclosure chrome. Designed for FAQs, settings, and structured help content.

Live Playground

Preview the component in a quiet layout with room to inspect motion, spacing, and state changes.

Install And Iterate

Install the component directly into your codebase, then branch into v0 if you want to iterate on variations.

Install

npx shadcn@latest add @iconiq/accordion

Build with v0

Send the registry bundle into v0 when you want to explore new colorways, copy, or layout directions quickly.

Usage

Use the default item array pattern below, then expand into item structure, content expectations, and layout behavior in the API panel.

import { Accordion } from "@/components/ui/accordion"; const items = [  {    id: "1",    title: "What makes this accordion special?",    content:      "It uses spring-based physics animations powered by 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} />;}

API Details

Each item below covers the documented props and the behavior that matters during implementation.

AccordionItem

3 props

Each row is described by a simple object and rendered as a single-expand accordion item.
idstring
Required
Stable key used for React rendering, internal open-state comparison, and the generated aria-controls id.
titlestring
Required
Text shown in the trigger row.
contentstring
Required
Body copy shown inside the open panel with a horizontal masked wipe and a soft lift into place.

Accordion

2 props

Stateful accordion component with one internal openId value and no controlled API.
itemsAccordionItem[]
Required
Rows to render in order.
classNamestring
Merged onto the max-w-2xl root wrapper so you can stretch or reposition the accordion in your layout.

Notes

Clicking an already open row closes it again because toggle compares against the current openId.
There is no prop for default open, controlled open, or multiple-open behavior in this implementation.