mcpField
I
install-kokonutui-component

install-kokonutui-component

github.com/kokonut-labsDesign & UI2.3k91 installsUpdated 2d ago
Repository

About install-kokonutui-component

install-kokonutui-component is a skill for discovering and adding KokonutUI React components to a project. It explains installation through a shadcn MCP server or CLI, with components copied as editable source rather than installed as an npm package.

Key features

  1. 01Browse the component registry
  2. 02Install through shadcn MCP
  3. 03Install through shadcn CLI
  4. 04Resolve component dependencies
  5. 05Edit copied source code

Use cases

  1. 01Finding a KokonutUI component for an interface
  2. 02Adding a component to a shadcn project
  3. 03Customizing an installed component's source

MCP support

When a shadcn MCP server is available, the skill can use it to browse and install components from the @kokonutui registry. Otherwise, it describes using the shadcn CLI.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/kokonut-labs/kokonutui --skill install-kokonutui-component

After installing, type/install-kokonutui-componentin Claude Code to confirm it loaded.

Details

From the project README

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.

Comments

Markdown supported