Installation
Getting started with KokonutUI
1. Add namespaces with components.json
The components.json file holds configuration for your project, and allow easy installation of any components.
Note: The `components.json` file is optional
It is only required if you're using the CLI to add components to your project. If you're using the copy and paste method, you don't need this file.
You can create a components.json file in your project by running the following command:
bunx --bun shadcn@latest init
npx shadcn@latest init
pnpm dlx shadcn@latest init
Then, you'll need to add this to your components.json
to allow kokonutUI registry.
{
"registries": {
"@kokonutui": "https://kokonutui.com/r/{name}.json"
}
}
2. 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 --bun 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.com/r/utils.json
3. 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 particle-button
component to your project, it will be easy as:
bunx --bun shadcn@latest add @kokonutui/particle-button
npx shadcn@latest add @kokonutui/particle-button
pnpm dlx shadcn@latest add @kokonutui/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 />;
}
4. 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.
5. Monorepo
For monorepo shadcn/ui
CLI contain the options -c
to the path to your workspace for exemple:
bunx --bun shadcn@latest add @kokonutui/particle-button -c ./apps/www
npx shadcn@latest add @kokonutui/particle-button -c ./apps/www
pnpm dlx shadcn@latest add @kokonutui/particle-button -c ./apps/www