shadcn-vue

shadcn-vue 本番環境向けスタック

本番環境でテスト済み：アクセシブルでカスタマイズ可能なコンポーネントを備えた Vue／Nuxt アプリケーション 最終更新日：2025-12-09 ステータス：本番環境で利用可能 ✅ 最新バージョン：shadcn-vue@latest（Reka UI v2） 依存関係：Tailwind CSS、Reka UI、Vue 3+ または Nuxt 3+

---

クイックスタート（3 分）

Vue プロジェクトの場合（Vite）

1. shadcn-vue を初期化する

# Using Bun (recommended)
bunx shadcn-vue@latest init

# Using npm
npx shadcn-vue@latest init

初期化時の設定：

• スタイル：New York または Default（後から変更できません！）
• ベースカラー：Slate（推奨）
• CSS 変数：Yes（ダークモードに必須）

2. TypeScript のパスエイリアスを設定する

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

3. Vite を設定する

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite' // Tailwind v4
import path from 'path'

export default defineConfig({
  plugins: [vue(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

4. 最初のコンポーネントを追加する

bunx shadcn-vue@latest add button
# or: npx shadcn-vue@latest add button

セットアップの全手順：templates/quick-setup.ts

---

Nuxt プロジェクトの場合

# Create project with Tailwind
bun create nuxt-app my-app
cd my-app
bun add -D @nuxtjs/tailwindcss

# Configure Nuxt
# nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss']
})

# Initialize shadcn-vue
bunx shadcn-vue@latest init
# or: npx shadcn-vue@latest init
# or: pnpm dlx shadcn-vue@latest init

---

コンポーネントライブラリ（50 以上のコンポーネント）

ナビゲーションとレイアウト

• Accordion、Alert Dialog、Avatar、Badge、Breadcrumb、Card、Carousel、Collapsible、Dialog、Drawer、Dropdown Menu、Menu Bar、Navigation Menu、Pagination、Popover、Resizable、Scroll Area、Sheet、Sidebar、Tabs、Toast、Tooltip

フォームコンポーネント

• Auto Form、Button、Calendar、Checkbox、Combobox、Command、Context Menu、Date Picker、Form、Input、Input OTP、Label、Number Field、PIN Input、Radio Group、Range Calendar、Select、Slider、Sonner、Switch、Textarea、Toggle、Toggle Group

データ表示

• Aspect Ratio、Data Table、Skeleton、Stepper、Splitter、Table、Tag Input

高度なコンポーネント

• チャート（Unovis）、Color Picker、Editable、File Upload、Sortable

コンポーネントの完全なリファレンス：https://shadcn-vue.com/docs/components

---

Auto Form - スキーマベースのフォーム

インストール

bunx shadcn-vue@latest add auto-form
# or: npx shadcn-vue@latest add auto-form

bun add zod
# or: npm install zod

基本的な使い方

<script setup lang="ts">
import { AutoForm } from '@/components/ui/auto-form'
import { z } from 'zod'

const schema = z.object({
  name: z.string().min(2, 'Name must be at least 2 characters'),
  email: z.email({ error: 'Invalid email' }),
  age: z.number().min(18, 'Must be 18 or older'),
  bio: z.string().optional(),
  subscribe: z.boolean().default(false)
})

function onSubmit(values: z.infer<typeof schema>) {
  console.log('Form submitted:', values)
}
</script>

<template>
  <AutoForm :schema="schema" @submit="onSubmit">
    <template #submit>
      <Button type="submit">Submit</Button>
    </template>
  </AutoForm>
</template>

サポートされているフィールド型：string、number、boolean、date、enum、array、object

---

TanStack Table によるデータテーブル

インストール

bunx shadcn-vue@latest add data-table
# or: npx shadcn-vue@latest add data-table

bun add @tanstack/vue-table
# or: npm install @tanstack/vue-table

基本設定

<script setup lang="ts">
import { DataTable } from '@/components/ui/data-table'
import { h } from 'vue'

const columns = [
  {
    accessorKey: 'id',
    header: 'ID',
  },
  {
    accessorKey: 'name',
    header: 'Name',
  },
  {
    accessorKey: 'email',
    header: 'Email',
  }
]

const data = [
  { id: 1, name: 'John Doe', email: '[email protected]' },
  { id: 2, name: 'Jane Smith', email: '[email protected]' }
]
</script>

<template>
  <DataTable :columns="columns" :data="data" />
</template>

機能：並べ替え、フィルタリング、ページネーション、行の選択、列の表示設定、展開可能な行

---

ダークモードの実装

インストール

bun add @vueuse/core
# or: npm install @vueuse/core

テーマプロバイダーを設定する

<script setup lang="ts">
import { useColorMode } from '@vueuse/core'

const mode = useColorMode()
</script>

<template>
  <div :class="mode">
    <slot />
  </div>
</template>

コンポーネントで使用する

<script setup>
import { useColorMode } from '@vueuse/core'

const mode = useColorMode()

function toggleTheme() {
  mode.value = mode.value === 'dark' ? 'light' : 'dark'
}
</script>

<template>
  <Button @click="toggleTheme">
    {{ mode === 'dark' ? '🌙' : '☀️' }}
  </Button>
</template>

---

重要なルール

必ず行うこと

✅ コンポーネントを追加する前に init を実行する

• 必要な設定とユーティリティを作成します
• パスエイリアスを設定します

✅ テーマ設定に CSS 変数を使用する（cssVariables: true）

• ダークモードをサポートします
• 柔軟なテーマカスタマイズが可能になります

✅ TypeScript のパスエイリアスを設定する

• コンポーネントのインポートに必須です
• components.json のエイリアスと一致させる必要があります

✅ components.json をバージョン管理に含める

• チームメンバー間で同じ設定を使用する必要があります
• プロジェクトのセットアップを記録できます

✅ インストールを高速化するために Bun を使用する（推奨）

• npm より 10～20 倍高速です

絶対に行わないこと

❌ 初期化後に style を変更しない

• 完全な再インストールが必要になります
• 代わりに、新しいディレクトリで再初期化してください

❌ Radix Vue と Reka UI v2 を混在させない

• コンポーネント API に互換性がありません
• どちらか一方を使用してください

❌ TypeScript の設定を省略しない

• コンポーネントのインポートに失敗します
• IDE の自動補完が機能しません

❌ Tailwind CSS なしで使用しない

• コンポーネントのスタイルには Tailwind を使用しています
• 正しく表示されません

---

重大な問題トップ 7

問題 #1：TypeScript のパスエイリアスが設定されていない

エラー：Cannot find module '@/components/ui/button'

解決方法：

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

---

問題 #2：Tailwind CSS が設定されていない

エラー：コンポーネントがスタイルなしで表示される

解決方法：

/* src/assets/index.css */
@import "tailwindcss";

// vite.config.ts (Tailwind v4)
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [vue(), tailwindcss()]
})

---

問題 #3：CSS 変数が定義されていない

エラー：テーマカラーが適用されず、コンポーネントが灰色または透明になる

解決方法：すべての CSS 変数が定義されていることを確認してください（init コマンドを実行します）

---

問題 #4：誤ったスタイルを選択した

エラー：コンポーネントが想定と異なる見た目になる

解決方法：init の実行時に（New York または Default）を慎重に選択してください。再インストールしない限り、後から変更できません

---

問題 #5：Radix Vue と Reka UI を混在させている

エラー：型の競合、コンポーネントの重複

解決方法：

• Reka UI v2 には bunx shadcn-vue@latest を使用します
• 従来の Radix Vue には bunx shadcn-vue@radix を使用します
• 両方を混在させないでください

---

Issue #6: モノレポのパスに関する問題

エラー: コンポーネントが誤ったディレクトリにインストールされる

解決策: -c フラグを使用してワークスペースを指定します：

bunx shadcn-vue@latest init -c ./apps/web
bunx shadcn-vue@latest add button -c ./apps/web

---

Issue #7: 手動編集後にコンポーネントのインポートに失敗する

エラー: components.json の編集後にインポートパスが壊れる

解決策: components.json と tsconfig.json のエイリアスを同期させてください。設定を変更したら、インポートをテストしてください。

---

7つの問題すべてを見る: references/error-catalog.md

---

CLI コマンドリファレンス

init コマンド

# Initialize in current directory
bunx shadcn-vue@latest init
# or: npx shadcn-vue@latest init

# Initialize in specific directory (monorepo)
bunx shadcn-vue@latest init -c ./apps/web
# or: npx shadcn-vue@latest init -c ./apps/web

add コマンド

# Add single component
bunx shadcn-vue@latest add button
# or: npx shadcn-vue@latest add button

# Add multiple components
bunx shadcn-vue@latest add button card dialog

# Add all components
bunx shadcn-vue@latest add --all
# or: npx shadcn-vue@latest add --all

diff コマンド

# Check for component updates
bunx shadcn-vue@latest diff button
# or: npx shadcn-vue@latest diff button

---

Reka UI v2 への移行

shadcn-vue は現在、基盤として Reka UI v2（旧 Radix Vue）を使用しています。新しいコンポーネントはすべて Reka UI のプリミティブを使用します。

移行： 既存のプロジェクトは Reka UI v2 に更新してください。公式の移行ガイドを参照してください：shadcn-vue.com/docs/changelog#reka-ui

---

設定

shadcn-vue は components.json を使用して、次の項目を設定します：

• コンポーネントのパス（@/components/ui）
• Utils の場所（@/lib/utils）
• Tailwind 設定のパス
• TypeScript のパス

完全な例： templates/components.json を参照するか、bunx shadcn-vue@latest init で生成してください。

---

Utils ライブラリ

@/lib/utils.ts ファイルは、Tailwind クラスをマージする cn() ヘルパーを提供します：

• 複数の className 文字列を結合します
• clsx + tailwind-merge を使用して競合を解決します

shadcn-vue init によって自動生成されるため、手動でのセットアップは不要です。

---

同梱リソース

テンプレート（templates/）：

• quick-setup.ts - 例を含む Vue/Nuxt 向けの完全なセットアップガイド（190 行）

リファレンス（references/）：

• error-catalog.md - 解決策付きの、文書化された7つの問題すべて（267 行）

---

リファレンスを読み込むタイミング

タスクに応じて、次のリファレンスを読み込んでください：

1. 次の場合は references/error-catalog.md を読み込みます：

   • ユーザーが「component not found」やインポートエラーに遭遇した場合
   • セットアップコマンドが失敗する、または設定の問題が発生した場合
   • Tailwind CSS の変数や TypeScript のパスが壊れている場合
   • トリガーフレーズ：「動作しない」、「エラー」、「失敗する」、「壊れている」

2. 次の場合は references/component-examples.md を読み込みます：

   • ユーザーが「[コンポーネント] はどう実装すればよいですか？」と尋ねた場合
   • 特定のコンポーネントのコピー＆ペースト可能な例が必要な場合
   • フォーム、テーブル、ナビゲーション、またはデータ表示を構築する場合
   • トリガーフレーズ：「例」、「使い方」、「実装」、「コードサンプル」

3. 次の場合は references/dark-mode-setup.md を読み込みます：

   • ダークモードやテーマ切り替えを実装する場合
   • ユーザーが Vue 3 + Vite、Nuxt、または Astro のセットアップに言及した場合
   • テーマ管理のためのコンポーザブルパターンが必要な場合
   • トリガーフレーズ：「ダークモード」、「テーマ」、「ライト／ダーク」、「カラースキーム」

---

他のスキルとの連携

このスキルは、次のスキルと相性よく連携します：

• nuxt-v4 → Nuxt フレームワーク
• tailwind-v4-shadcn → React shadcn/ui を使用した Tailwind v4
• react-hook-form-zod → フォーム検証のパターン（Auto Form に類似）
• tanstack-query → テーブルのデータ取得
• zustand-state-management → 状態管理

---

リソース

リファレンス（references/）：

• component-examples.md - コード付きの50以上のコンポーネント例すべて
• dark-mode-setup.md - ダークモードの完全な実装ガイド
• error-catalog.md - よくあるエラーと解決策

テンプレート（templates/）：

• コンポーネントテンプレートは references/component-examples.md で利用できます

---

安全なインストール

セットアップ中にパッケージをインストールする際は、サプライチェーンセキュリティのベストプラクティスに従ってください：

• インストール後スクリプトをブロックする — npm config set ignore-scripts true（または Bun：デフォルトで無効）
• クールダウン期間 — 新しいパッケージバージョンがコミュニティによって審査されるまで7日間待ちます
• インストール前に監査する — socket package score npm <pkg> を実行するか、socket npm install <pkg> を使用してパッケージを確認します

Socket CLI の統合、クールダウンの設定、ロックファイルの検証、CI による強制適用など、セキュリティ設定の全容については dependency-upgrade スキルを読み込んでください。

追加リソース

公式ドキュメント：

• shadcn-vue ドキュメント：https://shadcn-vue.com
• Reka UI ドキュメント：https://reka-ui.com
• GitHub：https://github.com/radix-vue/shadcn-vue

サンプル：

• コンポーネントのサンプル：https://shadcn-vue.com/examples
• スターターテンプレート：https://github.com/radix-vue/shadcn-vue/tree/main/templates

---

本番環境でのテスト済み：Vue/Nuxt アプリケーション、管理ダッシュボード、コンテンツ管理システム 最終更新日：2025-12-09 トークン削減率：約65%（セットアップとコンポーネントのドキュメントを削減）