KokonutUI
KokonutUI (kokonutui.com) is an open-source library of 40+ polished React components built with Tailwind CSS and the motion (Framer Motion successor) library. Components are installed as source files into the project via the shadcn CLI — they are not an npm package. After install, the component lives in components/kokonutui/ and can be freely edited.
Requirements
- React 18+/Next.js (App Router preferred) with Tailwind CSS configured
- shadcn CLI initialized in the project (
components.json present). If not: npx shadcn@latest init
- Many components depend on
lucide-react and motion (installed automatically by the CLI)
Installing a component
Use the project's package runner:
npx shadcn@latest add https://kokonutui.com/r/<name>.json
# or: pnpm dlx shadcn@latest add https://kokonutui.com/r/<name>.json
# or: bunx --bun shadcn@latest add https://kokonutui.com/r/<name>.json
This copies the component source into components/kokonutui/<name>.tsx, pulls in any required hooks (e.g. hooks/use-auto-resize-textarea.ts), icon components, shadcn/ui primitives (button, textarea, dropdown-menu, …), and npm dependencies.
If the shared cn() helper is missing, install it first: npx shadcn@latest add https://kokonutui.com/r/utils.json.
Import after install:
import GradientButton from "@/components/kokonutui/gradient-button";
Workflow
- Pick the component from
references/components.md — the full catalog with names, descriptions, categories, and dependencies. Match on what the user is building (AI input, text effect, button, card, background, etc.).
- Install it with the shadcn CLI command above — never hand-copy or re-implement a component that exists in the catalog.
- Read the installed source in
components/kokonutui/<name>.tsx to learn its actual props (props are not documented externally; the source is the contract).
- Customize in place. Installed files belong to the project — edit variants, colors, and copy directly rather than wrapping.
Key rules
- Install before inventing. Check the catalog first; only build custom UI when no catalog component fits.
- Client components. Most KokonutUI components use
motion/hooks and carry "use client" — do not strip the directive; render them inside server components as children.
- Tailwind only. Styling is utility-class based and respects the project's dark mode (
dark: variants are built in). Theme by editing classes, not by adding CSS overrides.
- Check registry deps. Components listing shadcn deps (see catalog) require those primitives; the CLI installs them, but conflicts with already-customized primitives should be resolved in favor of the project's existing versions.
- Docs pages live at
https://kokonutui.com/docs/components/<name> for a visual preview; https://kokonutui.com/llms.txt has an LLM-oriented index.
Component categories (40+ items)
| Category |
Highlights |
| ai |
ai-prompt (chat input with model selector), ai-input-search, ai-voice, ai-text-loading, ai-loading |
| texts |
shimmer-text, glitch-text, matrix-text, type-writer, sliced-text, swoosh-text, dynamic-text, scroll-text |
| buttons |
gradient-button, particle-button, hold-button, attract-button, social-button, switch-button, command-button, v0-button |
| cards |
card-flip, card-stack, apple-activity-card, liquid-glass-card, tweet-card, carousel-cards |
| backgrounds |
beams-background, background-paths, shape-hero |
| components |
bento-grid, file-upload, action-search-bar, smooth-tab, smooth-drawer, toolbar, team-selector, avatar-picker, profile-dropdown, currency-transfer |
Full catalog with descriptions and dependencies: references/components.md.
1---2name: kokonutui3description: This skill should be used when the user asks to "add a KokonutUI component", "use kokonutui", "install a component from kokonutui.com", or asks for polished ready-made React/Tailwind UI like AI chat inputs, animated text effects (shimmer, glitch, matrix, typewriter), gradient/particle/hold buttons, card stacks, bento grids, hero backgrounds (beams, paths), file uploads, or profile dropdowns in a Next.js/React + Tailwind project.4---56# KokonutUI78KokonutUI (kokonutui.com) is an open-source library of 40+ polished React components built with Tailwind CSS and the `motion` (Framer Motion successor) library. Components are **installed as source files into the project** via the shadcn CLI — they are not an npm package. After install, the component lives in `components/kokonutui/` and can be freely edited.910## Requirements1112- React 18+/Next.js (App Router preferred) with Tailwind CSS configured13- shadcn CLI initialized in the project (`components.json` present). If not: `npx shadcn@latest init`14- Many components depend on `lucide-react` and `motion` (installed automatically by the CLI)1516## Installing a component1718Use the project's package runner:1920```bash21npx shadcn@latest add https://kokonutui.com/r/<name>.json22# or: pnpm dlx shadcn@latest add https://kokonutui.com/r/<name>.json23# or: bunx --bun shadcn@latest add https://kokonutui.com/r/<name>.json24```2526This copies the component source into `components/kokonutui/<name>.tsx`, pulls in any required hooks (e.g. `hooks/use-auto-resize-textarea.ts`), icon components, shadcn/ui primitives (button, textarea, dropdown-menu, …), and npm dependencies.2728If the shared `cn()` helper is missing, install it first: `npx shadcn@latest add https://kokonutui.com/r/utils.json`.2930Import after install:3132```tsx33import GradientButton from "@/components/kokonutui/gradient-button";34```3536## Workflow37381. **Pick the component** from `references/components.md` — the full catalog with names, descriptions, categories, and dependencies. Match on what the user is building (AI input, text effect, button, card, background, etc.).392. **Install it** with the shadcn CLI command above — never hand-copy or re-implement a component that exists in the catalog.403. **Read the installed source** in `components/kokonutui/<name>.tsx` to learn its actual props (props are not documented externally; the source is the contract).414. **Customize in place.** Installed files belong to the project — edit variants, colors, and copy directly rather than wrapping.4243## Key rules4445- **Install before inventing.** Check the catalog first; only build custom UI when no catalog component fits.46- **Client components.** Most KokonutUI components use `motion`/hooks and carry `"use client"` — do not strip the directive; render them inside server components as children.47- **Tailwind only.** Styling is utility-class based and respects the project's dark mode (`dark:` variants are built in). Theme by editing classes, not by adding CSS overrides.48- **Check registry deps.** Components listing shadcn deps (see catalog) require those primitives; the CLI installs them, but conflicts with already-customized primitives should be resolved in favor of the project's existing versions.49- **Docs pages** live at `https://kokonutui.com/docs/components/<name>` for a visual preview; `https://kokonutui.com/llms.txt` has an LLM-oriented index.5051## Component categories (40+ items)5253| Category | Highlights |54|---|---|55| ai | ai-prompt (chat input with model selector), ai-input-search, ai-voice, ai-text-loading, ai-loading |56| texts | shimmer-text, glitch-text, matrix-text, type-writer, sliced-text, swoosh-text, dynamic-text, scroll-text |57| buttons | gradient-button, particle-button, hold-button, attract-button, social-button, switch-button, command-button, v0-button |58| cards | card-flip, card-stack, apple-activity-card, liquid-glass-card, tweet-card, carousel-cards |59| backgrounds | beams-background, background-paths, shape-hero |60| components | bento-grid, file-upload, action-search-bar, smooth-tab, smooth-drawer, toolbar, team-selector, avatar-picker, profile-dropdown, currency-transfer |6162Full catalog with descriptions and dependencies: **`references/components.md`**.
webmilmind1