Installation

Add the registry

Kokonut UI Pro is a private shadcn/ui registry. The shadcn CLI reads its configuration from components.json; if your project doesn't have one yet, create it:

Then add the @kokonutui-pro namespace to it, so components install by name. The CLI sends your API key with each request:

{
  "registries": {
    "@kokonutui-pro": {
      "url": "https://kokonutui.pro/api/r/{name}",
      "headers": {
        "X-API-Key": "${KOKO_PRO_TOKEN}"
      }
    }
  }
}

Add your API key

The CLI fills in ${KOKO_PRO_TOKEN} from .env.local. Your key is shown here once you're signed in with Pro, and on your account page:

Add a component

Components are styled with Tailwind CSS v4, so make sure it's set up. Then name the component. The CLI writes it to components/kokonutui-pro/ and installs what it needs, such as the cn helper, lucide-react icons, shadcn/ui primitives and motion:

Then use it like any component in your project:

import SplitSignupLogin from "@/components/kokonutui-pro/split-signup-login";

export default function Page() {
  return <SplitSignupLogin />;
}

Each docs page shows its components' install commands. Prefer the CLI over copying the source: it brings every file and dependency a component needs.

Use an AI agent

Claude Code, Cursor, VS Code and Codex can find and install components for you through the shadcn MCP server. See Agents to connect your editor and add a rules file.

Monorepos

In a monorepo, pass the workspace the component belongs to with -c: