111k

TanStack Start

Install and configure shadcn/ui for TanStack Start.

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