Skip to main content

Kokonut UI Documentation

Beautiful, production-ready React components with animations. Built with Tailwind CSS, shadcn/ui, and Motion (Framer Motion).

Get StartedExplore Components

Quick Start

Get up and running with Kokonut UI components in minutes.

1

Install shadcn/ui CLI

Initialize shadcn/ui in your Next.js project to create the components.json configuration file.
npx shadcn@latest init
2

Add Kokonut UI registry

Add the Kokonut UI registry to your components.json file so you can install components via the CLI.
{
  "registries": {
    "@kokonutui": "https://kokonutui.com/r/{name}.json"
  }
}
3

Install a component

Use the shadcn CLI to install any Kokonut UI component. Dependencies are automatically installed.
npx shadcn@latest add @kokonutui/particle-button
4

Use the component

Import and use the component in your React application.
import ParticleButton from "@/components/kokonutui/particle-button";

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

Explore by Category

Browse 46+ components organized by type.

AI Components

Modern AI input selectors, loading states, and voice interfaces

Buttons

Interactive buttons with particle effects, gradients, and animations

Cards

Stunning card designs with glass effects, flips, and hover interactions

Text Effects

Animated text components including typewriter, shimmer, and glitch effects

Backgrounds

Animated backgrounds with beams, paths, and flowing shapes

Navigation

Smooth tabs, drawers, toolbars, and dropdown menus

Inputs

File uploads, search bars, and avatar pickers with animations

Loaders

Loading animations and progress indicators

Utilities

React hooks and helper functions for common UI patterns

Why Kokonut UI?

Production-ready components with the features you need.

Built with Modern Tools

Leverages Tailwind CSS v4, shadcn/ui primitives, and Motion (Framer Motion v12) for smooth animations.

TypeScript First

Full TypeScript support with complete type definitions for all components and props.

Easy Installation

Install components via the shadcn CLI with automatic dependency resolution and configuration.

Fully Customizable

Own the code — components are copied to your project for complete customization and control.

Ready to Build Beautiful UIs?

Start using Kokonut UI components in your Next.js projects today. Installation takes less than a minute.

Get Started Now

Build docs developers (and LLMs) love

Get started for freeTalk to us