Skip to content
shadcn.io
shadcn.io is not affiliated with official shadcn/ui

React Router

Install shadcn.io in a React Router project.

Use the shadcn.io preset

Initialize a React Router project with the shadcn.io registry preset.

Use the CLI

Scaffold a new React Router project directly from the terminal.

Existing Project

Configure shadcn.io manually in an existing React Router project.

Use the shadcn.io Preset

Create Project

bunx --bun shadcn@latest init https://kit.dev/r/style.json -t react-router

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

bunx --bun shadcn@latest add https://kit.dev/r/button.json

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json

Then import and use components like this:

app/routes/home.tsx
import { Button } from "~/components/ui/button";
import type { Route } from "./+types/home";

export const meta = ({}: Route.MetaArgs) => {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
};

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

Use the CLI

Create Project

Run the init command to scaffold a new React Router project and configure shadcn.io:

bunx --bun shadcn@latest init https://kit.dev/r/style.json -t react-router

For a monorepo project, use the --monorepo flag:

bunx --bun shadcn@latest init https://kit.dev/r/style.json -t react-router --monorepo

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

bunx --bun shadcn@latest add https://kit.dev/r/button.json

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

bunx --bun shadcn@latest add https://kit.dev/r/button.json -c apps/web

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json

Then import and use components like this:

app/routes/home.tsx
import { Button } from "~/components/ui/button";
import type { Route } from "./+types/home";

export const meta = ({}: Route.MetaArgs) => {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
};

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

If you created a monorepo, update apps/web/app/routes/home.tsx and import from your workspace UI package instead.

Existing Project

Create Project

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

bunx --bun create-react-router@latest my-app

Run the CLI

Run the shadcn init command with the shadcn.io preset to set up your project.

bunx --bun shadcn@latest init https://kit.dev/r/style.json

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

bunx --bun shadcn@latest add https://kit.dev/r/button.json

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json

Then import and use components like this:

app/routes/home.tsx
import { Button } from "~/components/ui/button";
import type { Route } from "./+types/home";

export const meta = ({}: Route.MetaArgs) => {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
};

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