Tailwind CSS ベースの UI コンポーネント”コレクション” shadcn/ui を導入してみる

こんにちは。Gaji-Labo 横田です。前回 Tailwind CSS ベースの UI コンポーネントライブラリ daisyUI を紹介しました。今回は同じく Tailwind CSS ベースでありながら「コンポーネントライブラリではない」shadcn/ui を紹介します。

shadcn/ui とは

shadcn/ui はReact の UI コンポーネントライブラリ Radix UI とTailwind CSS をベースに利用した再利用可能なコンポーネントのコレクションです。
公式ドキュメントには以下の記載があります。

This is NOT a component library. It’s a collection of re-usable components that you can copy and paste into your apps.

https://ui.shadcn.com/docs

「コンポーネントライブラリではない」と明記されています。どういうことかというと、使いたい UI コンポーネントごとにコマンド実行でインストールして使う/カスタマイズするので、例えば前回紹介した daisyUI や有名どころの MUI といったライブラリのような依存関係を持たないのが特長です。

• ベースとなる Radix UI と Tailwind CSS にのみ依存関係がある
• ライブラリのような依存関係がないので、shadcn/ui 本体のアップデートに影響しない。 shadcn/ui のバージョンアップや更新内容を気にしなくてよいし、捨てやすい
• コンポーネントをインストールすると CLI で src/components/ui/button.tsxのようにコンポーネントファイルを自動生成してくれる
• コードを自由にカスタマイズすることができる
  • import するだけでスタイルが適用されたコンポーネントを使用できる
  • コンポーネントファイルの中で設定されている variant や props であらかじめ用意されたパターンを使用できる
  • className で Tailwind CSS の class を付与した拡張ができる
  • コンポーネントそのものをカスタマイズすることができる
  • 状態や挙動は Radix UI で実装されており、Tailwind CSS で見た目をカスタマイズできる
• 拡張のしやすさから、自作した UI コンポーネントとも共存させやすい

このような利点が挙げられそうです。

shadcn/ui のインストール

Next.js 環境を前提として、init コマンドの実行で shadcn-ui をセットアップします。

npx shadcn-ui@latest init

Node.js のバージョンは v18.x でうまくいきました。それ以前のバージョンや v20.x 以降だとエラーになるようです。（2023年12月現在）
issue: https://github.com/shadcn-ui/ui/issues/2122

CLI で色々聞かれます。

✔ Would you like to use TypeScript (recommended)? … no / yes
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … src/app/globals.css
✔ Would you like to use CSS variables for colors? … no / yes
✔ Where is your tailwind.config.js located? … tailwind.config.ts
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Are you using React Server Components? … no / yes
✔ Write configuration to components.json. Proceed? … yes

Where is your global CSS file? では、 Next.js の App ディレクトリ を使用する場合には、デフォルトの app/globals.css ではなく src/app/globals.css を指定する必要があり注意点です。
issue: https://github.com/shadcn-ui/ui/issues/746

Where is your tailwind.config.js located? では、tailwind.config の拡張子を .ts に変更しておきます。

これで初期設定は完了です。導入も簡単ですね。
/components.json ファイルが shadcn-ui の設定ファイルとなります。

終わりに

今回は 「コンポーネントライブラリではない」 shadcn/ui の特長や利点と初期設定の方法を紹介しました。次回はインストールしたコンポーネントのコードを眺めながら、利点に挙げたトピックを見ていきたいと思います。