1

TanStack Start

PreviousNext

Install and configure Ondo 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 Ondo UI manually in an existing TanStack project.

Use the CLI

Create Project

bunx --bun @dou.so/ondo-ui@latest init -t start

For a monorepo, use bunx --bun @dou.so/ondo-ui@latest init -t start --monorepo.

Add Components

The command installs the Ondo theme and registers @ondo-ui. Add more components with:

bunx --bun shadcn@latest add @ondo-ui/button

Existing Project

Create Project

If you need a new project, run the TanStack CLI and choose TanStack Start, React, and the recommended defaults:

bunx --bun @tanstack/cli@latest create

The CLI configures Tailwind CSS and the default @/* import alias. Do not add the shadcn add-on; configure it in the next step.

Run the CLI

bunx --bun shadcn@latest init

Register the Ondo Registry

components.json
{
  "registries": {
    "@ondo-ui": "https://ui.ondo.dou.so/r/{name}.json"
  }
}

Add the Theme and a Component

bunx --bun shadcn@latest add @ondo-ui/theme @ondo-ui/theme-provider
npx shadcn@latest add @ondo-ui/button

Follow the theming guide to add ThemeProvider when needed.

Use the Component

import { Button } from "@/components/ui/button"
 
export function Example() {
  return <Button>Click me</Button>
}