111k

React Router

Install and configure shadcn/ui for React Router.

Choose the setup that matches your starting point.

Use shadcn/create

Build your preset and generate a React Router project.

Use the CLI

Scaffold a new React Router project directly from the terminal.

Existing Project

Configure shadcn/ui manually in an existing React Router project.

Use shadcn/create

Build Your Preset

Open shadcn/create and build your preset visually. Choose your style, colors, fonts, icons, and more.

Open shadcn/create

Create Project

Click Create Project, choose your package manager, and copy the generated command.

The generated command will look similar to this:

>_
pnpm dlx shadcn@latest init --preset [CODE] --template react-router

The exact command will include your selected options such as --base, --monorepo, or --rtl.

Add Components

Add the Card component to your project:

>_
pnpm dlx shadcn@latest add card

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

>_
pnpm dlx shadcn@latest add card -c apps/web

The command above will add the Card component to your project. You can then import it like this:

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>
  )
}

If you created a monorepo, update apps/web/app/routes/home.tsx and import from @workspace/ui/components/card instead.

Use the CLI

Create Project

Run the init command to scaffold a new React Router project. Follow the prompts to configure your project: base, preset, monorepo, and more.

>_
pnpm dlx shadcn@latest init -t react-router

For a monorepo project, use --monorepo flag:

>_
pnpm dlx shadcn@latest init -t react-router --monorepo

Add Components

Add the Card component to your project:

>_
pnpm dlx shadcn@latest add card

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

>_
pnpm dlx shadcn@latest add card -c apps/web

The command above will add the Card component to your project. You can then import it like this:

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>
  )
}

If you created a monorepo, update apps/web/app/routes/home.tsx and import from @workspace/ui/components/card instead.

Existing Project

Create Project

If you need a new React Router project, create one first. Otherwise, skip this step.

>_
pnpm create react-router@latest

create-react-router already configures Tailwind CSS and the default ~/* import alias for you. If you're adding shadcn/ui to an older or custom React Router app, make sure both are configured before continuing.

Run the CLI

Run the shadcn init command to set up shadcn/ui in your project.

>_
pnpm dlx shadcn@latest init

Add Components

You can now start adding components to your project.

>_
pnpm dlx shadcn@latest add button

The command above will add the Button component to your project. You can then import it like this:

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>
  )
}