React Router

Create Project

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:

You can also install every component at once:

Then import and use components like this:

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

Create Project

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

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

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:

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

You can also install every component at once:

Then import and use components like this:

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.

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.

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:

You can also install every component at once:

Then import and use components like this:

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