はじめに

Shadcn UI は、Tailwind CSSベースの再利用可能なUIコンポーネントライブラリです。
従来の UI ライブラリと異なり、必要なコンポーネントだけを選んで導入できるのが特徴です。

目次

特徴とメリット
よく使うコンポーネント例
Shadcnの強み vs 他の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 との相性が抜群なので、組み込みやすい！

💫 参考文献

shadcn/ui