UI コンポーネントライブラリ比較 フレームワーク
React で UI を組むときに最もよく採用される 5大ライブラリ shadcn/ui / Material UI / Mantine / Chakra UI / Ant Design を、概要・特徴・サンプルコード・採用基準で比較します。プロジェクトに合った選定の参考にお使いください。
shadcn/ui
コピー&ペースト型 開発元: shadcn (個人)shadcn/ui は「コンポーネントをnpmからインストールする」のではなく、コードを自分のプロジェクトに直接コピーして使うという新しい考え方のUIライブラリです。Radix UI と Tailwind CSS を組み合わせて作られており、コンポーネントの実装コードが自分の手元にあるため、自由にカスタマイズできます。2023年から急速に普及し、現在のNext.jsプロジェクトでは事実上の標準ライブラリとなっています。
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
export default function Page() {
return (
<Card className="w-96">
<CardHeader>
<CardTitle>shadcn/ui サンプル</CardTitle>
</CardHeader>
<CardContent>
<Button>クリックしてください</Button>
</CardContent>
</Card>
)
}
Material UI (MUI)
Material Design 開発元: MUI 株式会社Material UI はGoogle の Material Design に準拠した React UI ライブラリで、業界で最も成熟したコンポーネントライブラリの1つです。100種類以上のコンポーネントを内蔵し、テーマカスタマイズ機能も豊富。業務アプリ・社内ツール・管理画面の制作現場で長年にわたり標準的に採用されています。日本語のドキュメント情報も豊富です。
import { Button, Card, CardContent, CardHeader } from '@mui/material';
export default function Page() {
return (
<Card sx={{ width: 384 }}>
<CardHeader title="Material UI サンプル" />
<CardContent>
<Button variant="contained" color="primary">
クリックしてください
</Button>
</CardContent>
</Card>
);
}
Mantine
開発者体験重視 開発元: Vitaly Rtishchev (個人発祥のOSS)Mantine は開発者体験 (DX) を最優先に設計された Reactコンポーネントライブラリです。100種類以上のコンポーネントに加え、フォーム管理・通知・モーダル管理等のフック (Hook) 群も豊富。TypeScript完全対応で、型補完が非常に優秀。スタートアップ・SaaS開発の現場で急速にシェアを伸ばしています。
import { Button, Card, Text, Title } from '@mantine/core';
export default function Page() {
return (
<Card shadow="sm" padding="lg" w={384}>
<Title order={3}>Mantine サンプル</Title>
<Text size="sm" c="dimmed" mb="md">
DX (開発者体験) 最優先のUIライブラリ
</Text>
<Button fullWidth>
クリックしてください
</Button>
</Card>
);
}
Chakra UI
アクセシビリティ重視 開発元: Segun AdebayoChakra UI はアクセシビリティとシンプルなAPIを両立した Reactコンポーネントライブラリです。Style Propsという独自の記法で、propsだけでスタイルを完結できる手軽さが特徴。WAI-ARIA準拠・キーボード操作対応など、アクセシビリティ要件の高いプロジェクトに最適です。
import { Box, Button, Heading, Text } from '@chakra-ui/react';
export default function Page() {
return (
<Box w="96" p={6} bg="white" borderRadius="lg" shadow="md">
<Heading size="md" mb={2}>Chakra UI サンプル</Heading>
<Text fontSize="sm" color="gray.600" mb={4}>
Style Propsで簡潔にスタイリング
</Text>
<Button colorScheme="teal" width="full">
クリックしてください
</Button>
</Box>
);
}
Ant Design
エンタープライズ向け 開発元: アリババ (Alibaba)Ant Design は中国のアリババグループが開発・運営するエンタープライズ向けUIライブラリです。70種類以上のコンポーネントに加え、ダッシュボード向けの高機能データテーブル・グラフ・チャートまで包括的に提供。中国国内の業務システムで圧倒的なシェアを持ち、グローバルでも管理画面・データ可視化の領域で広く採用されています。
import { Button, Card } from 'antd';
export default function Page() {
return (
<Card title="Ant Design サンプル" style={{ width: 384 }}>
<p style={{ marginBottom: 16, color: '#888' }}>
エンタープライズ向けの豊富なコンポーネント
</p>
<Button type="primary" block>
クリックしてください
</Button>
</Card>
);
}
🔍 5ライブラリ 機能比較
| 比較項目 | shadcn/ui | Material UI | Mantine | Chakra UI | Ant Design |
|---|---|---|---|---|---|
| インストール方式 | コピー型 | npm | npm | npm | npm |
| コンポーネント数 | 約50 | 100+ | 100+ | 50+ | 70+ |
| スタイリング | Tailwind | CSS-in-JS | CSS Modules | Style Props | CSS-in-JS |
| カスタマイズ性 | ◎ (最高) | ○ | ○ | ○ | △ |
| テーマ | CSS変数 | ThemeProvider | theme prop | extendTheme | ConfigProvider |
| TypeScript | ◎ | ◎ | ◎ | ◎ | ◎ |
| 日本語情報 | 中 | 多 | 中 | 中 | 中 |
| 得意分野 | モダンWeb・SPA | 業務アプリ | SaaS・スタートアップ | アクセシビリティ重視 | ダッシュボード・社内ツール |
💡 どれを選ぶか
- モダンなWebサイト・LP・新規SPAを作る → shadcn/ui (現在のNext.js事実上の標準)
- 業務アプリ・社内ツール・管理画面を作る → Material UI または Ant Design
- SaaS・スタートアップ・最新DX重視 → Mantine
- アクセシビリティが必須 (官公庁案件・大企業の規定) → Chakra UI
- ダッシュボード・データ可視化が中心 → Ant Design (ProComponents)
使い方
- タブで5つのライブラリを切り替えながら、特徴とサンプルコードを比較
- 気に入ったライブラリの公式ドキュメントへリンクから直接アクセス
- 各ライブラリのコードスタイルを見比べて、自分が読みやすい・書きやすい方を選定
選定で重視すべき軸
- チームのスキル: メンバーが慣れているものが最強
- 長期保守性: 5年後も生きているか (5つともコミュニティが活発)
- カスタマイズ性: 完全独自デザインを作るなら shadcn/ui
- スピード: すぐ動くものが欲しいなら Material UI / Ant Design
- 規模: 大規模 → MUI / Antd / 中小規模 → shadcn/ui / Mantine