MENU
  1. ホーム
  2. ソフトウェア開発
  3. 【shadcn】Vite環境でのインストールと基本的な使い方

【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
  1. src/index.css 次の内容に置き換える
    (デフォルトのCSSはすべて消すか、別ファイルにバックアップしておく)
@import "tailwindcss";

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

  1. tsconfig.json を編集
{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
  1. IDE のパスを解決するため、ファイルtsconfig.app.jsonにも次のコードを追加します。
{
  "compilerOptions": {
    // ...(デフォルトで存在する設定群)

    /* shadcn用設定 */
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}
Vite設定ファイル 補足

tsconfig.json は、プロジェクト全体のエントリーポイント設定ファイル。
ここで参照する設定ファイルを指定する。

各プロパティの意味：

  • baseUrl
    モジュール解決の基準ディレクトリを指定します。
    "." を指定することで、プロジェクトルートを基準にモジュールを解決できます。
  • paths
    import 文で使用するパスエイリアスを定義します。

この例では次のような置き換えが行われます：

import Foo from "@/components/Foo"

は

./src/components/Foo

と解決されます。

@/* → ./src/* というマッピングを定義したので、src/ 内のファイルを簡単に import できるようになるわけです。

❓ なぜ tsconfig.app.json も編集するのか？

tsconfig.json は参照のルートで、実際にコンパイル対象になるのは tsconfig.app.json（アプリ用）や tsconfig.node.json（Node 用）です。

そのため、compilerOptions を tsconfig.json に追加するだけでは不十分 で、
tsconfig.app.json にも同じ設定（baseUrl と paths）を追加しておく必要があります。

つまり：

  • tsconfig.json に書く → プロジェクト全体の共通設定
  • tsconfig.app.json に書く → アプリケーションコードの解決に実際に反映される
  1. アプリがパスを解決できるように、次のコードを 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
  1. コマンド起動時の質問はそれぞれ以下のように回答
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　を参考に選択

  1. 以下メッセージが出力されていればOK
Success! Project initialization completed.
You may now add components.
shadcn init 時に起こること
  • 設定ファイルcomponents.jsonの追加（詳細については以下参照https://ui.shadcn.com/docs/components-json
  • index.css (@import "tailwindcss";の置き換えを行ったCSSファイル)の更新
    →確認すると、各テーマ設定等が追記更新されていることを確認できます。

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

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

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

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

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

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

おすすめの本：

ソフトウェア開発
  • URLをコピーしました！
目次