Name: 'Iconiq UI'
Author: 'IconiqUI'

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

Open your project in VS Code.
Click the Iconiq UI icon in the activity bar.
Browse components by category, or run Iconiq: Add Component from the command palette (Cmd/Ctrl + Shift + P).
Click a component to install.
If both Base UI and Radix UI versions exist, choose the one you want.
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";

Action	How
Refresh the catalog	Refresh icon in the Components panel title
Set up `components.json`	Setup icon in the Components panel title, or Iconiq: Set Up Project
Open docs for a component	Right-click a component → Open Documentation
See what is already installed	Components marked (installed) when Iconiq source is in your project