【shadcn】Vite環境でのインストールと基本的な使い方

この記事では、 shadcn/ui の概要と、Vite環境でのインストール手順、基本的な使い方をまとめます。

概要: shadcn/ui とは？

shadcn/ui は、Tailwind CSS をベースに構築されたUI コンポーネントライブラリです。

shadcn/ui公式サイト：

あわせて読みたい

The Foundation for your Design System - shadcn/ui A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.

特徴

• Radix UI による高品質なアクセシビリティ
• Tailwind CSS による完全なカスタマイズ性
• TypeScript 対応済みで、型安全な開発が可能
• コンポーネントはプロジェクト内にインストールされる＝ソースコードが手元にある
• テーマ（ライト/ダーク）切替やカスタマイズが容易

インストール手順（Vite）

基本的には公式ドキュメント通りに進行：https://ui.shadcn.com/docs/installation/vite

1. Viteプロジェクトを作成

まずはViteプロジェクトを作成します。（作成済みなら次へ）
必要に応じて、フォルダ構成やCSSファイル等の整理もここで行っておくと良いかもしれません。

npm create vite@latest

※この記事では、TypeScript実装のReact環境を選択しています。

2. TailWindCSSの追加

1. viteプロジェクトフォルダへ移動し、tailwindcssをインストール

npm install tailwindcss @tailwindcss/vite

2. src/index.css 次の内容に置き換える
   (デフォルトのCSSはすべて消すか、別ファイルにバックアップしておく)

@import "tailwindcss";

index.css の @import "tailwindcss"; は、追記ではなく置き換えによる対応を推奨します。
shadcnの初期化 (init 実行）時に、内容が更新されるため、既存CSSに同名のクラスがあると構成がずれたりして後で大変です

3. tsconfig.json を編集

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

4. IDE のパスを解決するため、ファイルtsconfig.app.jsonにも次のコードを追加します。

{
  "compilerOptions": {
    // ...(デフォルトで存在する設定群)

    /* shadcn用設定 */
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

import Foo from "@/components/Foo"

./src/components/Foo

5. アプリがパスを解決できるように、次のコードを vite.config.ts に追加

import path from "path"
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from "@tailwindcss/vite"   

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),        // React の JSX/TSX を変換・最適化する
    tailwindcss(),  //tailwindcss
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

3. shadcn セットアップ

1. 以下コマンドを実行してshadcnプロジェクトをセットアップ

npx shadcn@latest init

2. コマンド起動時の質問はそれぞれ以下のように回答

Need to install the following packages:
shadcn@2.10.0
Ok to proceed? (y) y

-> パッケージインストールの確認。 「y」を入力し、続行でOK

? Which color would you like to use as the base color? » - Use arrow-keys. Return to submit.
>   Neutral
    Gray
    Zinc
    Stone
    Slate

→https://ui.shadcn.com/colors　を参考に選択

3. 以下メッセージが出力されていればOK

Success! Project initialization completed.
You may now add components.

shadcnコンポーネントの導入・使用

以降は、使用したいコンポーネントを適宜追加・利用していきます。

基本的な導入・使用手順：

1. 使いたいコンポーネントのドキュメントページを確認：公式Docコンポーネント一覧
2. ドキュメントページ「Installation」セクションに記載のコマンドを実行して導入
   例：Buttonの場合、

npx shadcn@latest add button

　※ shadcn コンポーネントは、scr/components/ui の中に追加されていきます。
（ファイル形式で追加されるため、ここでカスタマイズも可能です）

3. ドキュメントページ「Usage」セクションで、基本的な用法が確認できます。