Kokonut UI Documentation

The recommended way to install components is using the shadcn CLI, which ensures all necessary files and dependencies (like lucide-icons or shadcn/ui components) are included automatically.

To add a component, use the @kokonutui/ namespace followed by the component name. For example, to add the particle-button:

• Bun: bunx --bun shadcn@latest add @kokonutui/particle-button
• npx: npx shadcn@latest add @kokonutui/particle-button
• pnpm: pnpm dlx shadcn@latest add @kokonutui/particle-button

Once installed, import and use the component in your React or Next.js project:

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

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

If you are working within a monorepo, use the -c flag with the shadcn CLI to specify the path to your workspace directory.

Example for adding particle-button to the ./apps/www directory:

• Bun: bunx --bun shadcn@latest add @kokonutui/particle-button -c ./apps/www
• npx: npx shadcn@latest add @kokonutui/particle-button -c ./apps/www
• pnpm: pnpm dlx shadcn@latest add @kokonutui/particle-button -c ./apps/www

KokonutUI components require Tailwind CSS v4. Additionally, most components rely on a cn utility function. You can install this utility via the CLI using the following commands:

• Bun: bunx --bun shadcn@latest add https://kokonutui.com/r/utils.json
• npx: npx shadcn@latest add https://kokonutui.com/r/utils.json
• pnpm: pnpm dlx shadcn@latest add https://kokonutui.com/r/utils.json

To use the shadcn CLI to install KokonutUI components, you must first initialize a components.json file in your project. This file acts as the configuration for component installation.

Note: The components.json file is optional if you prefer the manual copy-and-paste method. It is only required for CLI usage.

1. Run the initialization command for your preferred package manager:

   • Bun: bunx --bun shadcn@latest init
   • npx: npx shadcn@latest init
   • pnpm: pnpm dlx shadcn@latest init

2. Update your components.json to include the KokonutUI registry:

{
    "registries": {
        "@kokonutui": "https://kokonutui.com/r/{name}.json"
    }
}

The MorphicNavbar is a navigation bar component where the active link morphs into a rounded pill using smooth CSS transitions. It is built using React, Next.js Link, and Tailwind CSS. To use it, import the component from its local path and render it within your application.

import MorphicNavbar from "@/components/kokonutui/morphic-navbar";

// Usage in a component
<MorphicNavbar />

The SlideTextButton is an animated link button that performs a vertical text slide transition when hovered. It is built using React, Motion, and Tailwind CSS. It supports default and ghost variants and allows you to specify the text that appears during the hover state via the hoverText prop.

import SlideTextButton from "@/components/kokonutui/slide-text-button";

<SlideTextButton hoverText="Click to see more" />

The V0Button component is a specialized button designed to send a component registry JSON to v0.dev, enabling instant editing of the component in the v0 environment. It is built using React, the shadcn Button component, and Tailwind CSS.

To use it, import V0Button from its component path and provide a size prop.

import V0Button from "@/components/kokonutui/v0-button";

// Example usage with an extra large size
<V0Button size="xl" />

The SwooshText component creates a hover text effect featuring layered colorful shadows that snap flat when the user mouses over the text. It is built using React, Tailwind CSS, and Motion for animations.

To use it, import the component and provide the text prop for the content and a className prop to control the text size and styling via Tailwind CSS.

import SwooshText from "@/components/kokonutui/swoosh-text";

<SwooshText text="Hover" className="text-6xl" />

DynamicText is an animated text switcher component that cycles through a list of greetings or strings in multiple languages. It is built using React, Tailwind CSS, and Motion to handle enter and exit transitions smoothly.

To use it, import the component from its package path and place it within your React component tree. By default, it demonstrates a cycling animation of greetings.