【Next.js】ShadcnUIの導入・使い方

プロジェクトでShadcnUIを使うことになったので、導入方法と基本的な使い方を残しておく。

導入手順

インストール

• initコマンド - CLI Reference | shadcn/ui
• ベースカラーの選択: https://ui.shadcn.com/colors

# -b, --base-color <base-color> : プロジェクトのベースカラーを選択できる (https://ui.shadcn.com/colors)
pnpm dlx shadcn@latest init

コンポーネントの追加

• addコマンド - CLI Reference | shadcn/ui

pnpm dlx shadcn@latest add button

app/page.tsx を編集して動作確認してください。

import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

shadcn/ui の設定ファイル components.json

• 主な設定項目
  • $schema: スキーマ定義のURL（shadcn/ui公式のスキーマ）
  • style: コンポーネントのスタイルバリアント（"new-york" または "default"）
  • rsc: React Server Components を使用するかどうか
  • tsx: TypeScript を使用するかどうか
• Tailwind CSS 設定
  • config: Tailwind設定ファイルのパス
  • css: グローバルCSSファイルのパス
  • baseColor: ベースカラー（"neutral"）
  • cssVariables: CSS変数を使用するかどうか
  • prefix: クラス名のプレフィックス
• その他
  • iconLibrary: 使用するアイコンライブラリ（"lucide"）
  • aliases: パスエイリアスの定義（@/components, @/libなど）
  • registries: カスタムコンポーネントレジストリの設定

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {}
}