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/b-button, or use a direct registry URL from https://iconiqui.com/r/b-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.

Icon Bar

A row of compact icon chips that spring open on hover to reveal their labels. Each item keeps a fixed icon footprint while the pill width animates outward with Motion.

Installation

npx shadcn@latest add @iconiq/icon-bar

Props

IconBar

5 props

Horizontal toolbar of compact icon chips. Hover or focus previews labels; clicking selects one item and keeps it expanded.

valuestring | null

Controlled selected item value. Pair with onValueChange for fully controlled selection.

defaultValuestring | null

Optional initial selected item when uncontrolled. Omit to start with every chip collapsed until the user clicks one.

onValueChange(value: string | null) => void

Called when selection changes. Receives null when the active chip is clicked again to deselect.

classNamestring

Optional class names applied to the outer flex container.

childrenReact.ReactNode

One or more IconBarItem elements rendered in a single row with consistent spacing.

IconBarItem

6 props

Individual pill chip with a Lucide icon and animated label reveal on hover, focus, or selection.

iconLucideIcon

Required

Lucide icon component rendered inside the fixed 36px icon well.

labelstring

Required

Short text revealed when the chip expands. Keep labels concise so the width animation stays smooth.

valuestring

Selection identity for this chip. Defaults to label when omitted.

onClick(event: React.MouseEvent<HTMLButtonElement>) => void

Optional click handler fired after selection updates.

disabledboolean

Defaultfalse

Disables interaction, hover preview, and selection.

classNamestring

Optional class names merged onto the chip button.

Notes

Only one item stays expanded at a time. Clicking a chip selects it; clicking another moves selection; clicking the active chip again collapses it.

Hover and keyboard focus preview labels on non-selected chips. Give each item a unique value when labels repeat.

In controlled mode, update value from onValueChange (including null on deselect) for the UI to stay in sync.