Kokonut UI

100+ open-source React components built with Tailwind CSS, Motion and shadcn/ui.
Install them with the shadcn CLI and they live in your codebase.

Docs · Changelog · Agents · Pro

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/slide-to-confirm

import SlideToConfirm from "@/components/kokonutui/slide-to-confirm";

export default function Page() {
  return <SlideToConfirm />;
}

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/slide-to-confirm

Every component has a live demo, its source, and the packages it installs on its docs page. New ones land in the changelog.

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 adds premium components, blocks and full Next.js templates. Pro components install through the same shadcn CLI.

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.

Thanks to Vercel for sponsoring this project through the Vercel OSS Program.

MIT