shadcn-vue-skilld

shadcn-vue

バージョン：[email protected]（準備済みソース package.json:4、npm の latest dist-tag。2026-09-22 確認）。 スタック：Vue 3.5+、reka-ui ^2.10.1、Tailwind CSS ^4.3.2（package.json:68,88,91）。ベースは reka のみです。 CLI は pnpm dlx shadcn-vue@latest <command>（または npx、npm exec、bunx）で実行します。

概要

CLI はコンポーネントのソースファイルをプロジェクトにコピーし、npm の依存関係をインストールします。 コピーしたコードの所有権はあなたにあります。components/ui/** は自由に編集できますが、-o, --overwrite を指定して add を再実行すると、編集内容は置き換えられます。

基本的なワークフロー

# New or existing project: write components.json, install deps, set up CSS
pnpm dlx shadcn-vue@latest init

# Add components (also: URL, local file, @namespace/item, owner/repo/item)
pnpm dlx shadcn-vue@latest add button card dialog

# Preview without writing, then install
pnpm dlx shadcn-vue@latest add sidebar --dry-run
pnpm dlx shadcn-vue@latest add sidebar

# Usage docs and examples for a component
pnpm dlx shadcn-vue@latest docs button

バグを防ぐためのルール

• 項目名は次の順序で解決されます：URL、ローカルファイル、@namespace/item、owner/repo/item[#ref]、デフォルトのレジストリにあるプレーンな名前（dist/registry-hxzbzXMt.js:1870-1891、https://www.shadcn-vue.com/docs/cli#add）。
• 2.8.x ではプリセット名に接頭辞はありません：vega、nova、maia、lyra、mira、luma、sera（dist/registry-hxzbzXMt.js:3141-3244）。以前のドキュメントと 2.6.x のベースラインでは reka-vega のような名前が使われていましたが、現在は機能しません。変更点を参照してください。
• toast と toaster は非推奨です。sonner を使用してください（dist/transform-menu-CLNZ5vUh.js:446-454）。
• lucide-vue-next は旧式のアイコンパッケージです。現在の lucide パッケージは @lucide/vue です（dist/transform-menu-CLNZ5vUh.js:457、dist/icons/index.d.ts:3-10）。ライブラリを切り替えるには migrate icons を実行してください。
• レジストリのスタイル ID には接頭辞が付いたままです。vega スタイルは reka-vega から取得します（dist/registry-hxzbzXMt.js:492-496）。フォールバックのスタイル ID は new-york-v4 です。
• apply <preset> は UI コンポーネント、フォント、CSS 変数を書き換えます。先にコミットしてください。CLI も同様の警告を表示します（dist/index.js:2252-2254）。
• レジストリの環境変数：SHADCN_VUE_URL と REGISTRY_URL はデフォルトの https://shadcn-vue.com/r を上書きします（dist/transform-menu-CLNZ5vUh.js:2-3）。ローカルレジストリのテストに使用してください。
• 組み込みの名前空間は @shadcn です（dist/transform-menu-CLNZ5vUh.js:445）。サードパーティの名前空間は components.json の registries で設定する必要があります。

コマンド一覧

コマンド	用途	主なオプション
init（エイリアス create）	プロジェクトをセットアップし、components.json を書き込みます	-p <preset>、-t <template>、--style、--icon-library、--font、-b <base-color>、-d、--silent
add	項目をインストールします	-o、-a、-p <path>、--dry-run、--diff、--view
apply	既存のプロジェクトにプリセットを適用します	-y
view	インストール前に項目を確認します	-c <cwd>
search（エイリアス list）	レジストリをあいまい検索します（@name 引数）	-q、-l、-o
docs	コンポーネントのドキュメントと例	--json、-b <base>
info	プロジェクトのセットアップレポート	--json
diff	インストール済みの項目とレジストリを比較します	-y
migrate	icons または rtl の移行	-l、[path]
build	registry.json をレジストリ JSON にビルドします	-o <path>
mcp init	MCP クライアント設定を書き込みます	--client claude|cursor|vscode

全フラグ：CLI リファレンス。

設定

プロジェクトルートの components.json がすべてを制御します。主なフィールド：style、typescript、tailwind.css、tailwind.baseColor、aliases、iconLibrary、rtl、pointer、menuColor、menuAccent、registries。 完全なスキーマと例：components-json リファレンス。

スタイルとプリセット

名前付きプリセットは 7 種類（vega から sera まで）、エンコードされたプリセットコードで有効なスタイルは 8 種類（rhea を含む）、アイコンライブラリは 5 種類、フォントは 24 種類です。詳細と表：スタイルとプリセットのリファレンス。

プログラム API

shadcn-vue、shadcn-vue/registry、shadcn-vue/schema、shadcn-vue/utils、shadcn-vue/icons、shadcn-vue/preset、shadcn-vue/mcp、shadcn-vue/tailwind.css からインポートします（package.json:27-59）。 エクスポートとエラークラス：レジストリのリファレンス。

参考資料

• CLI リファレンス
• components.json
• スタイルとプリセット
• レジストリとプログラムから利用する API
• MCP サーバー
• 2.7 および 2.8 での変更点