Quick start
Kokonut UI is a shadcn/ui registry. Add the namespace to your components.json:
{
"registries": {
"@kokonutui": "https://kokonutui.com/r/{name}.json"
}
}
Then add any component by name:
npx shadcn@latest add @kokonutui/ai-tool-approval
import AIToolApproval from "@/components/kokonutui/ai-tool-approval";
export default function Page() {
return <AIToolApproval />;
}
The CLI writes the source to components/kokonutui/ and installs its dependencies. You own the code from there. Full setup, including monorepos, is in the installation guide.
You can also install straight from this repo, with no components.json changes:
npx shadcn@latest add kokonut-labs/kokonutui/ai-tool-approval
Components
| Category | Examples |
|---|
| AI | Tool Calls, Tool Approval, Checkout, Diff Review, Model Selector, Inline Citations, Voice |
| Buttons | Slide to Confirm, Hold Button, Undo Button, Magnet Button, Tear Button |
| Cards | Apple Activity Card, Boarding Pass, Currency Transfer, Uptime Card, Receipt Printer |
| Inputs | Seat Map, Wheel Picker, Signature Pad, Time Zone Planner, Amount Pad |
| Navigation | Command Palette, Marking Menu, Smooth Drawer, Swipe Tabs, Status Island |
| Media | Clip Trimmer, Synced Transcript, Photo Straighten, Focal Point Picker |
| Feedback | Promise Toast, Inline Alert, Save Status, Empty State, Helpful Rating |
| Text | Split Flap Text, Spoiler Text, Typing Text, Marker Text |
| Backgrounds | Caustics, Halftone, Topo, Rain Glass, Drape |
Every component has a live demo, its source, and the packages it installs on its docs page. New ones land in the changelog.
Use with AI agents
Claude Code, Cursor, VS Code and Codex can search and install Kokonut UI components through the shadcn MCP server. The Agents page has the one-line setup for each editor and a rules file to drop in. The docs are also available as plain text at kokonutui.com/llms.txt.
Kokonut UI Pro
Kokonut UI Pro adds premium components, blocks and full Next.js templates. Pro components install through the same shadcn CLI.
Contributing
Issues and pull requests are welcome. To run the site locally:
git clone https://github.com/kokonut-labs/kokonutui.git
cd kokonutui
bun install
bun run dev
Components live in components/kokonutui/, their docs in content/docs/<category>/, and their registry entries in registry/registry-components.ts. Run bun x ultracite fix before committing. The registry JSON in public/r/ is rebuilt by CI on merge, so you don't need to commit it.
Sponsor
Thanks to Vercel for sponsoring this project through the Vercel OSS Program.
License
MIT
