Skip to main content

​
Getting Started

Kokonut UI uses the shadcn CLI for component installation. This guide will walk you through setting up your project to use Kokonut UI components.
Before you begin, make sure you have a React project set up with Tailwind CSS v4. Kokonut UI requires Tailwind CSS to work properly.

​
Installation Steps

1
Initialize shadcn/ui
2
First, initialize shadcn/ui in your project. This creates a components.json configuration file:
3
npm
npx shadcn@latest init
pnpm
pnpm dlx shadcn@latest init
bun
bunx --bun shadcn@latest init
yarn
yarn dlx shadcn@latest init
4
The components.json file is optional if you’re using the copy-paste method. However, we strongly recommend using the CLI for easier installation and dependency management.
5
Add Kokonut UI Registry
6
Add the Kokonut UI registry to your components.json file:
7
{
  "registries": {
    "@kokonutui": "https://kokonutui.com/r/{name}.json"
  }
}
8
This tells the shadcn CLI where to fetch Kokonut UI components from.
9
Install Utilities
10
Many components use the cn utility function for merging Tailwind classes. Install it with:
11
npm
npx shadcn@latest add https://kokonutui.com/r/utils.json
pnpm
pnpm dlx shadcn@latest add https://kokonutui.com/r/utils.json
bun
bunx --bun shadcn@latest add https://kokonutui.com/r/utils.json
yarn
yarn dlx shadcn@latest add https://kokonutui.com/r/utils.json
12
This creates a lib/utils.ts file in your project with the cn helper function.
13
Install Your First Component
14
Now you’re ready to install components! Let’s add the particle-button component as an example:
15
npm
npx shadcn@latest add @kokonutui/particle-button
pnpm
pnpm dlx shadcn@latest add @kokonutui/particle-button
bun
bunx --bun shadcn@latest add @kokonutui/particle-button
yarn
yarn dlx shadcn@latest add @kokonutui/particle-button
16
The CLI will automatically:
17
  • Download the component source code
  • Install any required dependencies (like lucide-react or shadcn/ui components)
  • Place the component in your components/kokonutui/ directory
    • 18
    Use the Component
    19
    Import and use the component in your app:
    20
    import ParticleButton from "@/components/kokonutui/particle-button";

export default function Page() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <ParticleButton />
    </div>
  );
}

    ​
    That’s it! 🎉

    You’ve successfully set up Kokonut UI in your project. You can now browse the component library and install any component you need.
    We use lucide-react for most components that include icons, along with some shadcn/ui components. These dependencies will be automatically installed when using the CLI.

    ​
    Additional Configuration

    ​
    Optional Dependencies

    Some components require additional libraries for specific features (like animations or special effects). These dependencies are listed at the bottom of each component’s documentation page. Make sure to install them to ensure the component works properly.

    ​
    Monorepo Setup

    If you’re working in a monorepo, use the -c flag to specify the path to your workspace: 
    npx shadcn@latest add @kokonutui/particle-button -c ./apps/www

    ​
    Tailwind CSS v4 Setup

    All components are built with Tailwind CSS v4. Make sure you have it properly configured in your project. Follow the official Tailwind CSS v4 installation guide for your framework.

    ​
    Copy and Paste Alternative

    While we provide a convenient ‘copy’ button for viewing component code, we strongly recommend using the CLI for installation. The CLI ensures all necessary files and dependencies are included automatically.
    If you prefer not to use the CLI, you can copy component code directly from the documentation pages. However, you’ll need to:
    1. Manually install all dependencies
    2. Create the necessary file structure
    3. Copy any required utility functions or sub-components

    ​
    Troubleshooting

    ​
    Component not found

    Make sure you’ve added the Kokonut UI registry to your components.json file and that the registry URL is correct.

    ​
    Missing dependencies

    If you encounter missing dependency errors, check the component’s documentation page for a list of required packages and install them manually.

    ​
    Path alias issues

    Kokonut UI uses the @/* path alias. Ensure your tsconfig.json or jsconfig.json is configured correctly: 
    {
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

    ​
    What’s Next?

    Browse Components

    Explore the complete collection of 46+ components with live previews and code examples.

    Customization Guide

    Learn how to customize components to match your design system.

    Build docs developers (and LLMs) love

    Get started for freeTalk to us