先に要点
- shadcn/ui は 「npm 経由でインストールする UI ライブラリ」 ではなく、CLI で自分のコードベースに直接コンポーネントをコピーする UI 集。「Tailwind CSS + Radix UI + class-variance-authority」 をベースにしている。
- 提供されるのは Button / Dialog / Form / Table / Combobox / Toast / Sheet / Menu / Calendar / ... など、Web アプリでよく使う部品が一通り。「npx shadcn add button」 でファイルが直接プロジェクトに追加される。
- 最大の特徴は 自分のコードとして所有する こと。色 / 余白 / ロジック / アクセシビリティを自由に直せる。「UI ライブラリのデザインに縛られない」 のが MUI / Chakra UI との大きな違い。
- [v0](/articles/what-is-v0-vercel-ai-ui-generator-usage) や Vercel エコシステムの事実上の標準 UI で、AI による UI 生成と非常に相性が良い。「shadcn を採用 = 現代的な React UI のデファクトに乗る」 に近い距離感。
「shadcn/ui ってよく聞くけど、結局 MUI と何が違うの？」 「インストールしない UI ライブラリって意味がわからない」 「v0 で出てくるコードが shadcn ベースなのはなぜ？」 ── 2023 年から急速に存在感を増した shadcn/ui は、「UI ライブラリの常識を覆した」 と言われるくらい設計思想が独特です。
ざっくり言うと、shadcn/ui は ` UI コンポーネント1個ごとに、CLI で自分の 「components/ui」 にファイルをコピーしてもらう」 ライブラリ です。 「 自分のコードベースの一部になる」 ので、「色をブランドに合わせる」 「挙動を案件用に変える」 が 「自分のコードを書き換える」 だけで完結します。
この記事では、2026 年 5 月時点の shadcn/ui を、仕組み・他 UI ライブラリとの違い・基本の使い方・採用判断軸 の順に整理します。 仕様は活発に変化しているので、最終確認は 公式 を見るのが安全です。
shadcn/ui の核 — 「インストールしない UI ライブラリ」
shadcn/ui が他と決定的に違うのは、npm 依存として持たない ことです。
# 普通の UI ライブラリ
npm install @mui/material
# shadcn/ui
npx shadcn@latest add button
前者は node_modules に依存パッケージとして入る。 後者は 「components/ui/button.tsx」 というファイルが自分のリポジトリに直接生成される。
所有権が自分にある
生成された 「button.tsx」 は 普通の自分のコード。色を変えたい、ロジックを変えたい、アクセシビリティを足したい、全部 「自分のコードを書き換える」 だけで済む。
バージョンアップに振り回されない
「 npm パッケージのアップデートで挙動が変わって動かなくなった」 が原則的に起きない。「コピーした時点の実装」 が、自分が変えるまでずっと残る。
必要な分だけ取り込む
「 全部入りライブラリ」 ではなく、「使う部品だけ追加」。バンドルサイズも 「本当に使う分」 だけ。
本質はテンプレ集
「 中身は Radix UI + Tailwind + class-variance-authority(cva)で書かれた、品質の高いテンプレートコード」。「自分で書くと面倒なやつ」 を肩代わりしてくれる。
「UI ライブラリは npm からインストールするもの」 という常識を覆したのが、shadcn/ui の最大の発明です。
基本の使い方
最小例で雰囲気をつかみます。
# 初期化(Tailwind + 設定ファイル)
npx shadcn@latest init
# コンポーネントを追加
npx shadcn@latest add button card dialog form
// 使うとき
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
export function Example() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="default">開く</Button>
</DialogTrigger>
<DialogContent>
<p>shadcn のダイアログです</p>
</DialogContent>
</Dialog>
);
}
「init」
Tailwind の設定、「components.json」 のスキーマ、「lib/utils.ts」 などのベースをセットアップ。「Next.js / Vite / Astro / Remix / Tanstack Start」 など主要構成をサポート。
「add」
1コンポーネントを追加。「components/ui/」 配下に 「.tsx」 ファイルが置かれる。`必要な依存(「@radix-ui/react-dialog」 等)」 は自動で npm install される。
テーマ変数
「globals.css」 に 「--primary」 「--background」 などの CSS 変数が定義される。これを書き換えれば、すべての shadcn コンポーネントの色が一斉に変わる。
cva と Variants
「class-variance-authority」 を使って、「variant="primary」 「size="lg」 のような Variant が 「tv-style」 で書かれている。新しい Variant を追加するのは1行追加するだけ。
`CLI を3回叩いて、「import」 して使うだけ」 が、「コピペテンプレ」 という思想の体感を一言で表します。
構成要素の理解 — 「下にある 3 つの実装」
shadcn/ui の各コンポーネントは、3つのライブラリの上に書かれています。
①Radix UI(Radix Primitives)
「 アクセシビリティ・キーボード操作・フォーカス管理が完璧」 な ヘッドレス UI ライブラリ。「スタイルは持たないが、見えない部分が全部正しく動く」。shadcn の 「挙動」 の責任者。
② Tailwind CSS
「 クラスベースのスタイリング」。shadcn はテーマを CSS 変数で持ち、Tailwind ユーティリティクラスで配色 / 余白を表現する。Tailwind v4 対応も進んでいる。
③ class-variance-authority(cva)
「 Variant の組み合わせから class 文字列を生成する」 ライブラリ。「variant: 'primary' size: 'lg'」 から正しい Tailwind クラスが返る。コンポーネントの API を綺麗に保つ役。
この3つの理解が前提
shadcn コンポーネントを 「読む / 改変する」 ためには、「Radix の振る舞い」 「Tailwind の class」 「cva の Variant」 の知識が必要。「完全にブラックボックス」 として使うものではない。
`shadcn = 「これらを使って書かれた良いテンプレ集」」 という理解を持つと、「なぜこういう実装になっているか」 を読み解きやすくなります。
他の UI ライブラリとの比較
「MUI / Chakra UI / Mantine」 との違いを表で並べます。
| 軸 | MUI / Chakra UI / Mantine | shadcn/ui |
|---|---|---|
| 配布形態 | npm 依存パッケージ | CLI でコピー |
| 所有権 | ライブラリ | 自分のコード |
| カスタマイズ | テーマ機能 / プロップス経由 | コードを直接書き換え |
| バージョン管理 | パッケージのバージョン | コピーした時点で固定 |
| スタイリング | 独自(Emotion / sx prop / CSS-in-JS) | Tailwind |
| アクセシビリティ | ライブラリ側で保証 | Radix UI が保証(コードに残る) |
| 主な強み | 「 揃った見た目をすぐ手に入れる」 | 「 自分のデザインで自由に育てる」 |
| 向く案件 | 管理画面 / 既製テーマで十分 | 独自ブランド / 細かい調整 / 規模拡大 |
要点は 「揃った見た目をすぐ」 か、「自分の見た目で育てる」 か の選択です。 shadcn は 「育てる」 派にとってほぼ理想形で、「MUI 的なロックインに疲れた」 開発者からの支持を集めました。
なぜ AI 時代に主流になったか
shadcn/ui は v0 / Cursor / GitHub Copilot などの AI コーディング と非常に相性が良いです。
AI が読みやすい
「 普通の React コード」 が 「components/ui/」 にある。「AI が UI を生成するとき、ライブラリのドキュメントを参照する必要がない」。
v0 の標準出力
[v0](/articles/what-is-v0-vercel-ai-ui-generator-usage) が生成するコードは 「shadcn/ui 前提」。「v0 → shadcn 既存プロジェクト」 にコピペで動く確率が圧倒的に高い。
MCP / 命令でレジストリ追加
「 shadcn registry」 という仕組みで 「公式 shadcn 以外のコンポーネント集も同じ CLI で追加できる」。AI からの提案も 「npx shadcn add ...」 という形で実行しやすい。
改変前提
「 AI が出したコードをそのまま自分のコードベースに足す」 のが shadcn の文化と一致する。「AI 出力 + 人の改変 = 最終形」 という流れがスムーズ。
「React UI のデファクトが MUI から shadcn に移った」 と言われるほどの変化が、ここ数年で起きました。
いつ shadcn/ui を選ぶか
採用判断の目安を整理します。
向いている
① 新規 React 案件、② 独自ブランドで UI を作りたい SaaS / Web、③ AI で UI を生成したい開発者、④ Tailwind 採用済みプロジェクト、⑤ ロックイン回避を重視。
向かない
① Tailwind を採用していない / したくないプロジェクト(Tailwind 前提)、② 完全に既製テーマで 「揃った見た目」 だけ欲しい(MUI のほうが速い)、③ React 以外(他フレームワーク向けの shadcn ポートはあるが本家より発展途上)。
既存プロジェクトへの段階導入
「 新しいページから shadcn を使う」 で十分回る。「既存の MUI ベースを一気に置き換える」 必要はない。
「React + Tailwind」 なら、ほぼ無条件で導入候補に入る存在になっています。
どこで詰まりやすいか
便利な反面、現場で踏みやすい注意点も整理します。
①コードが自分のリポジトリに増える
「 ライブラリにあったら 1KB の話」 が 「自分のコード 100 行」 になる。リポジトリのコード行数は増える。「コードを読むのが苦手なチーム」 では負担になる可能性。
② アップデート追従
「 shadcn 公式コンポーネントが更新された」 ときに、「既にコピーした自分のコード」 には反映されない。「差分を手動で取り込む」 必要がある(「shadcn diff」 機能あり)。
③ Tailwind の知識が必須
「 色を変える」 「余白を調整」 が 「Tailwind クラスを書き換える」 になる。「Tailwind が嫌い」 なメンバーがいると協業が辛い。
「コピペしたコードのオーナーは自分」 という感覚を持ち、「コードの量が増える」 ことを前向きに受け入れられるかが、shadcn を快適に使えるかの分かれ目です。
AI 時代の shadcn/ui
AI 連携で shadcn/ui の役割はさらに大きくなっています。
プロンプトに 「shadcn で」 と書ける
「 この機能の UI を shadcn コンポーネントで」 と AI に指示するだけで、「Tailwind + Radix ベースの実装」 が返ってくる。プロンプトのトークン消費が少なく済む。
独自レジストリ
「 社内の shadcn registry」 を立てれば、AI に 「この社内コンポーネントを使え」 と教えやすい。「AI 出力の品質を組織として担保する」 機構として有効。
フィードバックループ
「 AI が出した shadcn コードを実装に組み込む → 触って気付いた改善を AI に伝える → 改善版を出力」 のループが回しやすい。
`shadcn は AI 時代の React UI 開発の 「共通言語」 になりつつある」 という現状認識でほぼ間違いありません。
shadcn/ui に関するよくある質問
Q. shadcn/ui は商用利用できますか？
A. はい。MIT ライセンスで自由に商用利用できます。「自分のコードベースにコピーしたら、それは自分のコード」 という思想なので、ライセンス上の制約はほぼありません。
Q. MUI から shadcn に移行する価値はありますか？
A. 案件のフェーズと要件次第です。「MUI で動いていて困っていない」 なら無理に移行する必要はないですが、「デザインの自由度に困っている」 「Tailwind を使いたい」 「AI と協業したい」 場合は、新規プロジェクトから shadcn に切り替える価値は大きいです。
Q. Tailwind が必須ですか？
A. はい。shadcn/ui は Tailwind 前提です。「Tailwind を使わない」 案件で shadcn を選ぶのはミスマッチで、別の UI ライブラリ(MUI / Chakra UI / Mantine)を検討すべきです。
Q. Radix UI を直接使うのと shadcn を使うのは何が違いますか？
A. shadcn = Radix UI + Tailwind + cva の完成形を提供。Radix UI は 「スタイルなしのヘッドレス UI」 なので、「スタイルを書く部分」 がそのまま手間として残ります。shadcn はその 「スタイル部分の良いテンプレ」 を一気に提供する位置づけです。
Q. アップデートを取り込みたいときはどうすればいいですか？
A. 「 shadcn diff」 コマンドで、公式コンポーネントとの差分を確認できます。「自分の改変を残しつつ、公式の改善を取り込む」 を手で行う作業です。「AI に diff を見せて統合させる」 という運用も増えています。
Q. shadcn/ui を学ぶ最短ルートは？
A. ① 新規 Next.js プロジェクトで 「npx shadcn init」、② 「add button card form」 で3コンポーネント追加、③ 1つを実際に改変してブランド色に変える、④ v0 で生成したコードを取り込んでみる、の4ステップが速いです。「触れば30分でわかる」 のが shadcn の良さなので、まず動かすのが近道です。
Q. shadcn は今後 npm パッケージになりますか？
A. 公式の方針として ならない予定です。「コピペ前提」 が思想の中心なので、「従来型 UI ライブラリと同じ」 になる予定はありません。「公式が提供する CLI を通して、より便利にコピーできる」 方向の進化が続いています。