125k

Next.js

PreviousNext

Next.js 用に shadcn/ui をインストールして構成します。

出発点に合ったセットアップを選択してください。

shadcn/create

プリセットを構築し、Next.js プロジェクト コマンドを生成します。

Use the CLI

新しい Next.js プロジェクトをターミナルから直接スキャフォールディングします。

Existing Project

既存の Next.js プロジェクトで shadcn/ui を手動で構成します。

shadcn/create

プリセットを構築する

shadcn/create を開いて、プリセットを視覚的に構築します。スタイル、色、フォント、アイコンなどを選択します。

shadcn/create

プロジェクトの作成

Create Project をクリックし、パッケージ マネージャーを選択し、生成されたコマンドをコピーします。

生成されるコマンドは次のようになります。

pnpm dlx shadcn@latest init --preset [CODE] --template next

正確なコマンドには、--base、--monorepo、--rtl などの選択したオプションが含まれます。

コンポーネントの追加

Card コンポーネントをプロジェクトに追加します。

pnpm dlx shadcn@latest add card

モノレポを作成した場合は apps/web からコマンドを実行するか、リポジトリのルートからワークスペースを指定します。

pnpm dlx shadcn@latest add card -c apps/web

上記のコマンドは、Card コンポーネントをプロジェクトに追加します。次に、次のようにインポートできます。

app/page.tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
 
export default function Home() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Project Overview</CardTitle>
        <CardDescription>
          Track progress and recent activity for your Next.js app.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your design system is ready. Start building your next component.
      </CardContent>
    </Card>
  )
}

モノレポを作成した場合は apps/web/app/page.tsx を更新し、代わりに @workspace/ui/components/card からインポートします。

Use the CLI

プロジェクトの作成

init コマンドを実行して、新しい Next.js プロジェクトをスキャフォールディングします。プロンプトに従って、ベース、プリセット、モノレポなどのプロジェクトを構成します。

pnpm dlx shadcn@latest init -t next

モノレポ プロジェクトの場合は、--monorepo フラグを使用します。

pnpm dlx shadcn@latest init -t next --monorepo

コンポーネントの追加

Card コンポーネントをプロジェクトに追加します。

pnpm dlx shadcn@latest add card

モノレポを作成した場合は apps/web からコマンドを実行するか、リポジトリのルートからワークスペースを指定します。

pnpm dlx shadcn@latest add card -c apps/web

上記のコマンドは、Card コンポーネントをプロジェクトに追加します。次に、次のようにインポートできます。

app/page.tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
 
export default function Home() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Project Overview</CardTitle>
        <CardDescription>
          Track progress and recent activity for your Next.js app.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your design system is ready. Start building your next component.
      </CardContent>
    </Card>
  )
}

モノレポを作成した場合は apps/web/app/page.tsx を更新し、代わりに @workspace/ui/components/card からインポートします。

Existing Project

プロジェクトの作成

新しい Next.js プロジェクトが必要な場合は、create-next-app を使用して作成します。それ以外の場合は、この手順を省略してください。

pnpm create next-app@latest

推奨されるデフォルトを選択すると、Tailwind CSS、App Router、およびデフォルトの @/* インポート エイリアスが自動的に構成されます。

src/ ディレクトリを使用する場合は、--src-dir を使用するか、プロンプトが表示されたときに Yes を選択してください。

pnpm create next-app@latest --src-dir

--src-dir を使用すると、Next.js はアプリを src/app に配置し、@/* エイリアスが ./src/* を指すように構成します。

Tailwind CSS の構成とエイリアスのインポート

推奨されるデフォルトの create-next-app でプロジェクトを作成した場合は、この手順を省略できます。

古いまたはカスタムの Next.js アプリに shadcn/ui を追加する場合は、最初に Tailwind CSS がインストールされていることを確認してください。公式の Next.js インストール ガイド を参照できます。

次に、tsconfig.json に @/* インポート エイリアスが含まれていることを確認します。

tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

--src-dir を使用した場合は、代わりにエイリアスを ./src/* に向けてください。

CLI を実行します

shadcn init コマンドを実行して、プロジェクトに shadcn/ui をセットアップします。

pnpm dlx shadcn@latest init

コンポーネントの追加

これで、プロジェクトへのコンポーネントの追加を開始できます。

pnpm dlx shadcn@latest add button

上記のコマンドは、Button コンポーネントをプロジェクトに追加します。次に、次のようにインポートできます。

app/page.tsx
import { Button } from "@/components/ui/button"
 
export default function Home() {
  return (
    <div className="flex min-h-svh items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}

--src-dir を使用した場合は、代わりにコンポーネントを src/app/page.tsx に追加してください。