Installation

1. Install utilities

Most of the components use cn utility function. Run the following command to install it. As you may notice, this use Tailwind CSS, please make sure to install it in your project.

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

2. That's it 🎉

We are using lucide-icons for most of the components that include icons. As well in some case some shadcn/ui components. Those will be automatically installed upon installation of a component.

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

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

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 Card05 from "@/components/kokonutui/card-05";
 
export default function Page() {
    return <Card05 />
}

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