【React】shadcn/ui の使い方とカスタマイズ方法

shadcn/uiは、コンポーネントのソースコードを直接プロジェクトに追加する、UIコンポーネント集的な使い方ができます。

更新日: 7/6/2025

shadcn/uiの基本的な考え方

shadcn/uiの最大の特徴は、一般的なUIライブラリと違い、npmパッケージとしてインストールしない点です。

従来のライブラリではnpm installでパッケージを導入しimportして利用しますが、shadcn/uiではCLIコマンドを通じて必要なコンポーネントのソースコードをプロジェクト内に直接追加します。これにより、追加されたコードは完全にプロジェクトの一部となり、自由に改変できます。

その土台には、アクセシビリティに配慮したヘッドレスUIのRadix UIが使われており、見た目はTailwind CSSで定義します。また、Class Variance Authority (CVA)やclsxなどのユーティリティも併用されています。

セットアップと初期設定

shadcn/uiの導入は、CLIを使い、いくつかの質問に答えるだけで完了します。

1. 前提条件

Node.js (v16以上推奨)
React 18+
Tailwind CSS

2. プロジェクトへの導入

Next.jsやViteなどで作成したReactプロジェクトのルートで、以下のコマンドを実行します。

npx shadcn-ui@latest init

実行すると、スタイルやベースカラー、@/*のようなパスエイリアスの設定などを対話形式で質問されます。完了後、components.jsonやlib/utils.tsなどがプロジェクトに自動で追加されます。

CLIによるコンポーネントの追加

コンポーネントの追加もCLIで行います。

# buttonコンポーネントを追加
npx shadcn-ui@latest add button

# 複数コンポーネントを一度に追加
npx shadcn-ui@latest add input card dialog

例えば、buttonを追加すると、components/ui/button.tsxといったファイルが生成されます。このファイルはいつでも自由に編集できます。

コンポーネントのカスタマイズ方法

shadcn/uiの特徴に、これらのカスタマイズのしやすさが挙げられるかと思います。

1. CSS変数によるテーマの変更

globals.cssファイルに定義されたCSS変数の値を変更するだけで、サイト全体の色や角丸のサイズなどを一括で変更できます。

/* src/styles/globals.css */
@layer base {
  :root {
    /* ...既存の変数... */
    --radius: 0.75rem; /* 角丸のサイズを変更 */
  }

  .dark {
    /* ...ダークモードの変数... */
  }
}

2. 内容を直接編集できる

追加されたコンポーネント（例: button.tsx）はプロジェクトのコードの一部なので、直接ファイルを開いてTypeScriptのコードやTailwind CSSのクラスを自由に変更できます。

// components/ui/button.tsx の一部
const buttonVariants = cva(
  /* ...ベースクラス... */,
  {
    variants: {
      variant: {
        default: "...",
        // 新しい 'premium' バリアントを追加
        premium: "bg-gradient-to-r from-yellow-400 to-orange-500 text-white",
      },
      // ...
    },
  }
);

3. コンポーネントを組み合わせる

基本的なコンポーネントを組み合わせて、アプリケーション固有の部品を作ることも簡単です。

// components/shared/ProjectCard.tsx
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export function ProjectCard({ title }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <p>プロジェクトの説明...</p>
        <Button>詳細を見る</Button>
      </CardContent>
    </Card>
  );
}

テーマ設定とダークモード

ダークモード対応には、next-themesライブラリを利用するのが一般的です。

1. ThemeProviderの設定

next-themesを使い、テーマを管理するThemeProviderコンポーネントを作成します。

// components/theme-provider.tsx
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"

export function ThemeProvider({ children, ...props }) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

2. レイアウトへの適用

作成したThemeProviderをルートレイアウトに適用します。

// app/layout.tsx
import { ThemeProvider } from "@/components/theme-provider"

export default function RootLayout({ children }) {
  return (
    <html lang="ja" suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

これで、<html>タグにclass="dark"が付与されることで、CSS変数に基づいたテーマの切り替えが自動的に行われます。

まとめ

shadcn/uiは、コンポーネントのコードを直接プロジェクトで管理することで、自由なカスタマイズが可能です。

コンポーネントのコードを自分で管理する手間はありますが、提供されるコンポーネントのデザイン調整などが容易なので色々と融通が効きそうです。