# Install Kokonutui Component

> Find and install a KokonutUI React component into a project using the shadcn CLI, and read its source and documentation.

- Skill: `kokonut-labs/install-kokonutui-component` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kokonut-labs/install-kokonutui-component`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kokonut-labs/install-kokonutui-component/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kokonut-labs (https://skillmd.com/u/kokonut-labs)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kokonut-labs/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:

```bash
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.