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.

Badge

Inline label with a looping shimmer wave and spring entrance. Theme-aware by default, fully customizable with color overrides.

Open in

Mark the beat — a New tag for launches, Beta when you're still tuning, Live once it's out the door.

Installation

npx shadcn@latest add @iconiq/badge

Props

Badge

5 props

Default export for a compact label pill with a permanent shimmer pass layered behind the content.

childrenReactNode

Required

Badge content rendered in the foreground layer so it always stays above the animated shimmer.

classNamestring

Default""

Appended directly to the root span. Useful for size, radius, spacing, or border overrides.

bgColorstring

Inline backgroundColor override. If omitted, the component uses a dark neutral surface in light mode and a white surface in dark mode.

textColorstring

Inline text color override. If omitted, the badge picks the inverse of its default background palette.

waveColorstring

Color used for the middle stop of the animated gradient sweep. Defaults to the local CSS variable declared on the shimmer layer.

Notes

The public API does not spread other span props, so data attributes or click handlers require a local wrapper or a component fork.

Color overrides are applied through inline styles, which means they take priority over the default Tailwind utility classes.