120k
New

TanStack Start

PreviousNext

Install and configure Force UI for TanStack Start.

For Force UI component installs, set REGISTRY_URL to https://forceui.public.prd.shared.perforce.com/r-react before running CLI commands. See the Force UI registry guide for preset and framework-specific setup.

Choose the setup that matches your starting point.

Use shadcn/create

Build your preset and generate a TanStack project command.

Use the CLI

Scaffold a new TanStack project from the terminal.

Existing Project

Configure Force UI manually in an existing TanStack project.

Use shadcn/create

Build Your Preset

Open shadcn/create and build your preset visually. Choose your style, colors, fonts, icons, and more.

Open shadcn/create

Create Project

Click Create Project, choose your package manager, and copy the generated command.

The generated command will look similar to this:

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

The exact command will include your selected options such as --base, --monorepo, or --rtl.

Add Components

Add the Card component to your project:

pnpm dlx shadcn@latest add @force-ui/card

If you created a monorepo, run the command from apps/web or specify the workspace from the repo root:

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

The command above will add the Card component to your project. You can then import it like this:

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>
  )
}

If you created a monorepo, update apps/web/src/routes/index.tsx and import from @workspace/ui/components/card instead.

Use the CLI

Create Project

Run the init command to scaffold a new TanStack Start project. Follow the prompts to configure your project: base, preset, monorepo, and more.

pnpm dlx shadcn@latest init -t start

For a monorepo project, use --monorepo flag:

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

Add Components

Add the Card component to your project:

pnpm dlx shadcn@latest add @force-ui/card

If you created a monorepo, run the command from apps/web or specify the workspace from the repo root:

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

The command above will add the Card component to your project. You can then import it like this:

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>
  )
}

If you created a monorepo, update apps/web/src/routes/index.tsx and import from @workspace/ui/components/card instead.

Existing Project

Create Project

If you need a new TanStack Start project, create one first. Otherwise, skip this step.

pnpm dlx @tanstack/cli@latest create

Choose TanStack Start, the React framework, and the recommended defaults so Tailwind CSS and the @/* import alias are configured for you.

The TanStack CLI already configures Tailwind CSS and the default @/* import alias for you. If you're adding Force UI to an older or custom TanStack Start app, make sure both are configured before continuing.

Run the CLI

Run the shadcn init command to set up Force UI in your project.

pnpm dlx shadcn@latest init

Add Components

You can now start adding components to your project.

pnpm dlx shadcn@latest add @force-ui/button

The command above will add the Button component to your project. You can then import it like this:

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>
  )
}