Install Kokonutui Component

Installing a KokonutUI component

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), so components.json and the cn utility in lib/utils.ts exist.
• 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.