shadcn/uiとはどんなUIライブラリか
shadcn/uiは、Radix UI（Base UI）のプリミティブとTailwind CSSをベースにした、コピペ方式のUIコンポーネント集だ。通常のUIライブラリはnpmパッケージとしてインストールするが、shadcn/uiはCLIでコンポーネントのソースコードをプロジェクトに直接追加する。
コードの所有権が完全に自分にあるため、ライブラリのバージョンアップに依存せず自由にカスタマイズできる。GitHub Star数は110,000以上で、React UIライブラリとしてトップクラスの採用率を誇る。
主な機能とフロントエンド開発での強み
- コピペ方式：コンポーネントはnpmパッケージではなく、プロジェクト内のファイルとして管理
- Radix UI / Base UI ベース：アクセシビリティ（WAI-ARIA）が標準で確保されている
- Tailwind CSS スタイリング：テーマのカスタマイズが容易。ダークモード対応も標準
- CLI ツール：
npx shadcn@latest add buttonで個別コンポーネントを追加 - TypeScript完全対応：型安全なpropsとイベントハンドリング
- マルチフレームワーク：React、Next.js、Vite、Remixなどに対応
- 豊富なコンポーネント：Button、Dialog、Form、Table、Chart、Sidebarなど50以上
導入方法とコンポーネントの追加
# プロジェクトにshadcn/uiを初期化
npx shadcn@latest init
初期化時にスタイル設定（CSS変数、ベースカラーなど）が対話的に設定される。
コンポーネントの追加：
# ボタンコンポーネントを追加
npx shadcn@latest add button
# ダイアログを追加
npx shadcn@latest add dialog
# フォーム関連をまとめて追加
npx shadcn@latest add form input label
追加されたコンポーネントの使用例：
import { Button } from "@/components/ui/button"
import {
Dialog, DialogContent, DialogHeader,
DialogTitle, DialogTrigger,
} from "@/components/ui/dialog"
export function Example() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">開く</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>設定</DialogTitle>
</DialogHeader>
<p>ここにコンテンツを配置</p>
</DialogContent>
</Dialog>
)
}
テーマのカスタマイズ
globals.cssのCSS変数でカラーテーマを一括変更できる：
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
}
}
競合UIライブラリとの比較
| ライブラリ | 方式 | CSS | アクセシビリティ | カスタマイズ性 |
|---|---|---|---|---|
| shadcn/ui | コピペ | Tailwind CSS | ◎ Radix UI | ◎ ソース所有 |
| Material UI | npm | CSS-in-JS | ○ 独自実装 | ○ テーマAPI |
| Ant Design | npm | Less/CSS | ○ 独自実装 | △ 制約あり |
| Chakra UI | npm | Emotion | ○ 独自実装 | ○ テーマAPI |
| Headless UI | npm | BYO | ◎ 設計重視 | ◎ スタイルなし |
差別化ポイント：shadcn/uiはコンポーネントのソースコードを所有できる点が他のnpmパッケージ型ライブラリと根本的に異なる。Material UIやChakra UIはテーマAPIでカスタマイズするが、内部実装の変更には限界がある。shadcn/uiなら直接ソースを書き換えられるため、デザイン要件への柔軟な対応が可能だ。
AI開発ツールとの連携
shadcn/uiはAIコーディングツールとの相性が良い。Difyのようなノーコードツールのフロントエンドカスタマイズや、LangChainベースのチャットUIの構築で、shadcn/uiのコンポーネントが活用されるケースが増えている。
Viteをビルドツールとして使えば、shadcn/uiのコンポーネントを含むプロジェクトの開発サーバー起動が高速になる。
まとめ：shadcn/uiが向いているケース
shadcn/uiは「デザインシステムを自社でコントロールしたいが、ゼロからコンポーネントを作る時間はない」チームに最適だ。Tailwind CSSとTypeScriptを使っているプロジェクトであれば、導入コストは極めて低い。