Install Components with shadcn CLI

Initialization

npx shadcn@latest init

Answer the prompts to match the Kick UI setup:

Which style would you like to use? New York
Which color would you like to use as base color? Neutral
Do you want to use CSS variables for colors? yes

Installing Kick UI with the shadcn CLI

Install by URL from any component page — swap in any slug from the catalog:

npx shadcn@latest add https://www.kickui.xyz/r/pill-button.json

The pattern is .../r/[component].json — for example, mag-dock.json installs as @kick-ui/mag-dock. Browse every slug in the component catalog.

{
  "registries": {
    "@kick-ui": "https://www.kickui.xyz/r/{name}.json"
  }
}

npx shadcn@latest add @kick-ui/pill-button

Useful flags

-y skips confirmation, -o overwrites existing files, and -c targets a workspace — handy in monorepos.

npx shadcn@latest add @kick-ui/pill-button -y

npx shadcn@latest add @kick-ui/pill-button -o

npx shadcn@latest add @kick-ui/pill-button -c ./apps/web

Search and discovery

Browse the registry without installing anything:

npx shadcn@latest view @kick-ui

npx shadcn@latest search @kick-ui -q "card"

npx shadcn@latest list @kick-ui

MCP server

The shadcn MCP server lets AI assistants interact with registry items directly. You can browse available components, search for specific ones, and install them into your project using natural language.

For example: “Build a landing page using components from the Kick UI registry” or “Find me a carousel from the Kick UI registry”.

Add the Kick UI registry to your project's components.json file as shown above, then add the MCP server:

{
  "registries": {
    "@kick-ui": "https://www.kickui.xyz/r/{name}.json"
  }
}

npx shadcn@latest mcp init

For example: “Add @kick-ui/pill-button to my project.” For the full command reference, see the shadcn CLI docs.