Get started
Fabricator UI

Search documentation

Search pages, components, blocks, styles and colours.

TanStack Start

PreviousNext

Install and configure Fabricator UI for TanStack Start.

Choose the setup that matches your starting point.

Use the CLI

Scaffold a new TanStack project from the terminal.

Existing Project

Configure Fabricator UI manually in an existing TanStack project.

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.

bunx --bun fabricator-ui@latest init -t start

For a monorepo project, use --monorepo flag:

bunx --bun fabricator-ui@latest init -t start --monorepo

To choose the base (base, radix or aria), use the -b flag. Base UI is the default.

bunx --bun fabricator-ui@latest init -t start -b radix

Add Components

Add the Card component to your project:

bunx --bun fabricator-ui@latest add card

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

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

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.

Skip any UI add-ons when prompted. The fabricator-ui CLI configures Fabricator UI later in this guide.

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

Run the CLI

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

bunx --bun fabricator-ui@latest init

If the project already has components installed, init asks whether to add the @fabricator registry only, or to also apply the Fabricator theme. See Registry.

Add Components

You can now start adding components to your project.

bunx --bun fabricator-ui@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>
  )
}