KokonutUI is a collection of 100+ open-source React components built with Next.js, React, Tailwind CSS v4, and Motion. Components are not published as an npm package — each one is copied into the target project as source code via the shadcn CLI, so it can be edited freely afterwards.
Discovering what exists
https://kokonutui.com/r/registry.json— machine-readable index of every installable component, including its dependencies and file list.https://kokonutui.com/llms.txt— documentation index with one line per component and a link to its Markdown source.https://kokonutui.com/r/{name}.json— the full registry entry for a single component, with the complete source of every file it ships.
To search the docs, request any docs page with Accept: text/markdown (or
append .md to the URL) to get clean Markdown instead of HTML. For example,
https://kokonutui.com/docs/cards/card-flip.md.
Installing
If a shadcn MCP server is available, use it to browse and install components
directly — it works with the @kokonutui registry out of the box. Setup:
https://kokonutui.com/docs/mcp.
Otherwise, use the shadcn CLI with the @kokonutui namespace:
npx shadcn@latest add @kokonutui/card-flip
Replace card-flip with any name from registry.json. The CLI resolves the
component's registryDependencies (shadcn/ui primitives such as button or
textarea) and its npm dependencies (such as motion or lucide-react)
automatically.
Prerequisites in the target project
- Tailwind CSS v4 configured.
- shadcn/ui initialised (
npx shadcn@latest init), socomponents.jsonand thecnutility inlib/utils.tsexist. - React 19 or later for components that use modern React features.
After installing
The component lands in components/kokonutui/{name}.tsx by default. It is
plain source code — edit it directly rather than wrapping it. Check the
component's docs page for props and usage examples.
Licence
MIT. The components may be used, modified, and shipped in commercial work.