feat: add react-router template

2026-06-11 09:51:40 +00:00 · 2026-02-17 15:21:13 +04:00
parent 31c1c5eb56
commit 8028a0d75d
20 changed files with 334 additions and 3 deletions
--- a/apps/v4/app/(create)/components/project-form.tsx
+++ b/apps/v4/app/(create)/components/project-form.tsx
@@ -57,6 +57,11 @@ const TEMPLATES = [
    title: "TanStack Start",
    logo: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>TanStack</title><path d="M11.078.042c.316-.042.65-.014.97-.014 1.181 0 2.341.184 3.472.532a12.3 12.3 0 0 1 3.973 2.086 11.9 11.9 0 0 1 3.432 4.33c1.446 3.15 1.436 6.97-.046 10.107-.958 2.029-2.495 3.727-4.356 4.965-1.518 1.01-3.293 1.629-5.1 1.848-2.298.279-4.784-.129-6.85-1.188-3.88-1.99-6.518-5.994-6.57-10.382-.01-.846.003-1.697.17-2.534.273-1.365.748-2.683 1.463-3.88a12 12 0 0 1 2.966-3.36A12.3 12.3 0 0 1 9.357.3a12 12 0 0 1 1.255-.2l.133-.016zM7.064 19.99c-.535.057-1.098.154-1.557.454.103.025.222 0 .33 0 .258 0 .52-.01.778.002.647.028 1.32.131 1.945.303.8.22 1.505.65 2.275.942.813.307 1.622.402 2.484.402.435 0 .866-.001 1.287-.12-.22-.117-.534-.095-.778-.144a11 11 0 0 1-1.556-.416 12 12 0 0 1-1.093-.467l-.23-.108a15 15 0 0 0-1.012-.44c-.905-.343-1.908-.512-2.873-.408m.808-2.274c-1.059 0-2.13.187-3.083.667q-.346.177-.659.41c-.063.046-.175.106-.199.188s.061.151.11.204c.238-.127.464-.261.718-.357 1.64-.624 3.63-.493 5.268.078.817.285 1.569.712 2.365 1.046.89.374 1.798.616 2.753.74 1.127.147 2.412.028 3.442-.48.362-.179.865-.451 1.018-.847-.189.017-.36.098-.539.154a9 9 0 0 1-.868.222c-.994.2-2.052.24-3.053.06-.943-.17-1.82-.513-2.693-.873l-.111-.046-.223-.092-.112-.046a26 26 0 0 0-1.35-.527c-.89-.31-1.842-.5-2.784-.5M9.728 1.452c-1.27.28-2.407.826-3.502 1.514-.637.4-1.245.81-1.796 1.323-.82.765-1.447 1.695-1.993 2.666-.563 1-.924 2.166-1.098 3.297-.172 1.11-.2 2.277-.004 3.388.245 1.388.712 2.691 1.448 3.897.248-.116.424-.38.629-.557.414-.359.85-.691 1.317-.978a3.5 3.5 0 0 1 .539-.264c.07-.029.187-.055.22-.132.053-.124-.045-.34-.062-.468a7 7 0 0 1-.068-1.109 9.7 9.7 0 0 1 .61-3.177c.29-.76.73-1.45 1.254-2.069.177-.21.365-.405.56-.6.115-.114.258-.212.33-.359-.376 0-.751.108-1.108.218-.769.237-1.518.588-2.155 1.084-.291.226-.504.522-.779.76-.084.073-.235.17-.352.116-.176-.083-.149-.43-.169-.59-.078-.612.154-1.387.45-1.918.473-.852 1.348-1.58 2.376-1.555.444.011.833.166 1.257.266-.107-.153-.252-.264-.389-.39a5.4 5.4 0 0 0-1.107-.8c-.163-.085-.338-.136-.509-.2-.086-.03-.195-.074-.227-.17-.06-.177.26-.342.377-.417.453-.289 1.01-.527 1.556-.54.854-.021 1.688.452 2.04 1.258.123.284.16.583.184.885l.004.057.006.085.002.029.005.057.004.056c.268-.218.457-.54.718-.774.612-.547 1.45-.79 2.245-.544a2.97 2.97 0 0 1 1.71 1.378c.097.173.365.595.171.767-.152.134-.344.03-.504-.026a3 3 0 0 0-.372-.094l-.068-.014-.069-.013a3.9 3.9 0 0 0-1.377-.002c-.282.05-.557.15-.838.192v.06c.768.006 1.51.444 1.89 1.109.157.275.235.59.295.9.075.38.022.796-.082 1.168-.035.125-.098.336-.247.365-.106.02-.195-.085-.256-.155a4.6 4.6 0 0 0-.492-.522 20 20 0 0 0-1.467-1.14c-.267-.19-.56-.44-.868-.556.087.208.171.402.2.63.088.667-.192 1.296-.612 1.798a2.6 2.6 0 0 1-.426.427c-.067.05-.151.114-.24.1-.277-.044-.31-.463-.353-.677-.144-.726-.086-1.447.114-2.158-.178.09-.307.287-.418.45a5.3 5.3 0 0 0-.612 1.138c-.61 1.617-.604 3.51.186 5.066.088.174.221.15.395.15h.157a3 3 0 0 1 .472.018c.08.01.193 0 .257.06.077.072.036.194.018.282-.05.246-.066.469-.066.72.328-.051.419-.576.535-.84.131-.298.265-.597.387-.9.06-.148.14-.314.119-.479-.024-.185-.157-.381-.25-.54-.177-.298-.378-.606-.508-.929-.104-.258-.007-.58.286-.672.161-.05.334.049.439.166.22.244.363.609.523.896l1.249 2.248q.159.286.32.57c.043.074.086.188.173.219.077.028.182-.012.26-.027.198-.04.398-.083.598-.12.24-.043.605-.035.778-.222-.253-.08-.545-.075-.808-.057-.158.01-.333.067-.479-.025-.216-.137-.36-.455-.492-.667-.326-.525-.633-1.057-.945-1.59l-.05-.084-.1-.17q-.075-.126-.149-.255c-.037-.066-.092-.153-.039-.227.056-.076.179-.08.29-.081h.021q.066.001.117-.004a10 10 0 0 1 1.347-.107c-.035-.122-.135-.26-.103-.39.071-.292.49-.383.686-.174.131.14.207.334.292.504.113.223.24.44.361.66.211.383.441.757.658 1.138l.055.094.028.047c.093.156.187.314.238.489-.753-.035-1.318-.909-1.646-1.499-.027.095.016.179.05.27q.103.282.262.54c.152.244.326.495.556.673.408.315.945.317 1.436.283.315-.022.708-.165 1.018-.068s.434.438.25.7c-.138.196-.321.27-.55.3.162.346.373.667.527 1.02.064.146.13.37.283.448.102.051.248.003.358 0-.11-.292-.317-.54-.419-.839.31.015.61.176.898.28.567.202 1.128.424 1.687.648l.258.104c.23.092.462.183.689.283.083.037.198.123.29.07.074-.043.123-.146.169-.215a10.3 10.3 0 0 0 1.393-3.208c.75-2.989.106-6.287-1.695-8.783-.692-.96-1.562-1.789-2.522-2.476-2.401-1.718-5.551-2.407-8.44-1.768m4.908 14.904c-.636.166-1.292.317-1.945.401.086.293.296.577.45.84.059.101.122.237.24.281.132.05.292-.03.417-.072-.058-.158-.155-.3-.235-.45-.033-.06-.084-.133-.056-.206.05-.137.263-.13.381-.153.31-.063.617-.142.928-.204.114-.023.274-.085.389-.047.086.03.138.1.187.174l.022.033q.043.07.097.122c.125.113.313.13.472.162-.097-.219-.259-.41-.362-.63-.06-.127-.11-.315-.242-.388-.182-.102-.557.089-.743.137m-4.01-1.457c-.03.38-.147.689-.33 1.019.21.026.423.036.629.087.154.038.296.11.449.153-.082-.224-.233-.423-.35-.63-.12-.208-.226-.462-.398-.63" fill="currentColor"/></svg>',
  },
+  {
+    value: "react-router",
+    title: "React Router",
+    logo: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.118 5.466a2.306 2.306 0 0 0-.623.08c-.278.067-.702.332-.953.583-.41.423-.49.609-.662 1.469-.08.423.41 1.43.847 1.734.45.317 1.085.502 2.065.608 1.429.16 1.84.636 1.84 2.197 0 1.377-.385 1.747-1.96 1.906-1.707.172-2.58.834-2.765 2.117-.106.781.41 1.76 1.125 2.091 1.627.768 3.15-.198 3.467-2.196.211-1.284.622-1.642 1.998-1.747 1.588-.133 2.409-.675 2.713-1.787.278-1.02-.304-2.157-1.297-2.554-.264-.106-.873-.238-1.35-.291-1.495-.16-1.879-.424-2.038-1.39-.225-1.337-.317-1.562-.794-2.09a2.174 2.174 0 0 0-1.613-.73zm-4.785 4.36a2.145 2.145 0 0 0-.497.048c-1.469.318-2.17 2.051-1.35 3.295 1.178 1.774 3.944.953 3.97-1.177.012-1.193-.98-2.143-2.123-2.166zM2.089 14.19a2.22 2.22 0 0 0-.427.052c-2.158.476-2.237 3.626-.106 4.182.53.145.582.145 1.111.013 1.191-.318 1.866-1.456 1.549-2.607-.278-1.02-1.144-1.664-2.127-1.64zm19.824.008c-.233.002-.477.058-.784.162-1.39.477-1.866 2.092-.98 3.336.557.794 1.96 1.058 2.82.516 1.416-.874 1.363-3.057-.093-3.746-.38-.186-.663-.271-.963-.268z" /></svg>',
+  },
  {
    value: "vite",
    title: "Vite",
@@ -170,10 +175,11 @@ export function ProjectForm() {
                    | "next"
                    | "next-monorepo"
                    | "start"
+                    | "react-router"
                    | "vite",
                })
              }}
-              className="grid grid-cols-2 gap-2"
+              className="grid grid-cols-3 gap-2"
            >
              {TEMPLATES.map((template) => (
                <FieldLabel key={template.value} htmlFor={template.value}>
--- a/apps/v4/app/(create)/lib/search-params.ts
+++ b/apps/v4/app/(create)/lib/search-params.ts
@@ -65,6 +65,7 @@ const designSystemSearchParams = {
    "next",
    "next-monorepo",
    "start",
+    "react-router",
    "vite",
  ] as const).withDefault("next"),
  rtl: parseAsBoolean.withDefault(false),
--- a/apps/v4/registry/config.ts
+++ b/apps/v4/registry/config.ts
@@ -95,7 +95,7 @@ export const designSystemConfigSchema = z
      .enum(RADII.map((r) => r.name) as [RadiusValue, ...RadiusValue[]])
      .default("default"),
    template: z
-      .enum(["next", "next-monorepo", "start", "vite"])
+      .enum(["next", "next-monorepo", "start", "react-router", "vite"])
      .default("next")
      .optional(),
  })
--- a/packages/shadcn/src/commands/init.ts
+++ b/packages/shadcn/src/commands/init.ts
@@ -71,7 +71,7 @@ export const init = new Command()
  .argument("[components...]", "names, url or local path to component")
  .option(
    "-t, --template <template>",
-    "the template to use. (next, start, vite, next-monorepo)"
+    "the template to use. (next, start, vite, next-monorepo, react-router)"
  )
  .option("-p, --preset [name]", "use a preset configuration")
  .option("-y, --yes", "skip confirmation prompt.", true)
--- a/packages/shadcn/src/templates/index.ts
+++ b/packages/shadcn/src/templates/index.ts
@@ -1,5 +1,6 @@
 import { next } from "./next"
 import { nextMonorepo } from "./next-monorepo"
+import { reactRouter } from "./react-router"
 import { start } from "./start"
 import { vite } from "./vite"

@@ -10,6 +11,7 @@ export const templates = {
  next,
  vite,
  start,
+  "react-router": reactRouter,
  "next-monorepo": nextMonorepo,
 }

--- a/packages/shadcn/src/templates/react-router.ts
+++ b/packages/shadcn/src/templates/react-router.ts
@@ -0,0 +1,109 @@
+import os from "os"
+import path from "path"
+import { handleError } from "@/src/utils/handle-error"
+import { spinner } from "@/src/utils/spinner"
+import dedent from "dedent"
+import { execa } from "execa"
+import fs from "fs-extra"
+
+import { GITHUB_TEMPLATE_URL, createTemplate } from "./create-template"
+
+export const reactRouter = createTemplate({
+  name: "react-router",
+  title: "React Router",
+  defaultProjectName: "react-router-app",
+  frameworks: ["react-router"],
+  scaffold: async ({ projectPath, packageManager }) => {
+    const createSpinner = spinner(
+      `Creating a new React Router project. This may take a few minutes.`
+    ).start()
+
+    try {
+      const localTemplateDir = process.env.SHADCN_TEMPLATE_DIR
+      if (localTemplateDir) {
+        // Use local template directory for development.
+        const localTemplatePath = path.resolve(
+          localTemplateDir,
+          "react-router-app"
+        )
+        await fs.copy(localTemplatePath, projectPath, {
+          filter: (src) => !src.includes("node_modules"),
+        })
+      } else {
+        // Get the template from GitHub.
+        const templatePath = path.join(
+          os.tmpdir(),
+          `shadcn-template-${Date.now()}`
+        )
+        await fs.ensureDir(templatePath)
+        const response = await fetch(GITHUB_TEMPLATE_URL)
+        if (!response.ok) {
+          throw new Error(`Failed to download template: ${response.statusText}`)
+        }
+
+        // Write the tar file.
+        const tarPath = path.resolve(templatePath, "template.tar.gz")
+        await fs.writeFile(tarPath, Buffer.from(await response.arrayBuffer()))
+        await execa("tar", [
+          "-xzf",
+          tarPath,
+          "-C",
+          templatePath,
+          "--strip-components=2",
+          "ui-main/templates/react-router-app",
+        ])
+        const extractedPath = path.resolve(templatePath, "react-router-app")
+        await fs.move(extractedPath, projectPath)
+        await fs.remove(templatePath)
+      }
+
+      // Remove pnpm-lock.yaml if using a different package manager.
+      if (packageManager !== "pnpm") {
+        const lockFilePath = path.join(projectPath, "pnpm-lock.yaml")
+        if (fs.existsSync(lockFilePath)) {
+          await fs.remove(lockFilePath)
+        }
+      }
+
+      // Run install.
+      await execa(packageManager, ["install"], {
+        cwd: projectPath,
+      })
+
+      // Write project name to the package.json.
+      const packageJsonPath = path.join(projectPath, "package.json")
+      if (fs.existsSync(packageJsonPath)) {
+        const packageJsonContent = await fs.readFile(packageJsonPath, "utf8")
+        const packageJson = JSON.parse(packageJsonContent)
+        packageJson.name = projectPath.split("/").pop()
+        await fs.writeFile(
+          packageJsonPath,
+          JSON.stringify(packageJson, null, 2)
+        )
+      }
+
+      createSpinner?.succeed("Creating a new React Router project.")
+    } catch (error) {
+      createSpinner?.fail(
+        "Something went wrong creating a new React Router project."
+      )
+      handleError(error)
+    }
+  },
+  create: async () => {
+    // Empty for now.
+  },
+  files: [
+    {
+      type: "registry:file",
+      path: "app/routes/home.tsx",
+      target: "app/routes/home.tsx",
+      content: dedent`import { ComponentExample } from "@/components/component-example";
+
+export default function Home() {
+  return <ComponentExample />;
+}
+`,
+    },
+  ],
+})
--- a/templates/react-router-app/.dockerignore
+++ b/templates/react-router-app/.dockerignore
@@ -0,0 +1,4 @@
+.react-router
+build
+node_modules
+README.md
--- a/templates/react-router-app/.gitignore
+++ b/templates/react-router-app/.gitignore
@@ -0,0 +1,7 @@
+.DS_Store
+.env
+/node_modules/
+
+# React Router
+/.react-router/
+/build/
--- a/templates/react-router-app/.prettierrc
+++ b/templates/react-router-app/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "app/app.css",
+  "tailwindFunctions": ["cn", "cva"]
+}
--- a/templates/react-router-app/Dockerfile
+++ b/templates/react-router-app/Dockerfile
@@ -0,0 +1,22 @@
+FROM node:20-alpine AS development-dependencies-env
+COPY . /app
+WORKDIR /app
+RUN npm ci
+
+FROM node:20-alpine AS production-dependencies-env
+COPY ./package.json package-lock.json /app/
+WORKDIR /app
+RUN npm ci --omit=dev
+
+FROM node:20-alpine AS build-env
+COPY . /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN npm run build
+
+FROM node:20-alpine
+COPY ./package.json package-lock.json /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["npm", "run", "start"]
--- a/templates/react-router-app/README.md
+++ b/templates/react-router-app/README.md
@@ -0,0 +1,21 @@
+# React Router + shadcn/ui
+
+This is a template for a new React Router project with React, TypeScript, and shadcn/ui.
+
+## Adding components
+
+To add components to your app, run the following command:
+
+```bash
+npx shadcn@latest add button
+```
+
+This will place the ui components in the `components` directory.
+
+## Using components
+
+To use the components in your app, import them as follows:
+
+```tsx
+import { Button } from "@/components/ui/button";
+```
--- a/templates/react-router-app/app/app.css
+++ b/templates/react-router-app/app/app.css
@@ -0,0 +1 @@
+@import "tailwindcss";
--- a/templates/react-router-app/app/root.tsx
+++ b/templates/react-router-app/app/root.tsx
@@ -0,0 +1,62 @@
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  isRouteErrorResponse,
+} from "react-router"
+
+import type { Route } from "./+types/root"
+import "./app.css"
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+
+export default function App() {
+  return <Outlet />
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = "Oops!"
+  let details = "An unexpected error occurred."
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? "404" : "Error"
+    details =
+      error.status === 404
+        ? "The requested page could not be found."
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <main className="container mx-auto p-4 pt-16">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full overflow-x-auto p-4">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  )
+}
--- a/templates/react-router-app/app/routes.ts
+++ b/templates/react-router-app/app/routes.ts
@@ -0,0 +1,3 @@
+import { type RouteConfig, index } from "@react-router/dev/routes"
+
+export default [index("routes/home.tsx")] satisfies RouteConfig
--- a/templates/react-router-app/app/routes/home.tsx
+++ b/templates/react-router-app/app/routes/home.tsx
@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-4 p-6">
+      <p>Hello World</p>
+    </div>
+  )
+}
--- a/templates/react-router-app/package.json
+++ b/templates/react-router-app/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "rr-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "react-router typegen && tsc",
+    "format": "prettier --write \"**/*.{ts,tsx}\""
+  },
+  "dependencies": {
+    "@react-router/node": "7.12.0",
+    "@react-router/serve": "7.12.0",
+    "isbot": "^5.1.31",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router": "7.12.0"
+  },
+  "devDependencies": {
+    "@react-router/dev": "7.12.0",
+    "@tailwindcss/vite": "^4.1.13",
+    "@types/node": "^22",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "tailwindcss": "^4.1.13",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.7",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}
--- a/templates/react-router-app/public/favicon.ico
+++ b/templates/react-router-app/public/favicon.ico
--- a/templates/react-router-app/react-router.config.ts
+++ b/templates/react-router-app/react-router.config.ts
@@ -0,0 +1,7 @@
+import type { Config } from "@react-router/dev/config"
+
+export default {
+  // Config options...
+  // Server-side render by default, to enable SPA mode set this to `false`
+  ssr: true,
+} satisfies Config
--- a/templates/react-router-app/tsconfig.json
+++ b/templates/react-router-app/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "include": [
+    "**/*",
+    "**/.server/**/*",
+    "**/.client/**/*",
+    ".react-router/types/**/*"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node", "vite/client"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "rootDirs": [".", "./.react-router/types"],
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}
--- a/templates/react-router-app/vite.config.ts
+++ b/templates/react-router-app/vite.config.ts
@@ -0,0 +1,8 @@
+import { reactRouter } from "@react-router/dev/vite"
+import tailwindcss from "@tailwindcss/vite"
+import { defineConfig } from "vite"
+import tsconfigPaths from "vite-tsconfig-paths"
+
+export default defineConfig({
+  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+})