Iconiq UI

Install Iconiq UI components into your project from VS Code — browse the catalog, pick Base UI or Radix UI where available, and add files with the shadcn CLI.

Before you start

You need a shadcn-ready React or Next.js project with components.json.

Add the Iconiq registry (or use Iconiq: Set Up Project from the sidebar):

{
  "registries": {
    "@iconiq": "https://iconiqui.com/r/{name}.json"
  }
}

Install a component

1. Open your project in VS Code.
2. Click the Iconiq UI icon in the activity bar.
3. Browse components by category, or run Iconiq: Add Component from the command palette (Cmd/Ctrl + Shift + P).
4. Click a component to install.
5. If both Base UI and Radix UI versions exist, choose the one you want.
6. Confirm the install — a terminal runs shadcn add @iconiq/<name> and adds the source to your project.

Then import the component in your app:

import { StatusDot } from "@/components/ui/status-dot";

Sidebar actions

Learn more

• Installation guide
• MCP setup — install components with AI in VS Code

Built by Edwin Vakayil for Iconiq UI.