shadcn/ui（シャドシーエヌ・ユーアイ）とは、React（主にNext.js）向けのUIコンポーネント集です。
ただし、一般的なUIライブラリとは少し考え方が違います。
最大の特徴は、
「コンポーネントをnpmで入れるのではなく、コードを自分のプロジェクトにコピーして使う」
という点です。
公式サイトでボタンやモーダルなどを選ぶと、そのまま使えるコードが表示され、
それを自分のプロジェクトに追加して使います。
一般的なUIライブラリとの違い
よくあるUIライブラリ（MUI、Ant Design、Chakra UIなど）は、
ライブラリをインストールする
決められたデザイン・APIに従って使う
内部の実装はブラックボックス
という形が多いです。
一方、shadcn/uiは、
必要なコンポーネントだけを追加
コードはすべて自分のプロジェクト内に存在
デザインや挙動を自由に編集できる
というスタイルです。
つまり、
「UIライブラリ」よりも「UIの設計図・テンプレート集」に近い存在です。
shadcn/uiの特徴
① コードを“所有”できる
shadcn/uiで追加したコンポーネントは、
すべて自分のプロジェクト内のファイルになります。
そのため、
クラス名を自由に変更できる
処理を追加・削除できる
デザインの微調整がしやすい
といったメリットがあります。
「ライブラリに振り回されないUI」を作れるのが大きな強みです。
② Tailwind CSS前提の設計
shadcn/uiは Tailwind CSS を前提に作られています。
そのため、
bg-background
text-foreground
rounded-md
hover:bg-accent
といったTailwindのクラスを使ってデザインされています。
Tailwindに慣れている人ほど、
**「あ、これ分かる」「直しやすい」**と感じやすいです。
③ デザインが最初から洗練されている
shadcn/uiのコンポーネントは、
余白
角丸
フォーカス時の挙動
アニメーション
などが最初からかなり整っています。
「自分で一から作るとダサくなりがち…」
という人でも、最低限おしゃれなUIがすぐ作れるのが魅力です。
④ Radix UIをベースにしている
内部的には Radix UI というライブラリを使っています。
Radix UIは、
アクセシビリティが高い
キーボード操作やフォーカス管理がしっかりしている
見た目は持たず、挙動だけを提供する
という特徴があります。
shadcn/uiは、
Radix UI（挙動）＋ Tailwind（見た目）
を組み合わせた構成になっています。
shadcn/uiで何が作れる？
shadcn/uiには、例えば以下のようなコンポーネントがあります。
Button（ボタン）
Input / Textarea
Dialog（モーダル）
Dropdown Menu
Tabs
Accordion
Tooltip
Toast（通知）
Table
Form（React Hook Form連携）
管理画面、予約システム、ダッシュボード系のUIと特に相性が良いです。
どんな人に向いている？
shadcn/uiは、特に次のような人に向いています。
Next.js + Tailwindで開発している人
デザインもコードも自分でコントロールしたい人
「とりあえずUIを早く整えたい」人
将来カスタマイズ前提のプロジェクトを作りたい人
逆に、
React初心者でまだTailwindに慣れていない
とにかく設定なしですぐ使いたい
という人には、少しハードルが高く感じるかもしれません。
まとめ
shadcn/uiとは、
コードをコピーして使うUIコンポーネント集
Tailwind CSS前提
デザイン性とカスタマイズ性が高い
Next.jsとの相性が抜群
という特徴を持ったツールです。
「UIライブラリに縛られず、でも一から作るのは大変」
そんな悩みをちょうどよく解決してくれる存在だと言えます。
