Vite で React の環境構築の記事で作成した React に shadcn/ui をセットアップしました。

手順

Tailwind が必要なのでインストールします。

1
2

$ pnpm i -D tailwindcss postcss autoprefixer
$ pnpx tailwindcss init -p

Tailwind 関連の初期設定を行います。 公式サイトにあるように tailwind.config.js と ./src/index.css を編集します。

shadcn/ui ではインポートパスの解決のため tsconfig.json に以下を追記します。

1
2
3
4
5

  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }

shadcn/ui の設定ファイルを生成します。

1

$ pnpx shadcn@latest init

以下項目が聞かれるので適当に選択します。後から components.json を変えることで変更可能です。

1
2
3

Which style would you like to use? › Default
Which color would you like to use as base color? › Neutral
Do you want to use CSS variables for colors? › no / yes

サンプルでボタンを追加などして動作確認してみます。

参考サイト