先に要点
- 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 に依存パッケージとして入る』</strong>。 後者は <strong> `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 が保証(コードに残る) |
| 主な強み | ` 揃った見た目をすぐ手に入れる』 | ` 自分のデザインで自由に育てる』 |
| 向く案件 | 管理画面 / 既製テーマで十分 | 独自ブランド / 細かい調整 / 規模拡大 |
要点は 揃った見た目をすぐ』 か、自分の見た目で育てる』 か』</strong> の選択です。 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. 案件のフェーズと要件次第』</strong>です。MUI で動いていて困っていない』 なら無理に移行する必要はないですが、デザインの自由度に困っている』 Tailwind を使いたい』 `AI と協業したい』 場合は、新規プロジェクトから shadcn に切り替える価値は大きいです。
Q. Tailwind が必須ですか？
A. はい。 shadcn/ui は Tailwind 前提』</strong>です。Tailwind を使わない』 案件で shadcn を選ぶのはミスマッチで、別の UI ライブラリ(MUI / Chakra UI / Mantine)を検討すべきです。
Q. Radix UI を直接使うのと shadcn を使うのは何が違いますか？
A. shadcn = Radix UI + Tailwind + cva の完成形を提供』</strong>。Radix UI はスタイルなしのヘッドレス UI』 なので、スタイルを書く部分』 がそのまま手間として残ります。shadcn はその スタイル部分の良いテンプレ』 を一気に提供する位置づけです。
Q. アップデートを取り込みたいときはどうすればいいですか？
A. shadcn diff』 コマンド</strong>で、公式コンポーネントとの差分を確認できます。自分の改変を残しつつ、公式の改善を取り込む』 を手で行う作業です。`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. 公式の方針として ならない予定』</strong>です。コピペ前提』 が思想の中心なので、従来型 UI ライブラリと同じ』 になる予定はありません。公式が提供する CLI を通して、より便利にコピーできる』 方向の進化が続いています。