Installation

1. Install utilities

All components use Tailwind CSS v4, so ensure it's installed in your project. Many components also use the cn utility function—install it with the following command:

bunx shadcn@latest add https://kokonutui.com/r/utils.json 

npx shadcn@latest add https://kokonutui.com/r/utils.json

pnpm dlx shadcn@latest add https://kokonutui/r/utils.json

2. That's it 🎉

We use lucide-icons for most components that include icons, along with some shadcn/ui components. These dependencies will be automatically installed when using the CLI.

For exemple to add card-05 to your project, it will be easy as:

bunx shadcn@latest add https://kokonutui.com/r/particle-button

npx shadcn@latest add https://kokonutui.com/r/particle-button

pnpm dlx shadcn@latest add https://kokonutui.com/r/particle-button

While we provide a convenient 'copy' button for the code, we strongly recommend using the CLI for installing components, as it ensures all necessary files are included.

Add to your page and it works!

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

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

3. Optionnal dependencies

Some components require additional libraries, listed at the bottom of each components. Make sure to install them to ensure the component works properly.

4. Monorepo

For monorepo shadcn/ui CLI contain the options -c to the path to your workspace for exemple:

bunx shadcn@latest add https://kokonutui.com/r/card-05.json -c ./apps/www

npx shadcn@latest add https://kokonutui.com/r/card-05.json -c ./apps/www

pnpm dlx shadcn@latest add https://kokonutui.com/r/card-05.json -c ./apps/www