125k

React Router

PreviousNext

React Router 用に shadcn/ui をインストールして構成します。

開始点と一致するセットアップを選択します。

Use shadcn/create

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

Use the CLI

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

Existing Project

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

shadcn/create

プリセットのビルド

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

shadcn/create

プロジェクトの作成

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

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

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

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

コンポーネントの追加

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

pnpm dlx shadcn@latest add card

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

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

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

app/routes/home.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 React Router app.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your design system is ready. Start building your next component.
      </CardContent>
    </Card>
  )
}

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

CLI

プロジェクトの作成

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

pnpm dlx shadcn@latest init -t react-router

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

pnpm dlx shadcn@latest init -t react-router --monorepo

コンポーネントの追加

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

pnpm dlx shadcn@latest add card

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

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

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

app/routes/home.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 React Router app.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your design system is ready. Start building your next component.
      </CardContent>
    </Card>
  )
}

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

Existing Project

プロジェクトの作成

新しい React Router プロジェクトが必要な場合は、先に作成します。既存のプロジェクトがある場合は、この手順を省略してください。

pnpm create react-router@latest

create-react-router はすでに Tailwind CSS とデフォルトの ~/* インポート エイリアスを構成しています。 shadcn/ui を古いまたはカスタム React Router アプリに追加する場合は、続行する前に両方が構成されていることを確認してください。

CLI を実行します

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

pnpm dlx shadcn@latest init

コンポーネントの追加

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

pnpm dlx shadcn@latest add button

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

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