Kokonut UI

What Kokonut UI is

Kokonut UI is a free, open-source library of React components aimed at AI products: chat inputs with model pickers, tool-call traces, approval prompts for agent actions, citations, diff review, streaming and loading states, plus the cards, inputs, buttons, backgrounds and text effects that sit around a chat. Components are built with React, Tailwind CSS, Motion and shadcn/ui, and the library is MIT-licensed. It was created by designer and developer Dorian Baffier (the site's author and creator metadata and its "Built by" footer link point to him), lives in the kokonut-labs/kokonutui repository on GitHub, and the site lists it as part of the Vercel OSS Program.

The Product Hunt launch on November 14, 2026 framed it as "open-source UI components for your AI agent". The news behind the launch was a November 10, 2026 release that added 14 new AI components (AI Tool Calls, AI Checkout, AI Connect, AI Send, AI Schedule, AI Attachment, AI Code Run, AI Order Status, AI Handoff and others) and repositioned the library so that a coding agent, not just a developer, can find and install components.

How it works: a shadcn registry, not an npm package

Kokonut UI is distributed as a shadcn/ui registry. There is nothing to npm install and no runtime dependency on Kokonut itself. You add the @kokonutui namespace to your project's components.json once, then add components by name with the shadcn CLI, for example npx shadcn@latest add @kokonutui/ai-tool-approval. The CLI copies the component's source file into your codebase (by default under components/kokonutui/) and installs the npm packages and shadcn primitives it declares. From then on the component is your code: you edit, restyle or delete it like any other file, and upstream changes only reach you if you add the component again.

The agent angle comes from the same mechanism. The shadcn MCP server (npx shadcn@latest mcp) lets Claude Code, Cursor, VS Code, Codex or any MCP client list, search and install components from every registry in components.json. Kokonut's agent docs give a one-line setup per editor (for Claude Code, npx shadcn@latest mcp init --client claude), a suggested rules file telling the agent to check Kokonut UI before building a component from scratch, and a single prompt that hands the whole setup to the agent by pointing it at kokonutui.com/setup.md. Every docs page also has a Markdown version that includes the install command and the full component source, and the site publishes an llms.txt index, so an agent can read a component before installing it.

What's in the library

• AI (27 components): AI Input Selector (model menu, effort control, file chips, slash commands), AI Tool Approval (destructive calls need a press-and-hold), AI Tool Calls, AI Diff Review (accept, reject or undo per file), AI Context Meter, AI Inline Citations, AI Model Selector, AI Conversation Branches, AI Agent Lanes for sub-agents, AI Redact (masks names, emails, card numbers and keys before a prompt is sent), AI Memory, AI Autocomplete and more.
• UI components: backgrounds (dot fields, flow fields, a WebGL cloth "drape", caustics, rain on glass), cards (activity rings, liquid gauge, boarding pass, uptime card), navigation (command palette, marking menu, status island), inputs (detent dial, wheel picker, signature pad, seat map, card field, time zone planner), media, feedback, text effects and buttons (hold to confirm, slide to confirm, tear button, pull cord).
• Hooks and helpers that some components depend on.

We checked the registry: what you actually install

On November 15, 2026 we downloaded the public registry index at kokonutui.com/r/registry.json. It listed 121 items: 116 components, 4 hooks and 1 utility library, which matches the "116 components" count on the homepage (the README still says "100+"). We then fetched one item, ai-tool-approval, the same JSON the shadcn CLI downloads when you add it:

GET https://kokonutui.com/r/ai-tool-approval.json
type:          registry:component
dependencies:  lucide-react, motion
files:         /components/kokonutui/ai-tool-approval.tsx  (743 lines)
first line:    "use client";
imports:       react, motion/react, lucide-react, @/lib/utils

Two practical takeaways. First, the components are client components, so in a Next.js App Router project they render on the client; plan your server/client boundaries accordingly. Second, each item is one self-contained file plus a short list of npm dependencies (here Motion for animation and Lucide for icons) and the standard shadcn cn() helper in @/lib/utils. That is what "a single file you own" means in practice: easy to read and change, but a 700-line file you now maintain.

Kokonut UI vs Kokonut UI Pro

Pro is a one-time purchase with no subscription, and its page says purchases are not refunded once complete, so try the free components first; the site says they are built the same way.

Who it's for

Kokonut UI suits frontend and full-stack developers building chat-style or agent products in React and Next.js who already use, or are happy to adopt, Tailwind CSS and shadcn/ui. It is also useful for teams that let a coding agent scaffold UI: because the components are discoverable over MCP and documented as Markdown, an agent can pick a tool-approval dialog or a model picker off the shelf instead of improvising one. Designers and indie hackers use the animated backgrounds, cards and text effects for landing pages.

Limits and trade-offs

• Stack lock-in by design. It assumes React, Tailwind CSS and a shadcn-style project (components.json, @/lib/utils). Vue, Svelte or plain-CSS projects can't use it directly.
• Copy-in means you own upkeep. There are no versioned package upgrades; fixes and new features reach you only when you re-add a component, which overwrites your local edits.
• Animation weight. Many components depend on Motion, and some backgrounds use canvas or WebGL. Check bundle size and reduced-motion behaviour for performance-sensitive pages.
• Demo data, not wiring. AI components such as AI Checkout or AI Order Status are UI with sample states. Connecting them to your model, payments or tools is your job.
• Agent installs still need review. An agent adding components through MCP will also add npm dependencies; review the diff as you would any dependency change.

Project facts (checked November 15, 2026)

• GitHub: kokonut-labs/kokonutui, created November 1, 2024, about 2,330 stars and 153 forks, MIT licence, last push November 15, 2026.
• Latest changelog entry: November 10, 2026 (14 new AI components, PR #147).
• Maker: Dorian Baffier; part of the Vercel OSS Program per the site footer.

Related on TechLogHub

• What is a UI component? and what is a design system?
• Model Context Protocol (MCP), the protocol the shadcn MCP server uses to let agents install components.
• Tailwind CSS cheat sheet and React hooks cheat sheet for editing the copied components.
• Tailwind color palette generator to re-theme them.