Kokonut UI logoKokonut UI logoKokonut UIPro
Kokonut UI logoKokonut UI logoKokonut UIPro

Get Started

InstallationMCP Server

Templates

AgentaLumeSonaeAIFuturPostlyStartup

Blocks & Sections

LoginFeaturesFAQsFootersHeroesPricings

Components

CardsHeadlineBannersButtonsFormsInputsModalsToolbarsAnimated ListAction Search BarAction Toolbar

Others

Card RecordingTeam InvitationCalendar Schedule

Installation

Getting started with Kokonut UI - PRO.

Installation

Access to KokonutUI - PRO

All components require a paid account to access the code. For free components, visit kokonutui.com, the open-source version.

1. Configure namespace

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

Then, you'll need to add this to your components.json to allow kokonutUI registry.

{
    "registries": {
        "@kokonutui-pro": {
            "url": "https://kokonutui.pro/api/r/{name}",
            "headers": {
                "X-API-Key": "${KOKO_PRO_TOKEN}"
            }
        }
    }
}

Export your kokonutui-pro token.

2. Install utilities

All components use Tailwind CSS, 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 

3. Install lucide icons

We are using lucide-icons for most of the components that include icons.

4. That's it.

You can now copy paste any components, each component are standalone which mean you don't any additional dependencies

Simply copy and paste the components you'd like and add it to your project.

5. Optionnal dependencies

Some components require motion for advanced animation. They are under the Motion category.

On this page

Installation1. Configure namespace2. Install utilities3. Install lucide icons4. That's it.5. Optionnal dependencies