Kokonutui

Skill webmilmind1/claude-plugins/frontend-kit/skills/kokonutui

Frontend Design Kit for Claude Code — UI, UX, components, charts & animation. KokonutUI, Bklit UI, and Anime.js skills in one installable plugin.

Install

npx -y skills add webmilmind1/claude-plugins --skill kokonutui

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

3 things to look at

18 days oldThe repository was created 18 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

4.1 KB, 914 tokens by cl100k_base, as published. Nobody here has run it

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.