125k

Vite

PreviousNext

Vite 用に shadcn/ui をインストールして構成します。

開始地点に合うセットアップ方法を選択してください。

Use shadcn/create

プリセットを作成し、Vite プロジェクトのコマンドを生成します。

Use the CLI

ターミナルから新しい Vite プロジェクトを直接作成します。

Existing Project

既存の Vite プロジェクトで shadcn/ui を手動構成します。

Use shadcn/create

プリセットを作成する

shadcn/createを開き、プリセットを視覚的に作成します。スタイル、色、フォント、アイコンなどを選択してください。

shadcn/create を開く

プロジェクトを作成する

Create Project をクリックし、パッケージ マネージャーを選択して、生成されたコマンドをコピーします。

生成されたコマンドは次のようになります。

pnpm dlx shadcn@latest init --preset [CODE] --template vite

実際のコマンドには、選択した --base、--monorepo、--rtl などのオプションが含まれます。

コンポーネントを追加する

プロジェクトに Card コンポーネントを追加します。

pnpm dlx shadcn@latest add card

モノレポを作成した場合は apps/web からコマンドを実行するか、リポジトリのルートからワークスペースを指定します。

pnpm dlx shadcn@latest add card -c apps/web

上のコマンドで Card コンポーネントがプロジェクトに追加されます。次のようにインポートできます。

src/App.tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
 
function App() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>プロジェクト概要</CardTitle>
        <CardDescription>
          Vite アプリの進捗と最近のアクティビティを確認します。
        </CardDescription>
      </CardHeader>
      <CardContent>
        デザイン システムの準備ができました。次のコンポーネントの構築を始めましょう。
      </CardContent>
    </Card>
  )
}
 
export default App

モノレポを作成した場合は apps/web/src/App.tsx を更新し、代わりに @workspace/ui/components/card からインポートします。

Use the CLI

プロジェクトを作成する

init コマンドを実行して新しい Vite プロジェクトを作成します。プロンプトに従って、ベース、プリセット、モノレポなどを構成します。

pnpm dlx shadcn@latest init -t vite

モノレポ プロジェクトでは --monorepo フラグを使います。

pnpm dlx shadcn@latest init -t vite --monorepo

コンポーネントを追加する

プロジェクトに Card コンポーネントを追加します。

pnpm dlx shadcn@latest add card

モノレポを作成した場合は apps/web からコマンドを実行するか、リポジトリのルートからワークスペースを指定します。

pnpm dlx shadcn@latest add card -c apps/web

上のコマンドで Card コンポーネントがプロジェクトに追加されます。次のようにインポートできます。

src/App.tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
 
function App() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>プロジェクト概要</CardTitle>
        <CardDescription>
          Vite アプリの進捗と最近のアクティビティを確認します。
        </CardDescription>
      </CardHeader>
      <CardContent>
        デザイン システムの準備ができました。次のコンポーネントの構築を始めましょう。
      </CardContent>
    </Card>
  )
}
 
export default App

モノレポを作成した場合は apps/web/src/App.tsx を更新し、代わりに @workspace/ui/components/card からインポートします。

Existing Project

プロジェクトを作成する

新しい Vite プロジェクトが必要な場合は、先に作成して React + TypeScript テンプレートを選択します。既存のプロジェクトがある場合は、この手順を省略してください。

pnpm create vite@latest

Tailwind CSS を追加する

プロジェクトに Tailwind CSS がすでに構成されている場合は、この手順を省略してください。

pnpm add tailwindcss @tailwindcss/vite

src/index.css の内容を次のものに置き換えます。

src/index.css
@import "tailwindcss";

tsconfig.json を編集する

プロジェクトに @/* エイリアスがすでに構成されている場合は、この手順を省略してください。

Vite は TypeScript の構成を複数のファイルに分割します。tsconfig.json と tsconfig.app.json の compilerOptions セクションに、baseUrl と paths プロパティを追加します。

tsconfig.json
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.app.json を編集する

エディターがインポートを解決できるよう、同じエイリアスを tsconfig.app.json に追加します。

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

vite.config.ts を更新する

@types/node をインストールし、Vite が @ エイリアスを解決できるよう vite.config.ts を更新します。

pnpm add -D @types/node
vite.config.ts
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

CLI を実行する

shadcn の init コマンドを実行して、プロジェクトに shadcn/ui を設定します。

pnpm dlx shadcn@latest init

コンポーネントを追加する

これでプロジェクトにコンポーネントを追加できるようになりました。

pnpm dlx shadcn@latest add button

上のコマンドで Button コンポーネントがプロジェクトに追加されます。次のようにインポートできます。

src/App.tsx
import { Button } from "@/components/ui/button"
 
function App() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>クリック</Button>
    </div>
  )
}
 
export default App