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.

Breadcrumbs

Spring separators, hover lift, and a shimmer on the current segment. Built with Motion and tuned to the theme tokens that drive the rest of the library.

Open in

Installation

npx shadcn@latest add @iconiq/breadcrumbs

Props

BreadcrumbItem

3 props

Each breadcrumb segment is described by a small object consumed by the Breadcrumbs component.

labelstring

Required

Visible label and React key for the item. Labels should therefore be unique inside a single breadcrumb trail.

hrefstring

Link destination used by the rendered anchor. If it is omitted, the component falls back to '#'.

iconReactNode

Optional icon shown before the label, typically a Lucide icon or any other inline React node.

Breadcrumbs

2 props

Animated breadcrumb trail that maps over the items array and styles the last entry as the current location.

itemsBreadcrumbItem[]

Required

Ordered list of segments. Earlier items receive hover and tap motion, while the last item gets the shimmer and pulsing dot treatment.

classNamestring

Merged onto the root nav wrapper so you can place the trail inside your own header layout.

Notes

The last item still renders as a motion.a element, even if href is omitted. Its classes remove the interactive cursor but the fallback anchor target is still '#'.

Separators only render after the first item and use the built-in ChevronRight icon from lucide-react.