125k

TanStack

PreviousNext

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

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

Use shadcn/create

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

Use the CLI

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

Existing Project

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

shadcn/create

プリセットのビルド

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

shadcn/create

プロジェクトの作成

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

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

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

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

コンポーネントの追加

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

pnpm dlx shadcn@latest add card

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

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

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

src/routes/index.tsx
import { createFileRoute } from "@tanstack/react-router"
 
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
 
export const Route = createFileRoute("/")({
  component: App,
})
 
function App() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Project Overview</CardTitle>
        <CardDescription>
          Track progress and recent activity for your TanStack Start app.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your design system is ready. Start building your next component.
      </CardContent>
    </Card>
  )
}

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

CLI

プロジェクトの作成

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

pnpm dlx shadcn@latest init -t start

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

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

コンポーネントの追加

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

pnpm dlx shadcn@latest add card

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

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

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

src/routes/index.tsx
import { createFileRoute } from "@tanstack/react-router"
 
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
 
export const Route = createFileRoute("/")({
  component: App,
})
 
function App() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Project Overview</CardTitle>
        <CardDescription>
          Track progress and recent activity for your TanStack Start app.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your design system is ready. Start building your next component.
      </CardContent>
    </Card>
  )
}

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

Existing Project

プロジェクトの作成

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

pnpm dlx @tanstack/cli@latest create

TanStack Start、React フレームワーク、および推奨デフォルトを選択して、Tailwind CSS と @/* インポート エイリアスが構成されるようにします。

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

CLI を実行します

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

pnpm dlx shadcn@latest init

コンポーネントの追加

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

pnpm dlx shadcn@latest add button

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

src/routes/index.tsx
import { createFileRoute } from "@tanstack/react-router"
 
import { Button } from "@/components/ui/button"
 
export const Route = createFileRoute("/")({
  component: App,
})
 
function App() {
  return (
    <div className="flex min-h-svh items-center justify-center p-6">
      <Button>Click me</Button>
    </div>
  )
}