Installation

Add any Iconiq icon or component with the shadcn CLI. Use your package runner (npx, pnpm dlx, yarn dlx, or bunx --bun) with shadcn@latest add @iconiq/<name>.

How it works

  1. 1. Run the shadcn command

    Use npx, pnpm dlx, yarn dlx, or bunx --bun with shadcn@latest add @iconiq/<name> — e.g. @iconiq/bell for an icon or @iconiq/badge for a component.

  2. 2. Component lands in your project

    The CLI writes the .tsx file directly into your components folder. No package to install, no lock-in — it's just your code.

  3. 3. Framer Motion auto-installed

    If framer-motion isn't in your project yet, the CLI adds it as a dependency automatically along with any other peer deps.

Install an icon

Replace the icon name with any of the 385+ available icons.

Install a component

All motion UI components follow the same install pattern — replace the slug with any component below.

npx shadcn@latest add @iconiq/<slug>
View all 16 components

Full URL fallback

If the short name doesn't resolve in your environment, use the direct registry URL instead.

Requirements

  • React 18+
  • shadcn/ui init
  • framer-motion (auto)
  • Node.js 18+