はじめに
Shadcn UI は、Tailwind CSSベースの再利用可能なUIコンポーネントライブラリです。
従来の UI ライブラリと異なり、必要なコンポーネントだけを選んで導入できるのが特徴です。
目次
🧷 特徴とメリット
✅ 1. 必要なコンポーネントだけをインストール
- 通常の UI ライブラリはすべてのコンポーネントを含む巨大なパッケージですが、Shadcn は必要なものだけをプロジェクトに取り込みます。
npx shadcn@latest add button card
💡 ButtonとCardだけを導入します。
✅ 2. コンポーネントはローカルに配置
- Shadcn のコンポーネントは外部ライブラリではなく、プロジェクト内に生成されます。
- カスタマイズが容易で、デザインや動作を自由に変更できます。
✅ 3. Tailwind CSS ベース
- Tailwind CSS を使用しており、スタイリングが簡単。
- Tailwind のテーマに合わせて柔軟にスタイルを変更できます。
✅ 4. Radix UI を活用
- Shadcn の多くのコンポーネントは、Radix UI のアクセシビリティと機能性を活用しています。
- ダイアログやポップオーバーなどは Radix の洗練された挙動を引き継いでいます。
✅ 5. ダークモードやテーマ管理が容易
- 自動でダークモードに対応するコンポーネントが用意されています。
🧷 よく使うコンポーネント例
Button
import { Button } from "@/components/ui/button";
export default function Example() {
return (
<Button onClick={() => alert("Hello!")}>
Click me
</Button>
);
}
Card
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
export default function Example() {
return (
<Card>
<CardHeader>
<CardTitle>Shadcn UI</CardTitle>
</CardHeader>
<CardContent>
Tailwind と Radix ベースのコンポーネント
</CardContent>
</Card>
);
}
🧷 Shadcnの強み vs 他のUIライブラリ
| 特徴 | Shadcn UI | Chakra UI / MUI / Ant Design |
|---|---|---|
| インストール方法 | 必要なコンポーネントだけ導入 | すべてのコンポーネントを含むパッケージ |
| カスタマイズ性 | コンポーネントはローカルで自由に修正可能 | カスタマイズにはテーマ拡張が必要 |
| スタイリング | Tailwind CSS | 独自のスタイルシステム |
| 依存関係 | 軽量、必要最小限 | 依存関係が多い |
💡 Shadcn が向いているケース
✅ コンポーネントのカスタマイズ頻度が高い
✅ 軽量な UI ライブラリを求めている
✅ Tailwind CSS を使っている
✅ デザインとアクセシビリティを両立させたい
🎉 まとめ
- Shadcn は Tailwind CSS ベースで構築されているため、Tailwind が必須
- コンポーネントは必要なものだけを導入できるため、不要なものを削減して軽量な構成にできる。
- Shadcn は Next.js との相性が抜群なので、組み込みやすい！