mcpField
I
install-kokonutui-component

install-kokonutui-component

github.com/kokonut-labsデザイン・UI2.3k91 回インストール2 日前に更新
リポジトリ

install-kokonutui-component について

install-kokonutui-componentは、KokonutUIのReactコンポーネントを探してプロジェクトに追加するスキルです。shadcn MCPサーバーまたはCLIで導入し、npmパッケージではなく編集可能なソースとして配置する方法を説明します。

主な機能

  1. 01コンポーネントレジストリの閲覧
  2. 02shadcn MCP経由のインストール
  3. 03shadcn CLI経由のインストール
  4. 04コンポーネント依存関係の解決
  5. 05配置したソースの編集

活用シーン

  1. 01画面に使うKokonutUIコンポーネントの検索
  2. 02shadcnプロジェクトへのコンポーネント追加
  3. 03導入したコンポーネントのソース調整

MCP 対応

shadcn MCPサーバーが利用できる場合、@kokonutuiレジストリの閲覧とコンポーネント導入に使用します。利用できない場合は、shadcn CLIによる方法を案内します。

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/install-kokonutui-componentを入力して読み込まれたか確認します。

詳細

KokonutUI コンポーネントのインストール

KokonutUI は、Next.js、React、Tailwind CSS v4、Motion で構築された、100 個以上のオープンソース React コンポーネントのコレクションです。コンポーネントは npm パッケージとして公開されていません。shadcn CLI を使って、各コンポーネントのソースコードを対象のプロジェクトにコピーするため、インストール後は自由に編集できます。

利用可能なコンポーネントを確認する

  • https://kokonutui.com/r/registry.json — インストール可能なすべてのコンポーネントを、依存関係とファイル一覧とともに確認できる、機械可読なインデックスです。
  • https://kokonutui.com/llms.txt — コンポーネントごとに 1 行で記載し、Markdown ソースへのリンクを掲載したドキュメントのインデックスです。
  • https://kokonutui.com/r/{name}.json — 1 つのコンポーネントの完全なレジストリエントリです。提供されるすべてのファイルのソースコードを含みます。

ドキュメントを検索するには、Accept: text/markdown を指定して任意のドキュメントページをリクエストするか、URL の末尾に .md を追加すると、HTML ではなく整形された Markdown を取得できます。たとえば、https://kokonutui.com/docs/cards/card-flip.md です。

インストール

shadcn MCP サーバーが利用できる場合は、それを使ってコンポーネントを直接参照してインストールしてください。@kokonutui レジストリに最初から対応しています。セットアップ方法： https://kokonutui.com/docs/mcp

それ以外の場合は、@kokonutui 名前空間を指定して shadcn CLI を使用します。

npx shadcn@latest add @kokonutui/card-flip

card-flip は、registry.json にある任意の name に置き換えてください。CLI は、コンポーネントの registryDependencies（button や textarea などの shadcn/ui プリミティブ）と npm の dependencies（motion や lucide-react など）を自動的に解決します。

対象プロジェクトの前提条件

  • Tailwind CSS v4 が設定されていること。
  • shadcn/ui が初期化済みであること（npx shadcn@latest init）。これにより、components.json と lib/utils.ts の cn ユーティリティが用意されます。
  • モダンな React 機能を使うコンポーネントでは、React 19 以降であること。

インストール後

コンポーネントは、デフォルトで components/kokonutui/{name}.tsx に配置されます。これは通常のソースコードなので、ラップするのではなく直接編集してください。プロパティと使用例については、コンポーネントのドキュメントページを確認してください。

ライセンス

MIT。コンポーネントは商用の制作物で使用、変更、配布できます。

コメント

Markdown 対応