フロントエンドのUIコンポーネントライブラリは進化のスピードが速く、選択肢も膨大です。「とりあえず有名どころ」で選ぶと、作りたいものとライブラリの得意分野がズレて後悔することも少なくありません。
この記事では、2026年8月時点でおすすめできるUIコンポーネントライブラリを、「何を作りたいか」の目的別に5つのカテゴリへ整理して紹介します。
ひとつだけ、最近のライブラリ選びで新しく効くようになった観点に触れておくと、AIコーディングツールとの相性です。Claude CodeやCursor、v0のようなツールにUIを書かせる開発スタイルが一般化した結果、「AIがそのライブラリをよく知っているか」「MCP(Model Context Protocol)サーバーやllms.txtで、AIエージェントに正確なコンポーネント情報を渡せるか」が、生成コードの品質と開発速度を左右するようになりました。実際、本記事で紹介するライブラリの多くが公式MCPサーバーの提供を始めています。そこで各ライブラリの紹介には、AI対応状況もひとこと添えています。
この記事で紹介するライブラリ
| カテゴリ | ライブラリ |
|---|---|
| 1. 業務アプリ・SaaSの定番「シンプル系」 | shadcn/ui、HeroUI、Untitled UI、coss ui(旧Origin UI)、daisyUI |
| 2. ダッシュボード・データ可視化系 | Tremor |
| 3. デザインシステムの土台「ヘッドレス系」 | Base UI |
| 4. LP・マーケサイト向け「アニメーション系」 | Magic UI、Aceternity UI、React Bits |
| 5. AI駆動開発と相性のいい「レジストリ系」 | 21st.dev、Kibo UI |
カテゴリ1: 業務アプリ・SaaSの定番「シンプル系」
派手さよりも、整った見た目・アクセシビリティ・保守性。管理画面、社内ツール、B2B SaaSといった「ビジネスの現場」でそのまま使えるライブラリたちです。
1. shadcn/ui — 迷ったらまずこれ
いまや業務系Reactアプリのデファクトスタンダードです。npmパッケージとして「インストール」するのではなく、CLI(npx shadcn add button など)でコンポーネントのソースコードを自分のプロジェクトにコピーして所有するのが最大の特徴。ブラックボックスがないため、細部まで自由に改変できます。Button・Dialogといった基本部品から、Data Table、Sidebar、Chart、Calendarまで業務アプリに必要な部品が一通り揃っています。
- コードを所有できる: 取り込んだ後は自分のコードなので、デザイン調整も機能拡張も自由
- Tailwind CSS + ヘッドレスUIの王道構成: 2026年7月から新規プロジェクトの土台はBase UIがデフォルトに(従来のRadix UIも引き続き選択可能)
- AI対応 ◎: v0をはじめAIコーディングツールが最も得意とするライブラリ。公式MCPサーバーやレジストリの仕組みも整備済み
最適な用途: 業務アプリ・SaaS全般、自社デザインシステムの出発点。GitHubスターは12万超で、エコシステム(後述のレジストリ系ライブラリ群)の中心でもあります。
2. HeroUI(旧NextUI) — パッケージ導入で手早く美しく
URL: https://heroui.com
「NextUI」の名前で覚えている方も多いはず。HeroUIにリブランドされ、2026年3月リリースのv3でゼロから書き直されました。React Aria(アクセシビリティ基盤)+ Tailwind CSS v4の構成で、Webは75以上のコンポーネント、さらにReact Nativeライブラリ(37コンポーネント)も提供され、Webとモバイルを一つのデザインシステムでカバーできます。
- デフォルトが美しい: デザイナー不在のチームでも、そのまま使って「それっぽい」画面になる
-
モダンなAPI:
Card.HeaderのようなCompound Component構成で、Providerのラップも不要。React 19 / Next.jsにそのまま対応 - AI対応 ○: llms.txt、ドキュメント検索API、公式MCPパッケージを提供
最適な用途: コピペ方式より「パッケージを入れてすぐ使う」従来型が好みのチーム。スピード重視のスタートアップや社内向けSaaSに。無料のOSS版に加え、有料のPro(テンプレート集)もあります。
3. Untitled UI React — Figmaとコードをまとめて揃える
URL: https://www.untitledui.com
Figma UIキットとして世界的に有名なUntitled UIのReact版です。React Aria + Tailwind CSSで作られたコピペ型のコンポーネント集で、専用CLIから必要な部品だけ追加できます。ニュートラルで洗練された見た目は、顧客向けのB2B SaaSにそのまま使えるクオリティです。
- Figmaキットと対: デザイナーがFigmaで組んだ画面と、開発側のコンポーネントがそのまま対応する
- アクセシブルな土台: React Ariaベースでキーボード操作・スクリーンリーダー対応が組み込み済み
- AI対応 ○: MCP対応を打ち出しており、AI駆動のワークフローを意識した設計
最適な用途: デザイナーと分業しながら顧客向けプロダクトを作るチーム。無料版+有料版の構成です。
4. coss ui(旧Origin UI) — Base UI時代のコピペ部品集
URL: https://coss.com/ui
数百規模のコピペ部品を揃えた定番コレクション「Origin UI」が、2026年に「coss ui」としてリニューアルしました。土台もBase UIに移行し、「Built for developers and AI」を掲げる通り、AIコーディングを前提にした設計になっています。508個の「particles」と呼ばれる部品には、Autocomplete、Number Field、OTP Field、Date Pickerなど、フォーム・入力系の凝った部品が特に充実しています。
- 入力部品の宝庫: 標準のshadcn/uiには無いような、業務画面で欲しくなる入力部品が揃う
- Base UIベース: shadcn/uiの新しい既定と同じ土台なので、時流に沿った構成
- AI対応 ○: 「開発者とAIのために」を明示したライブラリ設計
最適な用途: フォームだらけの業務画面・管理画面。shadcn/ui使いが「あと一歩足りない部品」を探しに来る場所です。無料(MIT)。
5. daisyUI — React以外でも使える最速セットアップ
URL: https://daisyui.com
Tailwind CSSのプラグインとして動く、少し毛色の違うライブラリです。btn や card といったセマンティックなクラス名を追加してくれるので、大量のユーティリティクラスを書かずに済みます。68コンポーネント・600以上のユーティリティクラスを収録し、Pure CSSでJS依存ゼロ。React専用ではなく、Vue、Svelte、Rails、Laravel、HTMXなど、どんな構成でも動きます。
- フレームワーク非依存: サーバーサイドレンダリング中心の構成やReact以外の案件でも使える
- テーマが豊富: 30種類以上の組み込みテーマ+テーマジェネレーターで、ダークモード対応も一瞬
- AI対応 ○: 公式MCPサーバー、llms.txt、Claude Code / Cursor向けプラグインまで揃える力の入れよう
最適な用途: 社内ツールやMVPを最速で形にしたいとき、そしてReact以外の技術スタックのプロジェクト。GitHubスター4万超の人気ぶりです。無料(MIT)。
カテゴリ2: ダッシュボード・データ可視化系
BI画面・分析ダッシュボード・SaaSのメトリクス画面など、「データを見せる」ことに特化したライブラリです。
6. Tremor — ダッシュボード構築の決定版
チャートとダッシュボードに特化したReact + Tailwind CSSのライブラリで、現在はVercelの傘下にあります。ライン・バー・エリア・ドーナツといったチャートに加え、KPIカード、スパークライン、トラッカー、データバーなど「メトリクス画面の語彙」がそのまま部品になっているのが特徴。Vercel傘下入りに伴い、有料だったTremor Blocks(300以上のセクション集)と全テンプレートが無料のオープンソースになりました。
- 35以上のコンポーネント + 300以上のブロック: チャート群からKPIグリッド、フィルターバーまでコピペで完成
- 導入方法が選べる: shadcn/ui同様のコピペ方式と、手軽なnpmパッケージの両対応
- Rechartsベース: 定番チャートライブラリの上に、統一感あるデザインを被せた構成
最適な用途: BI・分析ダッシュボード、SaaSの管理画面のメトリクス表示。なお、shadcn/ui本体にもRechartsベースの公式Chartコンポーネントがあるので、「shadcn/uiで作った画面に数個チャートを足すだけ」ならそちらで足りることもあります。使い分けの目安は「画面の主役がデータかどうか」です。
カテゴリ3: デザインシステムの土台「ヘッドレス系」
見た目(スタイル)を持たず、挙動とアクセシビリティだけを提供する低レイヤーのライブラリです。自社デザインシステムをゼロから作るチーム向け。
7. Base UI — Radixの作者たちによる「第二世代」
URL: https://base-ui.com
Radix UI、Floating UI、Material UIの開発者たちが集まって作った、非スタイル(unstyled)のコンポーネントライブラリです。2025年12月に1.0の安定版に到達し、2026年7月にはshadcn/uiの新規プロジェクトの既定の土台に採用されました。APIは意図的にRadixに近く設計されており、移行しやすいのもポイントです。
- RadixにはなかったComboboxやAutocomplete、Number Fieldなどを標準装備
- 専任チームがフルタイムで開発: GitHub、Zed、Unsplashなどが本番採用
- MIT・無料: 商用利用も自由
最適な用途: 自社ブランドのデザインシステムを本気で作るチーム。「見た目は完全に自分たちで決めたい、でもアクセシビリティやフォーカス管理は自前で書きたくない」というときの土台です。同じ系統ではAdobe製のReact Aria(HeroUIやUntitled UIの下回り)も有力な選択肢です。
カテゴリ4: LP・マーケサイト向け「アニメーション系」
ランディングページや製品サイトで「おっ」と思わせるための、動きに全振りしたライブラリたち。業務画面には過剰ですが、使いどころにハマると強力です。
8. Magic UI — マーケページの動きをコピペで
shadcn/uiと組み合わせて使う前提の、アニメーション特化コンポーネント集です。マーキー、Animated Beam(要素間を流れる光)、ベントグリッド、テキストエフェクトなど、150以上の部品をReact + Tailwind CSS + Motionで提供。SaaSのランディングページで見かける「あの動き」の多くがここにあります。
- shadcn/uiにそのまま追加: 同じ作法(コピペ・CLI)で導入でき、テーマのCSS変数も共有
- マイクロインタラクション寄り: 派手すぎず、プロダクトの「品の良い動き」を足すのが得意
- 無料 + Pro: コンポーネントは無料(MIT)、ランディングページのテンプレート集が有料
最適な用途: SaaSのLP、製品紹介ページ、ポートフォリオ。アプリ本体はshadcn/ui、LPはMagic UIで味付け、という組み合わせが定番です。
9. Aceternity UI — 目を引くヒーローセクションの定番
URL: https://ui.aceternity.com
Spotlight、Background Beams、3D Cardなど、「スクリーンショットを撮ってSNSに貼りたくなる」派手なエフェクトが看板のライブラリです。200以上のコンポーネントとブロックを無料でコピペでき、Tailwind CSS + Motion製でshadcn互換。AIスタートアップのLPでよく見る雰囲気は、かなりの割合でここ由来です。
- エフェクトの引き出しが圧倒的: 3D Globe、パララックス、シェーダー系背景まで何でもある
- ブロック・テンプレートも充実: ヒーロー、料金表、FAQなどのセクション集(こちらは有料のAll-Access)
- 注意点: 多用するとどこかで見たサイトになりがち&アニメーションはパフォーマンスに影響するので、ヒーローセクションなど要所に絞るのがコツ
最適な用途: 第一印象で勝負するマーケティングページ、スタートアップのティザーサイト。
10. React Bits — 急上昇中のアニメーション部品集
ここ1年で一気に存在感を増した新顔です。テキストアニメーション、背景エフェクト、インタラクティブ部品など165以上を収録し、各コンポーネントをJS/TypeScript × CSS/Tailwindの4バリアントで提供するのがユニークなところ。shadcnレジストリ経由のCLI導入にも対応しています。
- 軽さ重視: CSS中心の実装が多く、依存を最小限にしたい場面と相性が良い
- スタックを選ばない: Tailwindを使わないプロジェクトでも素のCSS版が選べる
- テキスト演出が充実: 文字がバラけて集まる、にじんで現れる、といった「文字もの」に強い
最適な用途: LPの見出し演出や背景エフェクトをピンポイントで足したいとき。Magic UI・Aceternityと役割が近いので、作りたい演出のカタログを見比べて選ぶのがおすすめです。
カテゴリ5: AI駆動開発と相性のいい「レジストリ系」
冒頭で触れた通り、2026年のUI開発では「AIエージェントがコンポーネントを直接探して導入する」流れが本格化しています。その受け皿になっているのが、shadcn/uiのレジストリ(コンポーネント配布)の仕組みと、MCP対応のコンポーネント集です。
11. 21st.dev — コンポーネントの検索エンジン兼マーケットプレイス
URL: https://21st.dev
Magic UIやOrigin UI、Kibo UIなど、さまざまな作者のコンポーネントを横断的に検索・プレビューできるレジストリです。最大の特徴はMCPサーバーで、CursorやClaude Codeから「こういうUIが欲しい」と伝えると、エージェントが21st.dev上のコンポーネントを探して、そのままプロジェクトに取り込んでくれます。
- ライブプレビュー付き: 実際に動く状態でコンポーネントを見比べられる
- MCPが本体: 人間がブラウズするより、AIエージェントに探させる使い方が真価
- コミュニティ製: 個人開発者の公開したコンポーネントも多く、玉石混交な分、掘り出し物もある
最適な用途: AIコーディングを前提にしたUI構築。「LPのテスティモニアルセクションをいい感じに」のような指示から部品調達まで自動化したいとき。
12. Kibo UI — shadcn/uiの「足りない部品」を埋める公式級レジストリ
shadcn/uiと同じCSS変数・同じ作法で作られた拡張コンポーネント集です。ガントチャート、カレンダー、ドロップゾーン(ファイルアップロード)、リッチテキストエディタ、カラーピッカー、QRコードなど、素のshadcn/uiには無い「実装が重い部品」をカバーします。npx shadcn add @kibo-ui/gantt のようにネームスペース付きでshadcn CLIからそのまま導入でき、1,000以上のパターンを収録。
- 業務アプリの難所を部品化: ガントやエディタなど、自作すると数週間かかる部品が揃う
- 公式MCPサーバー対応: AIエディタがKibo UIのドキュメントとパターンを直接参照できる
- 無料・オープンソース
最適な用途: shadcn/uiで業務アプリを作っていて、高機能な部品が必要になったとき。同系統では、60以上のカテゴリに1,000以上の部品を揃えRadix / Base UI両対応をうたうReUIも、無料MCPサーバー付きのレジストリとして知られています。
比較表
| ライブラリ | カテゴリ | 導入方式 | 料金 | AI対応 | 向いている用途 |
|---|---|---|---|---|---|
| shadcn/ui | シンプル系 | コピペ(CLI) | 無料 | ◎ 公式MCP・AIツールの事実上の標準 | 業務アプリ全般・デザインシステムの起点 |
| HeroUI | シンプル系 | npmパッケージ | 無料 + Pro | ○ 公式MCP・llms.txt | 少人数で綺麗な画面を素早く |
| Untitled UI | シンプル系 | コピペ(CLI) | 無料 + Pro | ○ MCP対応 | Figma連携・顧客向けSaaS |
| coss ui(旧Origin UI) | シンプル系 | コピペ(レジストリ) | 無料 | ○ AI前提の設計 | フォーム中心の業務画面 |
| daisyUI | シンプル系 | Tailwindプラグイン | 無料 | ○ 公式MCP・AIエディタ用プラグイン | 社内ツール・React以外の案件 |
| Tremor | データ可視化 | コピペ + npm | 無料 | △ shadcn系の作法に準拠 | BI・分析ダッシュボード |
| Base UI | ヘッドレス | npmパッケージ | 無料 | △ shadcn/ui経由で実質標準 | 自社デザインシステムの土台 |
| Magic UI | アニメーション | コピペ(CLI) | 無料 + Pro | ○ shadcnレジストリ互換 | SaaSのLP・製品サイト |
| Aceternity UI | アニメーション | コピペ | 無料 + 有料テンプレ | ○ shadcnレジストリ互換 | 目を引くヒーローセクション |
| React Bits | アニメーション | コピペ(CLI) | 無料 | ○ shadcnレジストリ対応 | テキスト演出・背景エフェクト |
| 21st.dev | レジストリ | MCP / CLI経由 | 無料(一部有料) | ◎ MCPが本体 | AIエージェントでのUI構築 |
| Kibo UI | レジストリ | shadcn CLI | 無料 | ◎ 公式MCP | ガント等の高機能部品の追加 |
選び方の目安
- とにかく定番で堅実に業務アプリを作る → shadcn/ui
- パッケージ導入でサッと綺麗に → HeroUI
- React以外・SSR中心・最速MVP → daisyUI
- デザイナーとFigmaで分業する → Untitled UI
- フォームの多い管理画面 → shadcn/ui + coss ui
- 分析ダッシュボードが主役 → Tremor
- 自社デザインシステムをゼロから → Base UI
- LPで魅せたい → Magic UI / Aceternity UI / React Bits(演出のカタログで選ぶ)
- AIエージェントにUIを作らせる → shadcn/ui + 21st.dev / Kibo UI
まとめ
2026年のUIライブラリ選びは、「shadcn/ui系のコピペ&レジストリ文化」を軸に、目的別の専門ライブラリを組み合わせるのが基本形になっています。そしてどのライブラリもAIコーディングツールへの対応(MCP・llms.txt)を急速に進めており、「AIが扱いやすいライブラリ」を選ぶこと自体が開発速度への投資になりつつあります。
まずはshadcn/uiを軸に据えて、ダッシュボードならTremor、LPならMagic UIやAceternity、と目的に応じて足していく。この記事がそのカタログとして役立てば嬉しいです。
※ 本記事の情報は2026年8月時点の各公式サイト・公式ドキュメントに基づいています。この分野は変化が速いので、導入時は必ず最新の公式情報をご確認ください。