Iconiq is an open-source library of motion-powered React components built around the shadcn registry workflow.

How do I install an Iconiq component?

Install components with shadcn using commands like npx shadcn@latest add @iconiq/button, or use a direct registry URL from https://iconiqui.com/r/button.json.

Is Iconiq free to use?

Yes. Iconiq is open source and free to use for personal and commercial projects.

What technologies power Iconiq?

Iconiq components are written in TypeScript and React, with motion powered by Motion and registry delivery built around shadcn/ui conventions.

Accordion

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

Open in

Installation

npx shadcn@latest add @iconiq/accordion

Props

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.