Install shadcncraft Using the shadcn CLI

Learn how to install our Pro React shadcn/ui Kit components and blocks into your projects using the shadcn CLI 3.0.

We support the new shadcn namespaced registries and authentication via the shadcn CLI, enabling seamless integration with the Shadcn MCP server.

Getting Started

1. Ensure your project has shadcn/ui installed

Your project must include shadcn/ui and a valid components.json file.

pnpmyarnnpmbun
$ pnpm dlx shadcn@latest init

For framework specific installation, read the official shadcn installation guide.

2. Get your License Key

Copy your Pro React shadcn/ui Kit License Key.

• If you purchased the Pro React shadcn/ui Kit, your key was generated automatically after checkout.
• You can also find it in the email sent after purchase or in your Polar portal.

3. Configure your Environment

Create a .env or .env.local file in the root of your project and add your license key:

SHADCNCRAFT_LICENSE_KEY="your_license_key"

4. Update components.json

Add our namespaced registry configuration to your components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@shadcncraft": {
      "url": "https://shadcncraft.com/r/{name}",
      "headers": {
        "X-License-Key": "${SHADCNCRAFT_LICENSE_KEY}"
      }
    }
  }
}

That's it. You can now use the shadcn CLI to install our Pro React shadcn/ui Kit components and blocks.

5. Team License: Configure Instance Name (Required)

If you purchased the Pro React & Figma shadcn/ui Kit – Team License, each team member must configure their own unique instance name to properly track activations.

Every team member must use a different identifier. We recommend using the email address that identifies each team member, but any unique string works as long as each person uses a different one. Make sure you remember your identifier and use the same one consistently.

1. Each team member adds their unique instance name to .env or .env.local:

SHADCNCRAFT_LICENSE_KEY="your_team_license_key"
SHADCNCRAFT_INSTANCE_NAME="your_name@company.com"

2. Update the components.json headers to include the instance name:

"registries": {
  "@shadcncraft": {
    "url": "https://shadcncraft.com/r/{name}",
    "headers": {
      "X-License-Key": "${SHADCNCRAFT_LICENSE_KEY}",
      "X-Instance-Name": "${SHADCNCRAFT_INSTANCE_NAME}"
    }
  }
}

Important: Using a team license without a unique instance name per team member might work initially, but will consume an additional seat for that unidentified activation. This can cause activation limit errors in the future. See Activation limit reached for more details.

That's it! You can now use the shadcn CLI to install our Pro React shadcn/ui Kit components and blocks.

Installation

Install a component or block:

pnpmyarnnpmbun
$ pnpm dlx shadcn@latest add @shadcncraft/mobile-navigation-menu

pnpmyarnnpmbun
$ pnpm dlx shadcn@latest add @shadcncraft/header-1

Install multiple items

pnpmyarnnpmbun
$ pnpm dlx shadcn@latest add @shadcncraft/top-navigation-1 @shadcncraft/placeholder-logo @shadcncraft/footer-2

Bonus: shadcn CLI Commands

The shadcn CLI can list, view, or search items in our private registry. No extra configuration is required.

List all items

pnpmyarnnpmbun
$ pnpm dlx shadcn@latest list @shadcncraft

View an item

pnpmyarnnpmbun
$ pnpm dlx shadcn@latest view @shadcncraft/top-navigation-1

Search items

pnpmyarnnpmbun
$ pnpm dlx shadcn@latest search @shadcncraft -q "navigation"

pnpmyarnnpmbun
$ pnpm dlx shadcn@latest search @shadcncraft --query "blog"

Bonus: shadcn MCP Server

Our private registry supports the shadcn MCP Server out of the box. With the MCP Server, you can browse components, search, and install items directly into your project using natural language.

Install the shadcn MCP Server and configure it for your preferred client.

Cursor

pnpmyarnnpmbun
$ pnpm dlx shadcn@latest mcp init --client cursor

Claude Code

pnpmyarnnpmbun
$ pnpm dlx shadcn@latest mcp init --client claude

VS Code

pnpmyarnnpmbun
$ pnpm dlx shadcn@latest mcp init --client vscode

Codex

Codex requires manual configuration. See the official docs.

Support

Still having trouble? See troubleshooting, or reach out to us.