Skip to content
shadcn.io
shadcn.io is not affiliated with official shadcn/ui

TanStack Start

Install shadcn.io in a TanStack Start project.

Use the shadcn.io preset

Initialize a TanStack Start project with the shadcn.io registry preset.

Use the CLI

Scaffold a new TanStack Start project from the terminal.

Existing Project

Configure shadcn.io manually in an existing TanStack Start project.

Use the shadcn.io Preset

Create Project

Run the init command with the shadcn.io preset and the TanStack Start template:

bunx --bun shadcn@latest init https://kit.dev/r/style.json -t start

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

bunx --bun shadcn@latest add https://kit.dev/r/button.json

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json

Then import and use components 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>
  );
}

Use the CLI

Create Project

Run the init command to scaffold a new TanStack Start project and configure shadcn.io:

bunx --bun shadcn@latest init https://kit.dev/r/style.json -t start

For a monorepo project, use the --monorepo flag:

bunx --bun shadcn@latest init https://kit.dev/r/style.json -t start --monorepo

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

bunx --bun shadcn@latest add https://kit.dev/r/button.json

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

bunx --bun shadcn@latest add https://kit.dev/r/button.json -c apps/web

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json

Then import and use components 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>
  );
}

If you created a monorepo, update apps/web/src/routes/index.tsx and import from your workspace UI package instead.

Existing Project

Create Project

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

bunx --bun @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.

Do not add the shadcn add-on when prompted. The shadcn CLI will configure shadcn.io later in this guide.

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

Run the CLI

Run the shadcn init command with the shadcn.io preset to set up your project.

bunx --bun shadcn@latest init https://kit.dev/r/style.json

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

bunx --bun shadcn@latest add https://kit.dev/r/button.json

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json

Then import and use components 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>
  );
}