$ show kokonut-labs/kokonutui
KokonutUI is an open-source UI component library for modern React applications, specifically targeting Next.js projects with Tailwind CSS v4 and Motion (Framer Motion). The repository contains over 40 reusable, animated components distributed through a shadcn-style registry, allowing developers to copy-paste or install them via `npx shadcn@latest add @kokonutui/<name>`. The library covers backgrounds (beams, flow field, shape hero), buttons (attract, gradient, hold, particle, slide-text, social, switch, v0), cards (apple activity, bento grid, card flip, card stack, carousel, currency transfer, liquid glass, mouse effect, spotlight, tweet), inputs (avatar picker, file upload, loader, team selector), navigation (action search bar, morphic navbar, profile dropdown, smooth drawer, smooth tab, toolbar), AI-specific components (AI input search, AI loading, AI prompt, AI text loading, AI voice), and text effects (dynamic, glitch, matrix, scroll, shimmer, sliced, swoosh, type writer). The project also includes custom hooks (use-auto-resize-textarea, use-click-outside, use-copy-to-clipboard, use-debounce, use-file-input, use-intersection, use-mobile, use-tags) and a comprehensive documentation site powered by Fumadocs with MDX content. A build script generates registry JSON files and agent-facing resources (llms.txt, agent skills index). The codebase follows modern React patterns (compound components, asChild, controlled/uncontrolled state, composition over props) and includes extensive AI agent skills for component architecture, Next.js best practices, and React design patterns. While the library is functional and well-structured, it lacks tests and has a large dependency surface; it is also tightly coupled to Next.js and serves as a marketing funnel for a pro version.
The LLM identified 7 files worth highlighting for reuse:
Implements a liquid glass card with a realistic refractive distortion effect using SVG `<filter>` with `feTurbulence` and `feDisplacementMap`. The component is self-contained, exports both `LiquidGlassCard` and `LiquidButton` variants, and requires only `motion` and `cn` as dependencies. The pattern is reusable for any glass-effect UI element, demonstrating advanced SVG filter manipulation within React.
Creates an interactive particle burst effect on button hover using a 2D canvas with particle physics (velocity, gravity, color interpolation, opacity fade). The component encapsulates all canvas logic, maintains a clean API (with `particleColor`, `backgroundRadius` props), and cleans up on unmount. It is a reusable pattern for any clickable element that needs particle feedback.
Renders an animated background of rotating light beams using a canvas element. The component accepts simple props (`className`, `color`) and manages requestAnimationFrame loops, mouse interaction for parallax, and responsive resizing. It demonstrates a clean pattern for animated canvas backgrounds that can be dropped into any React layout.
Produces a shimmer/loading effect on text by applying a moving gradient as a CSS mask. The component is a single function with no external dependencies beyond `cn`. It uses Tailwind's `animate-shimmer` or inline keyframes and is trivially reusable for any text element needing a loading skeleton or highlight effect.
A self-contained React hook that automatically adjusts a textarea's height as the user types. It uses a hidden mirror element or `scrollHeight` measurement, debounces updates, and returns a ref to attach. The hook has zero dependencies (beyond React) and can be extracted into any project with minimal changes.
A generic hook that detects clicks outside a referenced element, invoking a callback. It handles cleanup, uses passive event listeners where possible, and is framework-agnostic aside from React. The implementation is concise and follows common best practices (ref, event listener cleanup).
A TypeScript script that reads component source files from `components/kokonutui/` and registry definitions from `registry/`, then generates per-component JSON files in `public/r/`, a combined registry index, an agent skills index with SHA-256 digest, and an `llms.txt` file. The script parses frontmatter from MDX docs to extract component metadata and writes deterministic output. It demonstrates a pattern for maintaining a shadcn-compatible registry that can be adapted for other component libraries.