shadcn/ui でシンプルにUIを仕上げるガイド

はじめに

shadcn/uiはUIライブラリの中でも癖がなく、かつ必要な分だけ使えるという利点があります。

https://ui.shadcn.com/

“Pick the components you need. Copy and paste the code into your project and customize to your needs. The code is yours.”

構成としては、Radix UIとCSSフレームワークのTailwind CSS を利用して作成されている形です。そのため、Tailwind CSSの知識を使ってデザインを変更することも難しくありません。後述するようにコードをコピーして使うことができるので細かい調整も簡単です。

導入方法

今回はNext.jsを例に挙げて説明します。新規の場合は、以下のようにプロジェクトを作成してください。既存のものに追加する場合は依存関係に注意しましょう。

npx create-next-app@latest my-app --typescript --tailwind --eslint

これでshadcn/uiの準備ができるようになります。

npx shadcn-ui@latest init

以下のような質問が出てきますが、生成されるcomponents.jsonの内容を設定するものであり、後からでも変更は可能です。

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

公式ドキュメントには、この後フォントの設定方法について書かれていますが、日本語中心で特にこだわりがないなら省略しても構わないかと思います。

自動で追加する場合

各コンポーネントページのInstallationを見てみましょう。以下のようなコマンドが記載されており、それを使うだけで導入することができます。

npx shadcn-ui@latest add button

あとはインポートするだけなので最小限の手間で済みます。ただし、自動的に以下のようなファイル構成が設定されます。

.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── ui  //ここが生成される
│   │   ├── alert-dialog.tsx
│   │   ├── button.tsx
│   │   ├── dropdown-menu.tsx
│   │   └── ...
│   ├── main-nav.tsx
│   ├── page-header.tsx
│   └── ...
├── lib
│   └── utils.ts
├── styles
│   └── globals.css
├── next.config.js
├──...

もしこれが適さない場合は次のような手動に近い方法を取るのがおすすめです。なお、機能的に差異はありません。

手動で追加する方法

各コンポーネントページのInstallationでManualを選択しましょう。最初にradix uiの依存関係を導入する場合があります。

npm install @radix-ui/react-slot

あとは自分で好きな場所に、好きな名前でファイルを作って該当のコードを貼り付けましょう。ファイルパスなどを書き換える必要はありますが、こちらの場合でも手軽に取り入れることができます。

実際の使用感について

カバー率は高い

他ライブラリに比べても、あれが足りないといったことは少ない印象です。最近も2段階認証などの数字コードを打つためのコンポーネントInput OTPが追加されました。基礎的な部分までプロジェクト上で書き換えることも可能なので、柔軟な使い方には最適です。

TypeScript対応

Githubで見るとわかるように、基本的にはTypeScriptで構成されたものになっています。型の問題はもちろんですが、自分でカスタムコンポーネントを作成する際の参考としてもかなり有用な内容になっています。

将来性はある

この記事執筆時点（2024/04）でもmainブランチの更新は続いています。先述したように、需要に合わせた新しいコンポーネントも追加されているのも注目したいところです。コードそのものを導入しているので、万が一の場合も自分の手で修正することができます。

ファイル数は多くなりがち

その性質上、要素ひとつにつきファイルをひとつずつ追加することになります。確認すべき情報は増えるので、複数人開発の場合は各メンバーがそれを把握しておく必要があります。また、手軽に共通部分を変更可能できてしまう点はデメリットにもなります。事前に認識を共通化させておくのは必須だと言えます。

まとめ

shadcn/uiは導入の手軽さに比べ、痒いところに手が届くような柔軟さを持っています。自由度が高い分、多人数開発ではある程度ルールなどを決めておく必要があるかもしれません。しかしそれを考慮しても、シンプルながらデザインも整うので、効率はかなり高まるはず。公式ドキュメントも充実しているのでぜひ一度試してみてください。