Welcome to shadcn/ui App

  {/* デフォルトボタン */}
  <Button>Click Me</Button>

  {/* Secondaryボタン */}
  <Button variant="secondary" className="mt-4">Secondary Button</Button>

  {/* Destructiveボタン (赤色) */}
  <Button variant="destructive" size="lg" className="mt-4">Delete Item</Button>

  {/* Linkとして使用 (asChildとNext.js Link) */}
  <Button asChild variant="link" className="mt-4">
    <a href="/about">About Us</a> {/* または Next.jsの <Link href="/about">About Us</Link> */}
  </Button>
</div>

);
}
“`

このように、variantやsizeプロパティ、そしてTailwind CSSクラスを直接指定できるclassNameプロパティを使って、簡単に見た目や挙動をカスタマイズできます。

主要なshadcn/uiコンポーネントとその特徴

shadcn/uiには、Button以外にも多くの高機能なコンポーネントが用意されています。いくつか代表的なものを紹介します。

• Input, Label, Form:
  • 基本的なフォーム要素。react-hook-formやバリデーションライブラリ（zodなど）との連携を想定して設計されています。Formコンポーネントはフォームの状態管理やバリデーション結果の表示を助けます。
• Card:
  • コンテンツをグループ化するためのコンテナコンポーネント。Header, Content, Footerといったサブコンポーネントに分かれており、柔軟なレイアウトが可能です。
• Dialog (Modal):
  • オーバーレイ表示されるモーダルダイアログ。Radix UIのDialogプリミティブを使用しており、アクセシビリティ（フォーカストラップ、エスケープキーでの閉じるなど）が考慮されています。
• Dropdown Menu:
  • ボタンクリックや右クリックなどで表示されるドロップダウンメニュー。MenuItem, Separatorなどの要素を持ちます。Radix UIのDropdown Menuプリミティブを使用。
• Table:
  • 構造化されたデータを表示するためのテーブルコンポーネント。Header, Body, Cellなどの要素を持ち、基本的なテーブルレイアウトを提供します。データ表示ライブラリ（例: TanStack Table）と組み合わせて使用することが多いです。
• Data Table:
  • TanStack Table（react-table v8）と連携して、ソート、フィルタリング、ページネーションなどの機能を持つ高機能なテーブルを実装するためのコンポーネントおよびフック。複雑なデータ表示に非常に強力です。
• Calendar:
  • 日付を選択するためのカレンダーUI。react-day-pickerライブラリの上に構築されており、日付範囲選択や特定の日の無効化など、様々なオプションがあります。
• Select:
  • ドロップダウン形式の選択肢リスト。Radix UIのSelectプリミティブを使用しており、キーボード操作やアクセシビリティに優れています。
• Command:
  • コマンドパレットやオートコンプリート、フィルタリング可能なリストなどに使用できるコンポーネント。cmdkライブラリの上に構築されており、非常に高速な検索・フィルタリングが可能です。Comboboxとしても利用されます。
• Tabs:
  • コンテンツをタブ形式で切り替えるためのコンポーネント。Radix UIのTabsプリミティブを使用。
• Accordion:
  • クリックでコンテンツの表示・非表示を切り替えるアコーディオンパネル。Radix UIのAccordionプリミティブを使用。
• Carousel:
  • カルーセル（スライダー）コンポーネント。embla-carousel-reactライブラリの上に構築されており、タッチ操作やレスポンシブ対応が可能です。
• Tooltip, Popover:
  • 要素にホバー/クリックした際に表示されるツールチップやポップオーバー。Radix UIのプリミティブを使用。
• Toast:
  • 画面の隅に一時的に表示される通知メッセージ。react-toastifyまたはsonnerといったトーストライブラリと連携して使用します。
• Navigation Menu:
  • 複雑なドロップダウンメニューやホバー可能なメガメニューなどを構築するためのコンポーネント。Radix UIのNavigation Menuプリミティブを使用。

これらのコンポーネントは、いずれもnpx shadcn-ui add <component-name>で個別に追加でき、追加されたコードを自由にカスタマイズできるのが最大の強みです。それぞれのコンポーネントのコードを確認することで、Radix UIやTailwind CSS Variantsを使った高品質なコンポーネント設計パターンを学ぶこともできます。

カスタマイズの深掘り：デザインと構造を自由自在に操る

shadcn/uiの最大の魅力は、その圧倒的なカスタマイズ性です。単にテーマカラーを変えるだけでなく、コンポーネントの構造や振る舞いにまで踏み込んで変更できます。カスタマイズは、主に以下の方法で行います。

1. スタイルのカスタマイズ

スタイルのカスタマイズは、Tailwind CSSとCSS変数を中心に行います。

• tailwind.config.jsの編集:

  • プロジェクトのベースとなるカラーパレット、フォント、ブレークポイント、スペーシングなどを定義します。shadcn/ui initで生成された設定には、CSS変数を参照する形でカラーが定義されています。

  • 例: テーマカラーの変更
    “`javascript
    // tailwind.config.js
    const { fontFamily } = require(“tailwindcss/defaultTheme”)

    / @type {import(‘tailwindcss’).Config} */
    module.exports = {
    darkMode: [“class”], // ダークモード設定
    content: [
    “./pages//.{ts,tsx}”,
    “./components//.{ts,tsx}”,
    “./app//*.{ts,tsx}”,
    “./src//*.{ts,tsx}”,
    ],
    theme: {
    container: {
    center: true,
    padding: “2rem”,
    screens: {
    “2xl”: “1400px”,
    },
    },
    extend: {
    colors: {
    // shadcn/ui init で生成された CSS変数を参照するカラー定義
    border: “hsl(var(–border))”,
    input: “hsl(var(–input))”,
    ring: “hsl(var(–ring))”,
    background: “hsl(var(–background))”,
    foreground: “hsl(var(–foreground))”,
    primary: {
    DEFAULT: “hsl(var(–primary))”,
    foreground: “hsl(var(–primary-foreground))”,
    },
    secondary: {
    DEFAULT: “hsl(var(–secondary))”,
    foreground: “hsl(var(–secondary-foreground))”,
    },
    destructive: {
    DEFAULT: “hsl(var(–destructive))”,
    foreground: “hsl(var(–destructive-foreground))”,
    },
    muted: {
    DEFAULT: “hsl(var(–muted))”,
    foreground: “hsl(var(–muted-foreground))”,
    },
    accent: {
    DEFAULT: “hsl(var(–accent))”,
    foreground: “hsl(var(–accent-foreground))”,
    },
    popover: {
    DEFAULT: “hsl(var(–popover))”,
    foreground: “hsl(var(–popover-foreground))”,
    },
    card: {
    DEFAULT: “hsl(var(–card))”,
    foreground: “hsl(var(–card-foreground))”,
    },
    },
    borderRadius: {
    // CSS変数 –radius を参照する border-radius 定義
    lg: var(--radius),
    md: calc(var(--radius) - 2px),
    sm: calc(var(--radius) - 4px),
    },
    keyframes: {
    “accordion-down”: {
    from: { height: “0” },
    to: { height: “var(–radix-accordion-content-height)” },
    },
    “accordion-up”: {
    from: { height: “var(–radix-accordion-content-height)” },
    to: { height: “0” },
    },
    },
    animation: {
    “accordion-down”: “accordion-down 0.2s ease-out”,
    “accordion-up”: “accordion-up 0.2s ease-out”,
    },
    },
    },
    plugins: [require(“tailwindcss-animate”)], // アニメーション用プラグイン
    }
    ``
ここで定義されているprimary,secondaryなどの色は、globals.cssで定義されたCSS変数–primary,–secondary`などを参照しています。

• globals.cssの編集（CSS変数）:

  • shadcn/ui initで生成されたCSS変数（--background, --foreground, --primaryなど）を直接編集することで、UI全体の配色テーマを変更できます。これらの変数は、tailwind.config.jsや各コンポーネント内のTailwindクラスから参照されています。

  • 例: ライトテーマとダークテーマのCSS変数定義
    “`css
    / globals.css /
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    @layer base {
    :root {
    –background: 0 0% 100%; / HSL for background /
    –foreground: 222.2 84% 4.9%; / HSL for foreground /

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    
    --primary: 222.2 47.4% 11.2%; /* 主なアクションの色 */
    --primary-foreground: 210 40% 98%; /* 主なアクションの文字色 */
    
    /* 他のカラー変数定義 */
    --border: 214.3 31.4% 91.4%;
    --input: 214.3 31.4% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem; /* border-radiusの基準値 */
    

    }

    .dark {
    –background: 222.2 84% 4.9%;
    –foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    
    /* 他のダークテーマ用カラー変数定義 */
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    

    }
    }

    @layer base {
    * {
    @apply border-border;
    }
    body {
    @apply bg-background text-foreground;
    }
    }
    ``.darkセレクタ内で別のCSS変数を定義することで、簡単にダークモードを実装できます。next-themesのようなライブラリと組み合わせるのが一般的です。–radius`変数を変更することで、ボタンやカードなどの角丸の度合いを一括で変更できます。

• コンポーネントファイルの直接編集:

  • プロジェクトに追加された各コンポーネントファイル（例: components/ui/button.tsx）を直接編集し、適用されているTailwind CSSクラスやcva定義を変更します。これは、特定のコンポーネントのスタイルだけを大きく変えたい場合に有効です。ただし、npx shadcn-ui addでコンポーネントをアップデートすると変更が上書きされる可能性があるため、編集内容を控えておくか、慎重に行う必要があります。
• classNameプロパティによる上書き:
  • コンポーネントを使用する側で、classNameプロパティを使って追加のTailwind CSSクラスを指定します。cnユーティリティ関数のおかげで、元のスタイルを壊すことなく新しいスタイルを追加または上書きできます。
  • 例: ボタンのパディングやマージンを変更
    jsx
<Button className="px-8 py-4 mt-6">More Padding</Button>
• cvaのカスタムバリアント追加:
  • コンポーネントファイル内で、cva定義に新しいvariantやsizeを追加できます。
  • 例: ボタンに新しいカラーバリアントを追加
    typescript
// components/ui/button.tsx (編集)
const buttonVariants = cva(
// ...既存のクラス
{
variants: {
variant: {
// ...既存のバリアント
success: "bg-green-500 text-white hover:bg-green-600", // 新しいバリアントを追加
},
// ...既存のsize
},
// ...defaultVariants
}
);
    これで <Button variant="success">Success</Button> のように使用できるようになります。

2. ロジック/構造のカスタマイズ

コンポーネントのスタイリングだけでなく、HTML構造やJavaScriptのロジックにも踏み込んでカスタマイズできます。

• コンポーネントファイルの直接編集:
  • components/ui/dialog.tsxのようなファイルを直接編集して、Radix UIのプリミティブの使い方を変更したり、独自の要素を追加したりできます。
  • 例えば、Dialogのクローズボタンの位置を変えたり、モーダルが開いたときに特定の処理を追加したりといったことが可能です。
• Radix UIプロパティの活用:
  • shadcn/uiコンポーネントは内部でRadix UIのプリミティブを使用しています。Radix UIのドキュメントを参照し、そのプリミティブが提供するプロパティ（例: DialogTriggerのonOpenChange）を活用することで、コンポーネントの挙動をカスタマイズできます。shadcn/uiのラッパーコンポーネントは、Radix UIのプロパティをそのまま受け付けられるように設計されていることが多いです。
• asChildとコンポジション:
  • 多くのshadcn/uiコンポーネントはasChildプロパティをサポートしています。これをtrueに設定すると、コンポーネント自身はDOM要素をレンダリングせず、その子要素にスタイルやイベントリスナーといったプロパティを引き渡します。これにより、Next.jsの<Link>や独自のカスタム要素など、任意の要素をshadcn/uiのスタイルでレンダリングできます。これはReactのコンポジションの考え方に基づいており、非常に強力なカスタマイズ手法です。

  • 例: Next.jsのLinkをButtonのようにスタイリング
    “`jsx
    import Link from “next/link”;
    import { Button } from “@/components/ui/button”;

    function NavLink({ href, children }) {
    return (
    // asChild={true} で Buttonのスタイルと挙動をLinkに引き渡す
    
    {children}
    
    );
    }

    // 使用例
    Go to Dashboard
    “`

開発ワークフローの効率化

shadcn/uiはUI実装のスピードアップに貢献しますが、さらにワークフローを効率化するためのヒントがいくつかあります。

• コンポーネントの構造理解:
  • 追加したコンポーネントのコード（特にRadix UIやcvaの使い方）を積極的に読むことで、shadcn/uiの設計思想やカスタマイズ方法への理解が深まります。これは、将来的に独自のコンポーネントを作成したり、既存のコンポーネントを大きく変更したりする際に非常に役立ちます。
• StorybookやChromaticとの連携:
  • UIコンポーネントのカタログ化や視覚的回帰テストのために、Storybookを導入するのは非常に有効です。shadcn/uiコンポーネントもStorybookでドキュメント化・テストできます。Chromaticのようなサービスと連携すれば、UIの変更が意図しない影響を与えていないかを自動でチェックできます。
• VS Code拡張機能:
  • Tailwind CSS IntelliSense拡張機能は、Tailwindクラスの補完やホバーでのスタイルプレビューを提供し、スタイリング作業を大幅に効率化します。また、ESLintやPrettierを設定することで、コードの品質と一貫性を保つことができます。
• Formライブラリとの連携:
  • 複雑なフォームを扱う場合、react-hook-formとzodのようなバリデーションライブラリとの組み合わせが非常に強力です。shadcn/uiのFormコンポーネントはこれらのライブラリとの連携を想定して設計されており、ボイラープレートコードを削減し、宣言的にフォームを構築できます。Formコンポーネントのドキュメントやexampleコードを参照すると良いでしょう。
• カスタムコンポーネントの作成:
  • shadcn/uiのスタイルやパターン（CSS変数、cva、cnユーティリティ、Radix UIの利用）を参考にして、プロジェクト固有のカスタムコンポーネントを作成し、components/uiディレクトリに追加していくことで、一貫性のあるデザインシステムを構築できます。

高度なトピック

• App RouterとServer Componentsでの利用:
  • Next.jsのApp Routerでは、Server ComponentsとClient Componentsが混在します。shadcn/uiのコンポーネントは基本的にClient Componentsとして設計されています（状態やインタラクションを持つため）。コンポーネントファイルの上部に'use client'ディレクティブが付与されていることを確認してください。Server Component内でshadcn/uiコンポーネントを使用する場合は、それがクライアントコンポーネントとしてインポート・レンダリングされるように注意が必要です。
• アニメーションの追加:
  • shadcn/uiはデフォルトでRadix UIによって提供される基本的なアニメーションを含んでいます。よりリッチなアニメーションが必要な場合は、Framer Motionなどのライブラリと組み合わせるのが一般的です。asChildプロパティを使用して、shadcn/uiコンポーネントの子要素としてFramer Motionコンポーネントを配置するパターンがよく使われます。
• パフォーマンスに関する考慮事項:
  • shadcn/uiは必要なコンポーネントのみを追加するため、従来のライブラリよりもバンドルサイズは小さくなります。しかし、多くのコンポーネントを含むページでは、それらのコンポーネントがすべてクライアント側でハイドレーションされるため、JavaScriptの実行コストが発生します。必要に応じて、動的なインポート（React.lazy + Suspense または next/dynamic）を利用して、UIコンポーネントのロードを遅延させることを検討してください。
• テスト戦略:
  • shadcn/uiコンポーネントは、React Testing Libraryなどを用いて通常のReactコンポーネントと同様にテストできます。Radix UIをベースにしているため、アクセシビリティ属性（role, aria-*）が適切に設定されており、ユーザーの操作に近い形でコンポーネントをテストしやすいという利点があります。特にインタラクションが多いコンポーネント（Dialog, Dropdown Menuなど）は、これらの属性をセレクタとして利用するとテストの信頼性が高まります。

利点と欠点・注意点

shadcn/uiは多くの利点がありますが、いくつかの欠点や注意点も存在します。導入を検討する際には、これらを理解しておくことが重要です。

利点

• 高いカスタマイズ性: プロジェクトにコードがコピーされるため、デザイン、構造、ロジックを完全に制御できます。
• 優れたパフォーマンス: 不要なコードを含まず、依存関係が最小限に抑えられます。
• Tailwind CSSとの強力な統合: Tailwind CSSをベースにしているため、既存のTailwindプロジェクトにシームレスに組み込めます。
• Radix UIによるアクセシビリティと品質: 機能的な基盤がしっかりしており、アクセシビリティの懸念が軽減されます。
• コードの学習機会: 高品質なコンポーネントの実装コードを直接見られるため、UI開発のベストプラクティスを学べます。
• 依存関係の管理がシンプル: ライブラリ全体のアップデートではなく、必要なコンポーネントごとに管理できます。

欠点・注意点

• 初期設定の手間: npx shadcn-ui initによる設定や、コンポーネントごとの追加コマンドが必要です。
• コンポーネントのアップデートが手動: 新しいバージョンがリリースされた場合、npx shadcn-ui add <component-name>@latestのようにコマンドを再実行してコンポーネントファイルを上書きする必要があります。ローカルでの変更は失われるため、手動でマージするか、変更内容を管理する必要があります。
• Tailwind CSSの知識が必須: スタイリングはTailwind CSSに依存しているため、Tailwind CSSを使ったことがない場合は学習が必要です。
• デザインシステムの構築責任: 既成のデザインシステムが提供されるわけではなく、CSS変数やTailwind設定を通じて、ある程度自分でデザインシステムを構築・維持していく必要があります。
• 依存関係の分散: 各コンポーネントが必要とするRadix UIなどの依存ライブラリは個別にpackage.jsonに追加されます。従来のモノリシックなUIライブラリと比べて、依存関係リストが長くなることがあります。
• 「ライブラリ」ではないことの理解: npm install shadcn-uiのように一括で導入・管理するイメージで捉えると混乱します。あくまで「コードをコピペするツールとコード集」という認識が重要です。

これらの点を踏まえると、shadcn/uiは以下のようなプロジェクトや開発者に向いています。

• Tailwind CSSを使った開発に慣れている、または使いたいプロジェクト。
• デザインのカスタマイズ性が非常に重要視されるプロジェクト。
• バンドルサイズやパフォーマンスを最適化したいプロジェクト。
• 特定のデザインシステムやブランディングに厳密に従う必要があるプロジェクト。
• コンポーネントの実装を自身でコントロールしたい開発チーム。

逆に、Tailwind CSSを使いたくない、迅速にプロトタイプを作成したい（デザインの細かい調整は後回し）、あるいは既成の強固なデザインシステム（Material DesignやAnt Designなど）に完全に準拠したい、といったケースでは、従来のUIライブラリの方が適している可能性もあります。

まとめ：shadcn/uiが切り開くUI開発の未来

この記事では、React/Next.js開発における新たなUI実装の潮流として、shadcn/uiを詳細に解説しました。

shadcn/uiは、従来のUIコンポーネントライブラリの課題（カスタマイズ性の限界、バンドルサイズ、抽象化）に対する強力なアンチテーゼとして登場しました。「ライブラリではなく、UIコンポーネントのコレクションをコピペでプロジェクトに追加する」というユニークなアプローチは、開発者にデザインと実装の主導権を取り戻させ、究極の柔軟性を提供します。

Tailwind CSSをスタイリングの基盤とし、Radix UIをアクセシビリティと機能の基盤とすることで、shadcn/uiは美しい見た目、高い品質、そして優れたカスタマイズ性を両立しています。主要なコンポーネントは、モダンなウェブアプリケーションで必要とされるほとんどのUI要素をカバーしており、それらをnpx shadcn-ui addコマンド一つで手軽に追加できます。

初期設定やコンポーネント追加の手間、アップデートの手動性といったトレードオフはありますが、それを補って余りあるカスタマイズ性とパフォーマンスのメリットは、特にTailwind CSSを愛用する開発者や、独自のデザインシステムを構築したいチームにとって魅力的でしょう。

shadcn/uiは単なるUIコンポーネント集に留まらず、Tailwind CSS、Radix UI、Reactのコンポジションといったモダンなフロントエンド開発のベストプラクティスを凝縮した学習リソースでもあります。生成されるコードを読むことは、高品質なコンポーネント設計スキルを向上させる上で非常に価値があります。

この記事を読まれたあなたが、ぜひ実際に手を動かしてshadcn/uiを試してみてください。きっと、その開発体験の快適さと、手軽に美しいUIを実装できるパワーに驚くはずです。React/Next.js開発におけるUI実装の「爆速化」と「美しさ」を両立させる旅は、shadcn/uiとともに、ここから始まります。

今後のあなたのプロジェクトに、shadcn/uiが役立てば幸いです。