New components added weekly

Installation

How to use kokonutUI components in your project.

This is not a library, it's a collection of components that you can copy paste and customize to your preference.

1

Utility function

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

shadcn@latest addhttps://kokonut.dev/registry/utils.json
Loading...
2

Copy, paste and customize

That's it. now, you can copy, paste and customize kokonutUI components to your project using shadcn cli.

Loading...

The component will be added to the components folder and you can start customizing / using it.

Loading...
3

Optional configuration

Shadcn

In case the component you're adding depends on other shadcn components, you'll be asked to configure shadcn

Loading...

Hooks

Some components require specific React hooks for functionality. These hooks will be automatically added to your project when installing the component.

Additional packages (Framer Motion)

Additional dependencies are listed in the top-right corner of each component's documentation. Make sure to install any required packages before using the component.