Installation

Install KokonutUI components in any React or Next.js project with the shadcn CLI, using namespaces or direct registry URLs. No extra setup required.

Or by handFollow the stepsTwo commands and one line in components.json.

Add the registry

Kokonut UI is a 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 namespace to it, so components install by name:

components.json

{
  "registries": {
    "@kokonutui": "https://kokonutui.com/r/{name}.json"
  }
}

Copying code instead?

components.json is only needed for the CLI. If you copy a component's source by hand, you can skip it, but you'll have to install its dependencies yourself.

Install the utilities

Components are styled with Tailwind CSS v4, so make sure it's set up. Most of them also use the cn helper:

Add a component

Name the component. The CLI writes it to components/kokonutui/ and installs what it needs, such as lucide-react icons, shadcn/ui primitives and motion:

Then use it like any component in your project:

app/page.tsx

import ParticleButton from "@/components/kokonutui/particle-button";

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

Each component page lists the packages it installs above its demo. Prefer the CLI over copying the source: it brings every file and dependency the 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: