React Router

Install shadcn/ui in React Router with the official CLI. Framework mode, the ~/ alias, then add a component from the shadcn.io registry.

init -t react-router scaffolds the app. create-react-router already sets Tailwind and ~/*. Imports in this stack are ~/components/ui/…, not @/.

Use the CLI

Scaffold React Router from the terminal

Existing project

Add shadcn to an app you have

Use the CLI

Create the project

npx shadcn@latest init -t react-router

Monorepo:

npx shadcn@latest init -t react-router --monorepo

Add a component

npx shadcn@latest add https://www.shadcn.io/r/card.json

Monorepo: from apps/web, or -c apps/web from the root.

Import it

app/routes/home.tsx

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card"

export default function Home() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Project Overview</CardTitle>
        <CardDescription>
          Track progress and recent activity for your React Router app.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your design system is ready. Start building your next component.
      </CardContent>
    </Card>
  )
}

Monorepo: apps/web/app/routes/home.tsx, import @workspace/ui/components/card.

Existing project

Create the app if you need one

npm create react-router@latest

Tailwind and ~/* are already configured. Skip this if the repo exists.

Run init

npx shadcn@latest init

Add a component

npx shadcn@latest add https://www.shadcn.io/r/button.json

app/routes/home.tsx

import { Button } from "~/components/ui/button"

export default function Home() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}