TanStack Start

For TanStack Start, with file-based routes.

A new project

Create the project

The shadcn CLI creates the app, sets up Tailwind CSS and writes the theme tokens in one go:

npx shadcn@latest init -t start

pnpm dlx shadcn@latest init -t start

yarn dlx shadcn@latest init -t start

bunx shadcn@latest init -t start

Add a component

npx shadcn@latest add https://panelui.dev/r/web/rolling-number.json

pnpm dlx shadcn@latest add https://panelui.dev/r/web/rolling-number.json

yarn dlx shadcn@latest add https://panelui.dev/r/web/rolling-number.json

bunx shadcn@latest add https://panelui.dev/r/web/rolling-number.json

The source is written to components/panelui/rolling-number.tsx, and the packages it uses are installed for you.

Use it

src/routes/index.tsx

import { createFileRoute } from "@tanstack/react-router"
import { RollingNumber } from "@/components/panelui/rolling-number"

export const Route = createFileRoute("/")({ component: Home })

function Home() {
  return (
    <main className="flex min-h-svh items-center justify-center">
      <RollingNumber value={121} className="text-6xl font-semibold" />
    </main>
  )
}

An existing project

Run the CLI in the project. It adds the theme tokens to your CSS and writes components.json:

npx shadcn@latest init

pnpm dlx shadcn@latest init

yarn dlx shadcn@latest init

bunx shadcn@latest init

Then add a component as in the steps above.

From npm

To install the package instead of copying source, follow From npm once the project has its shadcn theme.