モダンコンポーネントライブラリでUIをアップデート
前のコースでは、デザインツールでインターフェースを描き、AI IDEでデザイン稿をコードに変換し、完全なフロントエンドプロジェクトを完成させる方法を学びました。しかし、一つの問題に気づいたかもしれません：ゼロから書いたボタン、フォーム、ポップアップは、使えるものの、「プロのプロダクト」との差を感じさせます——スタイルの統一性が不足し、インタラクションのディテールが滑らかではなく、異なる画面への対応も頭を悩ませます。
これこそがコンポーネントライブラリが解決する問題です。
コンポーネントライブラリは、あらかじめ設計・開発されたUIパーツの集合です。ボタン、入力ボックス、ドロップダウンメニュー、ダイアログ、テーブル...どんなプロダクトでも繰り返し使われるインターフェース要素が、コンポーネントライブラリにはすでに用意されており、多くのユーザーによって検証・磨き上げられています。積み木のように組み合わせるだけで、プロフェッショナルなインターフェースを素早く構築できます。
学べること
- フロントエンドコンポーネントライブラリとは何か、そしてなぜモダン開発でほぼ必須なのかを理解する
- 最も代表的な4つのコンポーネントライブラリを知り、それぞれの得意なシーンを理解する
- 3つの実践シーン（ランディングページ、プロダクトページ、バックエンド管理）を通じて、AI IDE + コンポーネントライブラリでVibe Codingを学ぶ
- コンポーネントライブラリのドキュメントを読み、要件に応じて適切なコンポーネントを見つけて正しく使用する方法を学ぶ
1. なぜコンポーネントライブラリが必要なのか？
家の改装を想像してみてください。木材から椅子を自分で作ることもできますが、もっと一般的なのはIKEAで買うことです——デザインが良く、品質が安定し、説明書が明確で、持ち帰って組み立てるだけ。
コンポーネントライブラリはフロントエンド開発における「IKEA」です。家具ではなくインターフェースパーツを提供します：
| 自分で手書き | コンポーネントライブラリを使用 |
|---|---|
| スタイル、インタラクション、アニメーションを自分で処理 | 開封即使用可能、スタイルとインタラクションはすでに磨き上げ済み |
| 異なるページのボタンが違って見える可能性 | グローバルにスタイルが統一され、一貫性が自動的に維持 |
| スマホ、タブレット対応に追加の作業が必要 | ほとんどのコンポーネントライブラリにレスポンシブサポートが内蔵 |
| アクセシビリティ（Accessibility）が漏れやすい | プロのコンポーネントライブラリはキーボードナビゲーション、スクリーンリーダー等に対応済み |
| 開発速度が遅い | 開発速度が速く、ビジネスロジックに集中 |
簡単に言えば：コンポーネントライブラリは「どう描くか」ではなく「何を作るか」に時間を使わせてくれます。
百聞は一見に如かず：同じ要件で、コンポーネントライブラリの有無の差
言葉だけでは説得力がありません。Traeでほぼ同じ要件を使い、それぞれ指定なしと指定ありで生成結果の差を見てみましょう。
プロンプト1：コンポーネントライブラリ不使用
AI執筆アシスタントのデータダッシュボードページを作ってください。含む：
- トップのタイトルバーとエクスポートボタン
- 4つの統計カードでユーザー数、アクティブユーザー、ドキュメント数、収益を表示、増減トレンドも表示
- 折れ線グラフと円グラフを1つずつ
- ユーザーリストのテーブル、ページネーション機能付き
- 左側のナビゲーションサイドバープロンプト2：shadcn/uiコンポーネントライブラリ使用
AI執筆アシスタントのデータダッシュボードページを、shadcn/uiコンポーネントライブラリで作ってください。含む：
- トップのタイトルバーとエクスポートボタン
- 4つの統計カードでユーザー数、アクティブユーザー、ドキュメント数、収益を表示、増減トレンドも表示
- 折れ線グラフと円グラフを1つずつ
- ユーザーリストのテーブル、ページネーション機能付き
- 左側のナビゲーションサイドバー同じ要件で、唯一の違いはプロンプトの先頭にshadcn/ui + Tailwind CSSを追加しただけなのに、Traeの生成結果は視覚的一貫性、インタラクションのディテール、全体的な仕上げのレベルが完全に異なります。これがコンポーネントライブラリがもたらす「無料アップグレード」です——プロンプトにコンポーネントライブラリの名前を1つ追加するだけ。
2. 4つのコアコンポーネントライブラリを知る
コンポーネントライブラリは多数ありますが（完全なリストは付録を参照）、まず最も代表的な以下の4つを知っておけば十分です：
| コンポーネントライブラリ | フレームワーク | 一言で言うと | 公式サイト |
|---|---|---|---|
| Ant Design | React | アリババグループ製、エンタープライズ級バックエンドの事実上の標準、コンポーネントのカバー範囲が極めて広い | ant.design |
| shadcn/ui | React | npmパッケージとしてインストールせず、コードを直接プロジェクトにコピー、Tailwind CSSベース、カスタマイズの自由度が最高 | ui.shadcn.com |
| HeroUI（旧NextUI） | React | デフォルトのスタイルが美しく、アニメーションが滑らか、視覚品質にこだわるランディングページやプロダクト展示に適する | heroui.com |
| Material UI | React | 最も歴史のあるReactコンポーネントライブラリ、Google Material Design仕様を実装、エコシステムが最も成熟 | mui.com |
Vueユーザーにも豊富な選択肢があります：Element Plus（国内で最も人気）、Ant Design Vue、Naive UIなど、詳細は付録を参照してください。
異なるコンポーネントライブラリは異なるシーンに適しています。次に、3つの実際の開発シーンを通じて、AI IDE + コンポーネントライブラリでVibe Codingを体験します。
異なるコンポーネントライブラリのスタイルと特徴を示すため、各シーンで異なるライブラリをあえて選びました。ただし注意：これは多様な選択肢を知ってもらうためだけです。実際の開発では、最も使いやすいもの1つだけを使っても全く問題ありません。shadcn/uiのスタイルが好きなら、ランディングページ、プロダクトページ、バックエンド管理すべてをそれで作れます。見た目が良く、使いやすいものを1つ選ぶことが何より重要です。
3. 実践1：HeroUIでプロダクトランディングページを構築
シーン：AI執筆アシスタントのプロダクトを作り、製品の特徴を展示し、ユーザーの登録を促す美しいランディングページが必要です。ランディングページは視覚的なインパクトが強く、アニメーションが滑らかで、スマホでも見栄えが良い必要があります。
HeroUIを選んだ理由：HeroUIのデフォルトスタイルがすでに美しく、滑らかなトランジションアニメーションが組み込まれており、ユーザー向けの展示型ページに非常に適しています。
3.1 プロジェクトの作成
# HeroUI公式CLIでプロジェクトを作成
npx create-heroui-app@latest ai-writer-landing
cd ai-writer-landing
npm install3.2 AI IDEでランディングページを生成
AI IDE（Cursor、Traeなど）を開き、ダイアログに以下を入力：
AI執筆アシスタントのランディングページをHeroUIコンポーネントライブラリで作ってください：
**ページ構造：**
1. トップナビバー：左にロゴとプロダクト名、右に「機能」「料金」「概要」の3つのリンクと「始める」ボタン
2. ファーストビューエリア：大見出しに「AIをあなたの執筆パートナーに」、サブタイトルでプロダクトの価値を紹介、2つのボタン「無料トライアル」と「デモを見る」、下にプロダクトのスクリーンショット
3. 機能紹介：3列のカードで、「スマート続き執筆」「スタイル調整」「多言語翻訳」の3つの機能をそれぞれ紹介。各カードにアイコン、タイトル、説明
4. 料金エリア：3つの料金カード（無料版、プロ版、チーム版）、プロ版をおすすめとして強調表示
5. ボトムCTA：魅力的なコピーと登録ボタン
6. フッター：著作権情報とソーシャルメディアリンク
**デザイン要件：**
- モダンでプロフェッショナルな見た目
- ダークモード対応
- スマホでも見やすく3.3 AIが使用する主要コンポーネント
AIが生成したコードで、これらのHeroUIコンポーネントが見られます：
import {
Navbar, NavbarBrand, NavbarContent, NavbarItem,
Button,
Card, CardHeader, CardBody, CardFooter,
Divider,
Link,
Chip
} from '@heroui/react'各コンポーネントの役割：
| コンポーネント | 用途 | ランディングページでの位置 |
|---|---|---|
Navbar | トップナビバー | ページ最上部、固定 |
Button | ボタン、複数のバリアントとカラーをサポート | CTAボタン、ナビボタン |
Card | カードコンテナ | 機能紹介、料金カード |
Chip | 小さなタグ | 「おすすめ」、「最も人気」マーク |
Divider | 区切り線 | エリア間の視覚的仕切り |
3.4 イテレーションと最適化
生成された初版コードに完全に満足できない場合、AIとの対話を続けて調整します：
ランディングページを最適化してください：
1. 大見出しにグラデーションカラーを追加、青から紫へのグラデーション
2. 機能カードにhover時の浮上アニメーション効果を追加
3. プロ版の料金カードを強調表示し、ボーダーと「最も人気」のタグを追加
4. スマホでのナビをハンバーガーメニューに変更Vibe Codingの核心：各コンポーネントのAPIを覚える必要はなく、自然言語で望む効果を説明するだけで、AIが適切なコンポーネントと書き方を見つけてくれます。不満な点があれば、対話を続けてイテレーションするだけ。
4. 実践2：shadcn/uiでプロダクトページを構築
シーン：AI執筆アシスタントに、ユーザーログイン後のメインインターフェースが必要です——左側にドキュメントリスト、右側にエディタ、上部にツールバー。これは機能型のプロダクトページで、高度にカスタマイズされたUIが必要です。
shadcn/uiを選んだ理由：shadcn/uiはコンポーネントコードを直接プロジェクトに配置するため、どんなディテールも自由に変更できます。深いカスタマイズが必要なプロダクトインターフェースでは、この「コードを所有する」モードが最も柔軟です。
4.1 プロジェクトの作成
# Next.jsプロジェクトを作成
npx create-next-app@latest ai-writer-app --typescript --tailwind --app
cd ai-writer-app
# shadcn/uiを初期化
npx shadcn@latest init
# 必要に応じてコンポーネントを追加（すべてのコンポーネントを一度にインストールするのではない）
npx shadcn@latest add button card input sidebar sheet dialogshadcn/uiのユニークな点：addでコンポーネントを追加するたびに、プロジェクトのcomponents/ui/ディレクトリにソースコードがコピーされます。これらのファイルを直接開いてスタイルや動作を変更できます。
4.2 AI IDEでプロダクトインターフェースを生成
AI執筆アシスタントのメインインターフェースをshadcn/uiコンポーネントライブラリで作ってください：
**全体レイアウト：**
- 左側に折りたたみ可能なサイドバー、幅は約280px：
- トップに「新規ドキュメント」ボタン
- 下にドキュメントリスト、各ドキュメントにタイトルと最終編集時間を表示
- ドキュメントを右クリックで名前の変更や削除
- 右側にメイン編集エリア、上下2つの部分に分割：
- 上はツールバー：ドキュメントタイトルの編集、文字数統計の表示、「AI続き執筆」ボタン、「エクスポート」ドロップダウンメニュー
- 下は編集エリア：大きなテキスト入力ボックス、残りのスペースを占める
**インタラクションのディテール：**
- 「AI続き執筆」をクリック後、ボタンにローディング状態を表示、エディタの下部にAI生成テキストが表示（タイプライターのように1文字ずつ表示）
- スマホではサイドバーをドロワー形式にし、左からスライドイン
- 現在選択中のドキュメントをハイライト表示4.3 AIが使用する主要コンポーネント
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Card, CardContent, CardHeader } from '@/components/ui/card'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger
} from '@/components/ui/dropdown-menu'
import {
Sheet,
SheetContent,
SheetTrigger
} from '@/components/ui/sheet'
import {
Sidebar,
SidebarContent,
SidebarHeader
} from '@/components/ui/sidebar'| コンポーネント | 用途 | プロダクトページでの位置 |
|---|---|---|
Sidebar | 折りたたみ可能サイドバー | 左側のドキュメントリスト |
Sheet | モバイル用ドロワー | モバイルでのサイドバー代替 |
DropdownMenu | ドロップダウンメニュー | 「エクスポート」ボタン、右クリックメニュー |
Dialog | ダイアログ | 名前の変更、削除の確認 |
Button | ボタン、variantとloadingをサポート | 各種操作ボタン |
Input | 入力ボックス | ドキュメントタイトルの編集 |
4.4 コンポーネントスタイルのカスタマイズ
shadcn/uiの利点は、コンポーネントのソースコードを直接修正できることです。例えば、ボタンの角丸を大きくしたい場合：
components/ui/button.tsxを修正して、
すべてのボタンのデフォルトの角丸をrounded-mdからrounded-xlに変更し、
primaryバリアントに微妙なシャドウ効果を追加してくださいAIはプロジェクト内のコンポーネントファイルを直接修正し、npmパッケージのスタイルを上書きしません——これがshadcn/uiの「コードを所有する」利点です。
5. 実践3：Ant Designでバックエンド管理インターフェースを構築
シーン：AI執筆アシスタントがローンチした後、ユーザーデータの確認、ドキュメントコンテンツの管理、有料注文の処理を行う管理バックエンドが必要です。バックエンド管理システムの核心はデータ表示と操作効率です。
Ant Designを選んだ理由：Ant Designは中〜バックエンド領域で最も蓄積が深く、テーブル、フォーム、チャートなどのビジネスコンポーネントが開封即使用可能で、大量のエンタープライズ級インタラクションパターン（一括操作、高度なフィルタリング、データエクスポートなど）が内蔵されています。
5.1 プロジェクトの作成
# Ant Design Proスキャフォールドを使用（レイアウト、ルーティング、権限が内蔵）
npx create-umi@latest ai-writer-admin
# Ant Design Proテンプレートを選択
cd ai-writer-admin
npm installまたはゼロから開始：
npx create-react-app ai-writer-admin --template typescript
cd ai-writer-admin
npm install antd @ant-design/icons @ant-design/pro-components5.2 AI IDEで管理バックエンドを生成
AI執筆アシスタントの管理バックエンドをAnt Designコンポーネントライブラリで作ってください：
**全体レイアウト：**
- 左側にメニューバー：ダッシュボード、ユーザー管理、ドキュメント管理、注文管理、システム設定
- トップにパンくずナビゲーションを表示
**ユーザー管理ページ：**
- トップに4つの統計カード：総ユーザー数、本日新規、アクティブユーザー数、有料ユーザー数
- 検索フィルターエリア：ユーザー名で検索、登録時間範囲を選択、ユーザーステータスでフィルター、「検索」と「リセット」ボタン
- ユーザーテーブル：
- アバター、ユーザー名、メール、登録時間、サブスクリプションプラン（異なるカラータグで区別）、ステータス、操作を表示
- 1ページに20件表示、ページネーション対応
- ユーザーを一括選択でき、一括無効化またはエクスポートが可能
- 操作列：詳細を見る、編集、無効化（無効化前に再確認）
- 「詳細を見る」をクリックすると右からドロワーがスライドインし、ユーザーの詳細情報と最近のドキュメントリストを表示5.3 AIが使用する主要コンポーネント
import { PageContainer, ProLayout } from '@ant-design/pro-components'
import { ProTable } from '@ant-design/pro-components'
import { StatisticCard } from '@ant-design/pro-components'
import {
Button, Tag, Badge, Space, Drawer,
Popconfirm, message, Modal
} from 'antd'
import {
UserOutlined, SearchOutlined, ExportOutlined
} from '@ant-design/icons'| コンポーネント | 用途 | バックエンドでの位置 |
|---|---|---|
ProLayout | バックエンド全体のレイアウトフレーム | ページの骨格（メニュー + コンテンツエリア） |
ProTable | 高度なテーブル、検索、ページネーション、列設定が内蔵 | ユーザーリスト、ドキュメントリスト、注文リスト |
StatisticCard | データ統計カード | ダッシュボード、ページ上部の概要 |
Tag / Badge | ステータスタグ | サブスクリプションプラン、ユーザーステータス |
Drawer | サイドドロワー | ユーザー詳細、編集フォーム |
Popconfirm | バブル確認ボックス | 削除、無効化などの危険な操作 |
5.4 続けてイテレーション：ダッシュボードの追加
ダッシュボードページを作ってください：
1. トップに4つの統計カード：総ユーザー数、総ドキュメント数、本日のAPI呼び出し回数、月間収益。各カードに数値と前月比の変化（増加か減少か）を表示
2. 中央に2つのチャート：
- 左：直近7日間のユーザー増加の折れ線グラフ
- 右：サブスクリプションプラン分布の円グラフ
3. ボトム：最近の操作ログテーブル、時間、ユーザー、操作タイプ、詳細を表示
Ant Designのコンポーネントでレイアウトし、チャートはAnt Design Chartsを使用バックエンド管理のVibe Codingのコツ：バックエンドページの構造は比較的固定（テーブル + 検索 + ポップアップ）で、AIによるバッチ生成に非常に適しています。まずAIに「ユーザー管理」ページをテンプレートとして生成させ、その後「ユーザー管理ページの構造を参考に、ドキュメント管理ページを生成して」と言えば、AIは同じレイアウトパターンを再利用します。
6. ドキュメントの読み方を学ぶ：コンポーネントライブラリの「説明書」
Vibe CodingではAIが大部分のコードを書いてくれますが、AIの生成結果が正しくない場合や、特定のコンポーネントの動作を微調整したい場合は、ドキュメントを確認するのが最速の解決方法です。
Ant Designを例にすると、ドキュメントのアドレスは：https://ant.design/components/overview-cn
ドキュメントを確認する標準的なフロー：
- 要件を明確にする：例えば「テーブルで行選択をサポートしたい」
- ドキュメントで検索：「Table」を検索してテーブルコンポーネントのページに進む
- 例を確認：ドキュメント内の各コンポーネントには複数のオンライン例があり、「選択可能」の例を見つける
- コードをコピー：例のコードをプロジェクトにコピーする
- APIテーブルを確認：ページ下部で
rowSelection属性の完全な設定項目を見つける
ドキュメントのリンクをAI IDEに直接送ることもできます：「https://ant.design/components/table-cn のrowSelection APIを参考に、ユーザーテーブルに一括選択機能を追加してください」。AIにドキュメントのリンクを提供すると、より正確なコードが生成されます。
各コンポーネントライブラリのドキュメントアドレス早見表：
| コンポーネントライブラリ | ドキュメントアドレス |
|---|---|
| Ant Design | https://ant.design/components/overview-cn |
| shadcn/ui | https://ui.shadcn.com/docs/components |
| HeroUI | https://heroui.com/docs/components |
| Material UI | https://mui.com/material-ui/all-components/ |
| Element Plus | https://element-plus.org/zh-CN/component/overview.html |
7. まとめ
3つの実践シーンは、最も一般的なフロントエンド開発のニーズをカバーしています：
| シーン | 推奨コンポーネントライブラリ | 核心的な特徴 |
|---|---|---|
| ランディングページ / 展示ページ | HeroUI | デフォルトのスタイルが美しく、アニメーションが滑らか、視覚的インパクトが強い |
| プロダクト機能ページ | shadcn/ui | コードが完全にコントロール可能、深いカスタマイズが柔軟 |
| バックエンド管理システム | Ant Design | ビジネスコンポーネントが豊富、テーブル・フォームが開封即使用可能 |
Vibe Codingのワークフローのまとめ：
- シーンに応じて適切なコンポーネントライブラリを選択
- AI IDEで望むページ構造とインタラクションを説明
- AIが初版コードを生成し、効果をプレビュー
- 自然言語でイテレーションと調整を続ける
- ディテールの問題に遭遇したらコンポーネントライブラリのドキュメントを確認
練習
以下のいずれかのシーンを選び、AI IDE + コンポーネントライブラリでゼロから完成させてください：
- HeroUIで以前のプロジェクト（例えばホグワーツ肖像画）の展示ランディングページを作る
- shadcn/uiでノートアプリのメインインターフェースを構築（サイドバー + エディタ）
- Ant Designでシンプルなコンテンツ管理バックエンドを構築（記事リスト + 新規記事フォーム）
付録：更多のコンポーネントライブラリ一覧
本編で紹介した4つのコアライブラリ以外にも、フロントエンドエコシステムには優れたコンポーネントライブラリが多数あります。以下はフレームワーク別に分類したリストで、プロジェクトの要件に応じて選択してください。
Vue エコシステム
| コンポーネントライブラリ | Stars | 概要 | 適用シーン |
|---|---|---|---|
| Element Plus | ~27k | Ele.meチームによるVue 3エンタープライズ級コンポーネントライブラリ、国内で最も広く使用され、中国語エコシステムが優れている | 中〜バックエンド管理システム |
| Vuetify | ~41k | 最も人気のあるVue Material Designコンポーネントライブラリ、80+コンポーネント、ドキュメントが充実 | Googleデザインスタイルのプロジェクト |
| Ant Design Vue | ~21k | Ant Designシステムに基づくVue 3コンポーネントライブラリ、デザイン仕様が統一 | エンタープライズ級中〜バックエンド |
| Naive UI | ~18k | TypeScriptで記述、テーマのカスタマイズ性が極めて高く、CSSプリプロセッサに依存しない | デザインに独自の要件があるプロジェクト |
| Quasar | ~27k | 1つのコードでSPA、SSR、PWA、モバイル、デスクトップアプリを構築 | クロスプラットフォームプロジェクト |
| Vant | ~24k | Youzanチームが開発した軽量モバイルコンポーネントライブラリ、ECの一般的なニーズをカバー | モバイルH5ページ |
| PrimeVue | ~14k | 90+コンポーネント、複数のテーマ（Material、Bootstrap等）をサポート | 豊富なコンポーネントとマルチテーマが必要な場合 |
| Arco Design Vue | ~3k | ByteDance製、コンポーネントの品質が高く、ダークモード内蔵 | 中〜バックエンドプロダクト |
| TDesign Vue Next | ~2k | Tencent製、デザイン言語が統一、デスクトップの一般的なシーンをカバー | Tencentエコシステムまたはエンタープライズ級プロジェクト |
React エコシステム
| コンポーネントライブラリ | Stars | 概要 | 適用シーン |
|---|---|---|---|
| Material UI (MUI) | ~95k | Google Material Design仕様の老舗実装、コンポーネントが最も包括的、エコシステムが最も成熟 | エンタープライズ級アプリケーションの迅速な構築 |
| Ant Design | ~94k | アリババグループ製、大量の高品質なビジネスコンポーネントが内蔵、中国語開発者コミュニティで主導的地位 | エンタープライズ級中〜バックエンド |
| shadcn/ui | ~83k | npmインストールではなくコードをプロジェクトにコピー、Radix UI + Tailwind CSSベース、完全にコントロール可能 | 高度なカスタマイズが必要なプロジェクト |
| Chakra UI | ~39k | 開発体験を核心に、APIがシンプル、アクセシビリティサポートが内蔵 | 迅速なプロトタイピング開発 |
| Mantine | ~28k | 100+コンポーネントと50+ hooks、日付ピッカー、リッチテキストエディタ等の高度なコンポーネントを含む | 開封即使用可能なフル機能ソリューションが必要な場合 |
| Headless UI | ~27k | Tailwind Labs公式のスタイルなしコンポーネントライブラリ、ReactとVueの両方をサポート | Tailwind CSSとの組み合わせ |
| HeroUI | ~24k | Tailwind CSS + React Ariaベース、デフォルトのスタイルが美しく、アニメーションが滑らか | 視覚品質にこだわるプロジェクト |
| Radix UI | ~17k | スタイルなしの低レベルコンポーネントプリミティブライブラリ、アクセシビリティとコンポーネントの動作に特化、shadcn/uiの基盤 | カスタムデザインシステムの構築 |
shadcn/ui 拡張エコシステム
上記の汎用コンポーネントライブラリ以外にも、shadcn/uiのエコシステムにはその理念に基づいた拡張ライブラリが多数あり、特定のシーンに差別化された選択肢を提供しています。これらの拡張ライブラリも「コードをプロジェクトにコピー」するモードを採用し、開発者に完全なソースコード制御権を与えます。
| コンポーネントライブラリ | 概要 | 適用シーン |
|---|---|---|
| Aceternity UI | 200+のプロダクション級コンポーネント、発光カード、テキストグラデーション、3D地球などの特色ある視覚コンポーネント | 高品質ランディングページ、SaaSプロダクト |
| Tailark UI | マーケティングサイトのコンポーネントブロック集合、プロダクト展示、顧客の声、CTAボタンなどのマーケティング高頻度モジュール | マーケティングランディングページ、プロダクト公式サイト |
| UI Tripled | Framer Motionベースの動的インタラクションコンポーネント、ポップアップ、ナビゲーション、カードアニメーション | クリエイティブツール、個人ポートフォリオ |
| Neobrutalism UI | 新ブルータリズムスタイル、太いライン、高コントラスト、鮮やかな色彩 | 個性的なブランド公式サイト、クリエイティブプロジェクト |
| REUI | 967+の実際のビジネスシーンのコンポーネント組み合わせパターン | エンタープライズ級バックエンド、複雑なフォーム |
| Cult UI | より細かいインタラクション/視覚の磨き上げ、データテーブル、フィルターパネル等の複合コンポーネント | 高品質な商用プロジェクト |
| Kibo UI | 高度なビジネスコンポーネント、カラーピッカー、リッチテキストエディタ、ファイルアップロード等 | 管理バックエンド、ツール系プロダクト |
| Kokonut UI | 100+コンポーネント + 7+完全テンプレート、清新でシンプルなスタイル | SaaS公式サイト、ブログ、EC |
| Commerce UI | ECシーン専用、商品カード、カート、決済フォーム | ECプラットフォーム |
| shadcnblocks | 1373個のUIブロック + 13セットの完全テンプレート、最も包括的なリソース | あらゆるシーン |
| Shoogle | shadcn/uiエコシステムの集約検索プラットフォーム | リソースの迅速検索 |
| Discover All Shadcn | 集約型リソースナビゲーション | リソースの迅速検索 |
なぜshadcn/ui拡張を選ぶのか？ これらの拡張はshadcn/uiの「コード所有権」の理念を引き継ぎつつ、特定のシーンに深くカスタマイズされています。Vibe Coding時代において、デザイン要件に合ったコンポーネントを迅速に見つけ、主流UIライブラリの同質化から抜け出し、より差別化されたプロダクトを作ることができます。