shadcn/ui とは？MUI・Chakra との比較で選ぶコンポーネントライブラリ選定ガイド

リード：先月、ある古いプロジェクトを引き継いだとき、package.json を開いて Material-UI 5.x の文字が目に入った瞬間、心がざわつきました。MUI が悪いわけではなく、このプロジェクトは「まったく Material Design に見えない」デザインに仕上げる予定だったからです。また MUI のテーマシステムと「格闘」する日々が始まるのか、と思いました。そのとき頭に浮かんだのが shadcn/ui ——使い終わった瞬間に「これこそ求めていたものだ」と思わず口にした、あのコンポーネントライブラリです。

---

一、shadcn/ui：従来のライブラリではないコンポーネントライブラリ

1.1 Copy & Own の哲学

shadcn/ui はとても面白くて、そもそも npm パッケージではありません。

npm install shadcn-ui のようなコマンドは見かけません。代わりに渡されるのは大量のコンポーネントコードで、それを自分のプロジェクトに直接コピーします。コピーして、貼り付ければ、そのコードはもうあなたのものです。

正直に言うと、最初にこの概念を見たときはかなり懐疑的でした。コードを自分のプロジェクトにコピーするなんて、ぐちゃぐちゃにならないのか、と。

ですが実際に使ってみると、この手法が本当に巧妙だと分かりました。

従来のコンポーネントライブラリのやり方はこうです：パッケージをインストール → コンポーネントをインポート → props と theme でスタイルを設定 → カスタマイズが必要になると「回り道」が始まる——コンポーネントをラップし、スタイルを上書きし、大量のワークアラウンドを書く、という流れです。

shadcn/ui はこのフローをばっさり省きます。何を変えたい？コンポーネントのコードを直接書き換えればいい。コードが自分のプロジェクトの中にあり、「ブラックボックス」がないからです。

1.2 技術アーキテクチャ：三層のケーキ

shadcn/ui の技術スタックは、実のところ三層です。

最下層：Radix UI

これは「スタイルなし」のコンポーネントプリミティブの集まりです。スタイルなしとはどういうことか？振る舞いとアクセシビリティだけを担い、見た目には関与しないということです。たとえば Dialog コンポーネントなら、Radix は次を担当します：

• 開閉状態
• フォーカス管理（Tab キーナビゲーション）
• ARIA 属性（スクリーンリーダー対応）
• キーボード操作（Esc キーで閉じる）

しかしスタイルは？まったくありません。真っ白な状態です。

中層：Tailwind CSS

Radix が骨格を与え、Tailwind が皮膚を与えます。各 shadcn/ui コンポーネントは Tailwind の utility classes でスタイルが書かれています。これらの class を直接書き換えられ、何かを「上書き」する必要はありません。

最上層：あなたの修正

ここが shadcn/ui の真髄です。コンポーネントのコードは手元にあり、好きなように変えられます。API の制約も、props が届かない場所もありません。

// shadcn/ui の Button コンポーネント（コードはあなたのプロジェクトの中にある）
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <button
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)

// 変えたい？直接書き換えればいい
// たとえばカスタムのアニメーションを追加
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <button
        className={cn(
          buttonVariants({ variant, size, className }),
          "transition-all duration-300 hover:scale-105" // そのまま追加
        )}
        ref={ref}
        {...props}
      />
    )
  }
)

分かりましたか？sx prop も styled() も要らず、class を直接書き換えるだけです。

1.3 パフォーマンスの優位：数字は嘘をつかない

shadcn/ui のパフォーマンスの優位は本当に明確です。

Bundlephobia でデータを取ってみました：

コンポーネントライブラリ	バンドルサイズ（minified）	GZIP 後
shadcn/ui（必要分のみ）	約 50〜100KB	約 15〜30KB
Material-UI コアパッケージ	335.3KB	93.7KB
Chakra UI	約 200KB	約 60KB

shadcn/ui はなぜこんなに小さいのか？使うコンポーネントだけをバンドルし、使わないものは一切バンドルに入らないからです。さらに CSS-in-JS のランタイムオーバーヘッドもありません——Tailwind のスタイルはビルド時に処理し終わっています。

実際のプロジェクトで、ある中規模プロジェクトを MUI から shadcn/ui に移行したところ、バンドルサイズが 1.2MB から 600KB ほどまで下がりました。この差は、かなり大きいです。

1.4 代償：保守責任はあなたに

shadcn/ui は完璧ではありません。

コードが手元にあるということは、保守責任も手元にあるということです。

MUI が新バージョンを出してセキュリティの脆弱性をいくつか修正したら、npm update すれば済みます。shadcn/ui はどうか？上流の変更を自分のコンポーネントに手動でマージしなければなりません。

これは、大きいとも小さいとも言える話です。小規模プロジェクトならまだしも、大規模プロジェクトでコンポーネントを多く書き換えていると、上流の更新をマージするのはかなりの肉体労働になります。

それから、shadcn/ui には現状あの「高度なコンポーネント」——DataGrid、Charts、複雑な日付選択——がありません。これらはサードパーティを自分で探すか、自分で書く必要があります。

---

二、従来のコンポーネントライブラリ三巨頭

shadcn/ui は新鋭ですが、まずは「先輩」たちを見ていきましょう。

2.1 Material-UI：企業向けの第一候補

Material-UI（現在は MUI）は 2014 年に登場し、React エコシステムの中で最も老舗のコンポーネントライブラリと言えます。

その強みは明確です：

コンポーネントの豊富さは無敵。 DataGrid、Charts、Date Picker、TreeView、Autocomplete……思いつく企業向けコンポーネントはほぼすべて揃っています。あるプロジェクトでは、MUI の Pro 版コンポーネントだけで開発期間がおよそ 2 か月分節約できたのを覚えています。

デザインシステムが成熟。 Google の Material Design 規格で、Figma ファイルも揃っており、デザイナーと開発者の協働がスムーズです。

エコシステムが充実。 Stack Overflow には MUI の質問が山ほどあり、問題に直面してもたいてい答えが見つかります。公式テンプレートやテーママーケットもあり、リソースが豊富です。

しかし問題も明確です：

バンドルが大きい。 335KB のコアパッケージは、数個のコンポーネントしか使っていなくても、基本パッケージはそこに残ります。Tree-shaking で緩和できますが、根本的には解消できません。

カスタマイズが難しい。 作りたいデザインが Material Design と大きく異なると、かなり苦しくなります。あるプロジェクトでは、デザイナーから渡されたデザイン稿がまったく Material 的でなく、最終的に 1 週間かけてテーマ設定とスタイル上書きを書き、コードが積み重なって保守がどんどん難しくなりました。

Material 風が「ロックされる」。 すべての色とフォントを変えても、あの「Material 感」は完全には消しにくいものです。ボタンのリップル効果、カードの影、入力欄のアニメーション……こうした細部がユーザーに「これは Material Design だ」と告げ続けます。

// MUI の Button - variant と color prop で制御する
<Button variant="contained" color="primary">
  クリックして
</Button>

// 完全にカスタマイズしたい？こう書く必要がある
<Button
  sx={{
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    borderRadius: 3,
    border: 0,
    color: 'white',
    height: 48,
    padding: '0 30px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  }}
>
  カスタムボタン
</Button>

2.2 Chakra UI：開発体験の王者

Chakra UI は後発ですが、開発体験は本当に優れています。

その中心理念： アクセシビリティ（a11y）はデフォルトであって、オプションではない。各コンポーネントに WAI-ARIA サポートが組み込まれ、キーボードナビゲーション、フォーカス管理、スクリーンリーダー対応がすぐに使えます。

開発速度が速い。 Chakra の style props を使えば、HTML 属性を書くようにスタイルを書けます：

// Chakra UI の書き方 - スタイルを props に直接書く
<Box bg="tomato" p={4} borderRadius="md" boxShadow="lg">
  <Text fontSize="xl" fontWeight="bold" color="white">
    Hello World
  </Text>
</Box>

この書き方はプロトタイプ作成がとても速く、基本的に CSS ファイルを書く必要がありません。

テーマシステムがシンプル。 テーマ設定ファイルを 1 つ定義すれば、アプリ全体の色・フォント・間隔が統一されます。ダークモードも一行で済む話です。

ただし限界もあります：

React のみ対応。 Vue や Svelte を使っている？ それなら Chakra は無関係です。

コンポーネントがそれほど多くない。 MUI に比べると、Chakra のコンポーネントライブラリはまだ薄めです。特に複雑なデータ表示系コンポーネントは、サードパーティを自分で探す必要があります。

ランタイムスタイル。 Chakra はランタイムでスタイルを計算するため、多少のパフォーマンスオーバーヘッドがあります。多くのプロジェクトでは感じませんが、超高頻度で更新するシーン（リアルタイムデータの大画面など）ではボトルネックになり得ます。

2.3 Ant Design：中国の企業標準

Ant Design はアリババ発で、中国国内で特によく使われています。

企業向けコンポーネントが充実。 テーブル、フォーム、アップロード、ツリーコントロール……ほぼすべての企業アプリのシーンをカバーします。特にあの Table コンポーネントは機能が桁外れに強く——ソート、フィルタ、ページング、列固定、仮想スクロール、何でも揃っています。

国際化サポートが良い。 20 以上の言語が内蔵され、多言語プロジェクトがとても便利です。

中国語ドキュメントが親切。 これは中国国内のチームにとって大きな利点です。公式ドキュメントは詳細に書かれ、チュートリアルも多く、問題に直面しても中国語コミュニティでたいてい答えが見つかります。

ただしカスタマイズ性は確かに少し劣ります。 Ant Design のデザイン言語は強く、別のスタイルに仕上げるのは容易ではありません。さらにスタイルシステムに Less を使っており、今は多くのプロジェクトが Tailwind に移っているため、統合がやや不格好になります。

---

三、徹底比較：7 つの観点

特徴を語るだけでは不十分なので、具体的な比較を見ていきましょう。

3.1 バンドルサイズの比較

実測データ（Bundlephobia と実プロジェクトを使用）：

コンポーネントライブラリ	コアバンドル	実プロジェクトのバンドル
shadcn/ui	コアなし、必要分のみ	150〜200KB
Material-UI	335KB	300〜400KB
Chakra UI	200KB	180〜250KB
Ant Design	300KB 以上	280〜350KB

shadcn/ui はなぜこんなに小さいのか？

1. コアパッケージがなく、使うコンポーネントだけをバンドルする
2. CSS-in-JS ランタイムがない
3. Tailwind のスタイルはビルド時に purging され、使っていないスタイルはすべて削除される

中規模プロジェクトでは、MUI から shadcn/ui に移行すると、バンドルサイズが平均で 40〜50% 小さくなるのを見てきました。これはモバイル環境では差がかなり大きいです。

3.2 カスタマイズの柔軟性

これは shadcn/ui の最大の強みです。

shadcn/ui： ソースコードが手元にあり、好きなように変えられます。「この props は渡せるか」「あのスタイルはどう上書きするか」といった問題がありません。コンポーネントのコードを直接書き換えればいいのです。

MUI： theme と sx prop でカスタマイズします。機能はかなり強いものの、いつも「回り道」している感覚があります。さらに theme システム自体に学習コストがあります。

Chakra UI： style props はとても柔軟ですが、深いカスタマイズになると制約があります。一部のコンポーネントは内部実装が複雑で、props だけでは対応しきれません。

Ant Design： カスタマイズ性が最も弱いです。テーマ変数はありますが、変えられる範囲は限られます。視覚スタイルを丸ごと入れ替えたい？ 大量のスタイルを書き直す覚悟をしておきましょう。

3.3 開発体験

学習曲線：

• Chakra UI：最も緩やか。ドキュメントが明快で API もシンプル、ひと通り読めばすぐ使えます。
• MUI：中程度。コンポーネントが多く API も多いため、慣れるのに時間が必要です。
• Ant Design：中程度よりやや急。コンポーネントの機能が複雑で、設定項目が多いです。
• shadcn/ui：最も急。Radix のプリミティブを理解し、Tailwind に慣れ、コンポーネントを直接書き換えることにも慣れる必要があります。

ドキュメント品質：

• MUI：ドキュメントが非常に詳細で、例も多く、API ドキュメントが完備しています。
• Chakra UI：ドキュメントが簡潔明快で、例が実用的です。
• Ant Design：中国語ドキュメントが充実し、デザイン規格があります。
• shadcn/ui：ドキュメントは整備中で、前述のものに比べるとまだ薄めです。

コミュニティサポート：

• MUI：コミュニティが最大で、Stack Overflow の質問数が最多、サードパーティリソースも豊富です。
• Ant Design：中国国内のコミュニティが活発で、中国語リソースが多いです。
• Chakra UI：コミュニティは中程度ですが、急速に成長中です。
• shadcn/ui：コミュニティは新しいものの成長が速く、GitHub Stars はすでに MUI に迫っています。

3.4 アクセシビリティ

この点はどれも実は重要で、軽視すべきではありません。

Chakra UI： アクセシビリティが最も優れています。各コンポーネントに WAI-ARIA サポートが組み込まれ、キーボードナビゲーションが充実し、スクリーンリーダーにも優しいです。プロジェクトで a11y 要件が厳しいなら、Chakra が第一候補です。

shadcn/ui： Radix UI ベースで、アクセシビリティも非常に良好です。Radix のプリミティブはそもそも a11y のために設計されており、ARIA 属性もフォーカス管理も行き届いています。

MUI： アクセシビリティも良好で、大半のコンポーネントが WAI-ARIA 規格に準拠しています。

Ant Design： 中程度。基本コンポーネントのアクセシビリティはまずまずですが、一部の複雑なコンポーネントはキーボードナビゲーションが十分ではありません。

3.5 コンポーネントの豊富さ

MUI： 最多。基本コンポーネント + 高度なコンポーネント（DataGrid、Charts、Date Picker、Tree View など）。x-grid や x-date-pickers などの Pro コンポーネントは有料ですが、機能は本当に強力です。

Ant Design： 非常に豊富。Table、Form、Upload などの企業向けコンポーネントが揃い、基本的に十分です。

Chakra UI： 中程度。基本コンポーネントは揃っていますが、高度なコンポーネントは少なめです。必要ならサードパーティを自分で探す必要があります。

shadcn/ui： 最少。現状は基本コンポーネント（Button、Input、Dialog、Table など）のみで、DataGrid や Charts はありません。幸いコミュニティが補充しており、shadcn ベースの拡張ライブラリがいくつかあります。

3.6 長期保守性

これは 2 つの観点で見る必要があります：

自動更新 vs 手動更新：

• MUI / Chakra / Ant Design：npm update で新機能と bug 修正を取得できます。
• shadcn/ui：上流の更新を手動でマージする必要があります。

コントロール権 vs 利便性：

• 従来のコンポーネントライブラリ：利便性は高いものの、コントロール権は限られます。bug に遭遇したりカスタマイズが必要になったら、公式の修正を待つか自分で fork するしかありません。
• shadcn/ui：コントロール権が最も高いものの、保守コストは手元に来ます。利点は自分で bug を直せて、公式を待たなくていいことです。

移行コスト：

あるコンポーネントライブラリから別のものへ移行するコストは、どれも低くありません。だから選定は慎重に行い、選んだら長く使い続けることになります。

3.7 適用シーンの比較

シーン	おすすめ	理由
完全に独自のデザインシステム	shadcn/ui	ソースコードが手元にあり、好きに変えられる
企業向け管理画面	MUI または Ant Design	コンポーネントが豊富で、すぐに使える
高速プロトタイプ / MVP	Chakra UI	開発が速く、ドキュメントが明快
モバイル / パフォーマンス重視	shadcn/ui	バンドルサイズが最小
アクセシビリティ要件が高い	Chakra UI または shadcn/ui	a11y が充実して組み込まれている
デザイナーが Figma を使う	MUI	公式 Figma UI Kit がある

---

四、選定の意思決定フレームワーク

ここまで色々語りましたが、結局どう選ぶのか？ シンプルな意思決定フローをまとめました。

4.1 まず自分に 3 つの質問をする

質問 1：あなたのデザインはどれくらい「独特」か？

• デザインが完全にカスタムで、既存のどのデザインシステムにも似ていない → shadcn/ui
• デザインが Material Design に近い → MUI
• デザインがシンプルでモダンだが、特別なカスタマイズは不要 → Chakra UI
• デザインが企業風で、テーブルやフォームが多い → Ant Design

質問 2：あなたのプロジェクトはどれくらいの規模か？

• 小規模プロジェクト / MVP → Chakra UI または shadcn/ui
• 中〜大規模の企業アプリ → MUI または Ant Design
• パフォーマンス重視（モバイル、高トラフィック） → shadcn/ui

質問 3：あなたのチームは何に慣れているか？

• チームが Tailwind に慣れている → shadcn/ui が自然にフィット
• チームが Material Design に慣れている → MUI
• チームが開発速度を重視 → Chakra UI
• チームが中国国内の企業 → Ant Design

4.2 私個人のおすすめ

新規プロジェクトなら：

今の私のデフォルトの選択は shadcn/ui です。

理由：

• Tailwind はすでに標準になっており、shadcn/ui が完璧にフィットする
• パフォーマンスが最良で、バンドルサイズが最小
• 完全に制御でき、「ブラックボックス」がない
• 長期保守がよりコントロールしやすい（コードが自分の手元にある）

例外：

• プロジェクトに複雑なテーブルやチャートが必要で、チームにサードパーティを探す時間がない → MUI
• プロジェクトが厳格なアクセシビリティを要求し、チームが a11y に不慣れ → Chakra UI
• 中国国内の大規模企業プロジェクトで、中国語ドキュメントとローカルサポートが必要 → Ant Design

古いプロジェクトなら：

移行コストは通常低くないので、明確な理由（パフォーマンス問題、カスタマイズの困難さ、デザインシステムの変更）がない限り、乗り換えはおすすめしません。ただ、本当に乗り換えるなら、shadcn/ui の移行コストは相対的に低めです——コンポーネントが独立しているため、1 つずつ置き換えられるからです。

---

五、移行実践：MUI から shadcn/ui へ

移行を決めたなら、ここに実践的な経験をいくつか紹介します。

5.1 移行の手順

ステップ 1：既存コンポーネントの棚卸し

今どの MUI コンポーネントを使っているかを洗い出します：

• Button、Input、Select などの基本コンポーネント → shadcn にもあるので、そのまま置き換え
• DataGrid、Charts などの高度なコンポーネント → サードパーティを探すか自分で実装する必要がある

ステップ 2：置き換えマッピングの作成

// マッピング表
const componentMap = {
  'Button': 'Button',          // 直接対応
  'TextField': 'Input',        // 名前は違うが機能は類似
  'Dialog': 'Dialog',          // 直接対応
  'Select': 'Select',          // 直接対応
  'Table': 'Table',            // shadcn には基本 Table があるが高度な機能はない
  'DataGrid': '???'            // 代替品が必要（TanStack Table など）
}

ステップ 3：1 つずつ置き換える

一度に全部を替えないこと。まず 1 つのページから始め、問題がないと確認できてから広げます。

ステップ 4：スタイルの移行

MUI のテーマ変数 → Tailwind の設定
sx prop → Tailwind classes

// MUI の書き方
<Button sx={{ mt: 2, mb: 1, backgroundColor: 'primary.main' }}>
  送信
</Button>

// shadcn/ui の書き方
<Button className="mt-8 mb-4 bg-primary">
  送信
</Button>

5.2 注意点

1. スタイルシステムがまったく異なる： MUI は theme object + sx prop、shadcn は Tailwind classes を使います。移行時はスタイルを一度「翻訳」する必要があります。

2. 高度なコンポーネントは代替品を探す： shadcn にはすぐ使える DataGrid がないので、TanStack Table がおすすめです。Charts は Recharts や Chart.js が使えます。

3. アニメーション効果が失われる可能性： MUI のリップル効果やトランジションアニメーションは組み込みですが、shadcn では自分で追加する必要があります。Tailwind の transition や animate- クラスが使えます。

4. テスト！テスト！テスト！ 移行後はすべてのインタラクション、特にフォームやモーダルなど複雑なコンポーネントを必ずテストしてください。

5.3 移行コストの目安

私自身の経験では：

• 小規模プロジェクト（10 ページ以内）：1〜2 週間
• 中規模プロジェクト（10〜30 ページ）：2〜4 週間
• 大規模プロジェクト（30 ページ以上）：4〜8 週間、高度なコンポーネントの複雑さによる

---

六、まとめと展望

ここまで色々語りましたが、私が伝えたかったのは結局 1 つの観点です：

最良のコンポーネントライブラリは存在せず、あなたに最も合ったコンポーネントライブラリがあるだけ。

shadcn/ui の登場は、私たちに新しい選択肢を与えました——「ライブラリを使う」のではなく「コードを所有する」という選択です。これはパフォーマンスとカスタマイズを追求するチームにとって、かなり大きな魅力です。

MUI、Chakra UI、Ant Design もそれぞれに強みがあります。MUI のコンポーネントの豊富さとエコシステムの成熟度、Chakra の開発体験とアクセシビリティ、Ant Design の企業向け能力とローカライズサポート、いずれも確かな強みです。

選択のポイントは： 自分の要件を明確にし、各ライブラリの特徴を理解し、今のプロジェクトに最も合った選択をすることです。

最後に、まだ迷っているなら、私から 1 つ提案があります：

shadcn/ui を試してみてください。

本当に、一度触れてみてください。従来のコンポーネントライブラリとはまったく違う発想だと気づくはずです。あの「コードが自分の手にある」感覚は、なかなか爽快ですよ。

---

参考リソース

公式ドキュメント：

• shadcn/ui 公式ドキュメント
• Material-UI (MUI) 公式ドキュメント
• Chakra UI 公式ドキュメント
• Ant Design 公式ドキュメント

比較記事：

• Chakra UI vs Material UI – UXPin
• Shadcn vs Material UI – shadcnstudio

コミュニティの議論：

• Reddit: What’s your go-to UI library for React in 2025?
• State of JS 2024 – React Libraries

GitHub データ（2025 年 9 月）：

• shadcn/ui: 約 94.6k stars
• Material-UI: 約 96.6k stars
• Chakra UI: 約 39.7k stars
• Ant Design: 約 96.0k stars

---

---

本記事は 2025 年 9 月〜2026 年 3 月のデータと実際の使用経験に基づいて執筆しています。コンポーネントライブラリは急速に発展しているため、最新情報は最新のドキュメントを参照することをおすすめします。