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.

Tooltip

Contextual label with soft motion and a compact callout surface. Ideal for icon-only controls, dense toolbars, and short hints.

Open in

Win the
, then
— that’s the half in two beats.

Hover the calls or

Installation

npx shadcn@latest add @iconiq/tooltip

Props

Tooltip

5 props

Animated tooltip with a canonical Tooltip export. It owns its own open state and toggles in response to hover and focus events.

childrenReactNode

Required

Trigger content wrapped in a relative inline-flex container.

contentReactNode

Required

Tooltip body rendered inside the animated bubble.

side"top" | "bottom" | "left" | "right"

Defaulttop

Controls which positioning class and directional motion offset are used.

delaynumber

Default0.15

Open delay in seconds. The implementation multiplies it by 1000 before scheduling the timer.

classNamestring

Merged onto the tooltip bubble for local surface styling overrides.

Notes

The trigger wrapper handles onMouseEnter, onMouseLeave, onFocus, and onBlur. No trigger props are forwarded directly to the child node.

The timeout used for delayed open is cleared on leave and again on unmount.