本文へ移動
はじめに

elchika-inc/ui

Base UI と Tailwind CSS v4 で構築した共有 UI です。shadcn registry 経由で component のソースを取り込み、利用側で所有します。

導入手順

使い方に合わせて、次の3つの経路から component を追加できます。

  1. 1. 直接 URL

    registry 設定を追加せず、component を1件取得します。

    npx shadcn@latest add https://ui.elchika.dev/r/button.json
  2. 2. @elchika 名前空間

    components.json に registry を登録し、短い名前で取得します。

    {
      "registries": {
        "@elchika": "https://ui.elchika.dev/r/{name}.json"
      }
    }
    npx shadcn@latest add @elchika/button
  3. 3. shadcn MCP

    shadcn CLI 同梱 MCP を初期化し、生成された .mcp.json を有効にするため Claude を再起動します。

    npx shadcn@latest mcp init --client claude

トークン置換の注意

shadcn init が生成した :root / .dark の色 alias を削除し、elchika-ui/tokens.css の import に一本化してください。component を add するたびに alias block が再追記されるため、その都度再削除が必要です。

@import "./elchika-ui/tokens.css";

コンポーネント

利用できる component は、サイドバーの一覧またはButton のドキュメントから確認できます。