| name | iconiq |
| description | Install and integrate Iconiq UI (@iconiq) shadcn registry components into React or Next.js projects. Use when adding Iconiq components, configuring components.json, running shadcn add, or building UI with iconiqui.com components. |
Iconiq UI
iconiqui.com — editable shadcn/ui components with subtle motion. Install with npx shadcn@latest add @iconiq/<name>.
When to use
- User asks to add, install, or use an Iconiq component
- Project needs the
@iconiq registry in components.json
- Choosing between Base UI and Radix UI variants
- Wiring installed components into pages or features
- Troubleshooting shadcn or MCP installs for Iconiq
Prerequisites
- React or Next.js app with shadcn initialized (
components.json present).
- Iconiq registry in
components.json:
{
"registries": {
"@iconiq": "https://iconiqui.com/r/{name}.json"
}
}
- shadcn MCP enabled (this plugin ships
mcp.json with the shadcn server) or use the CLI directly.
If setup is incomplete, run the setup-project command flow or npx shadcn@latest init, then add the registry.
Install a component
npx shadcn@latest add @iconiq/b-button
npx shadcn@latest add @iconiq/accordion
With MCP connected, prompt examples:
- Add the
@iconiq/b-button component to this page.
- Install
@iconiq/accordion and keep the generated files editable.
- Show available components in the iconiq registry.
Direct registry URL (alternative):
npx shadcn@latest add https://iconiqui.com/r/b-button.json
Base UI vs Radix UI
| Variant | Prefix | Example | Notes |
|---|
| Base UI | b- | @iconiq/b-button | Built on Base UI primitives |
| Radix UI | r- | @iconiq/r-accordion | Built on Radix primitives |
| Single variant | none | @iconiq/status-dot | Only one implementation exists |
When both exist, ask which variant the user prefers or match the stack already used in the project.
After install
- Import from the path shadcn generated (usually
@/components/ui/<slug>).
- Read the component docs at
https://iconiqui.com/<section>/<slug> for props and examples.
- Customize the local source file — do not treat Iconiq as an opaque npm package.
- If
@iconiq/iconiq-theme was installed, keep it for token-driven styling.
Discover components
Troubleshooting
| Issue | Fix |
|---|
Unknown registry @iconiq | Add registry URL to components.json |
components.json missing | Run npx shadcn@latest init |
| MCP not listing components | Enable shadcn MCP in Cursor settings; restart if needed |
| Wrong variant installed | Remove generated files and reinstall the b- or r- slug |
References
