RustForWeb · DanielleHuisman · Oct 11, 2025 · Oct 11, 2025
diff --git a/.gitignore b/.gitignore
@@ -162,5 +162,12 @@ target/
 # mdBook
 book/book/
 
+# React Router
+.react-router/
+build/
+
 # SeaORM
 packages/storage/shield-sea-orm/src/entities_template/
+
+# Turborepo
+.turbo/
diff --git a/.prettierignore b/.prettierignore
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,7 +1,11 @@
 {
-    "bracketSpacing": false,
+    "importOrder": ["^~", "^[.]"],
+    "importOrderSeparation": true,
+    "importOrderSortSpecifiers": true,
+    "jsonRecursiveSort": true,
+    "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-sort-json", "prettier-plugin-tailwindcss"],
     "printWidth": 120,
     "singleQuote": true,
     "tabWidth": 4,
-    "trailingComma": "none"
+    "tailwindStylesheet": "./examples/react-router/assets/css/index.css"
 }
diff --git a/book/theme/tabs.js b/book/theme/tabs.js
@@ -54,7 +54,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 localStorage.setItem(`mdbook-tabs-${global}`, name);
 
                 const globalContainers = document.querySelectorAll(
-                    `.mdbook-tabs-container[data-tabglobal="${global}"]`
+                    `.mdbook-tabs-container[data-tabglobal="${global}"]`,
                 );
                 for (const globalContainer of globalContainers) {
                     changeTab(globalContainer, name);

diff --git a/examples/react-router/app/lib/utils.ts b/examples/react-router/app/lib/utils.ts
@@ -0,0 +1,4 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
diff --git a/examples/react-router/app/root.tsx b/examples/react-router/app/root.tsx
@@ -0,0 +1,64 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse } from 'react-router';
+
+import '~assets/css/index.css';
+
+import type { Route } from './+types/root';
+
+export const Layout = ({ children }: React.PropsWithChildren) => {
+    return (
+        <html lang="en">
+            <head>
+                <meta charSet="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+                <title>Shield React Router Example</title>
+
+                <Meta />
+                <Links />
+            </head>
+            <body>
+                {children}
+
+                <ScrollRestoration />
+                <Scripts />
+            </body>
+        </html>
+    );
+};
+
+const queryClient = new QueryClient();
+
+const App = () => (
+    <QueryClientProvider client={queryClient}>
+        <Outlet />
+    </QueryClientProvider>
+);
+
+export default App;
+
+export const 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>
+    );
+};
diff --git a/examples/react-router/app/routes.ts b/examples/react-router/app/routes.ts
@@ -0,0 +1,12 @@
+import { type RouteConfig, index, prefix, route } from '@react-router/dev/routes';
+
+export default [
+    index('routes/home.tsx'),
+
+    ...prefix('auth', [
+        index('routes/auth/action.tsx', {
+            id: 'routes/auth/action-index',
+        }),
+        route(':actionId', 'routes/auth/action.tsx'),
+    ]),
+] satisfies RouteConfig;
diff --git a/examples/react-router/app/routes/auth/action.tsx b/examples/react-router/app/routes/auth/action.tsx
@@ -0,0 +1,10 @@
+import { Action } from '@rustforweb/shield-react-router';
+import { ShadcnUiStyle } from '@rustforweb/shield-react-shadcn-ui';
+
+import type { Route } from './+types/action';
+
+const ActionRoute = (props: Route.ComponentProps) => {
+    return <Action style={ShadcnUiStyle} {...props} />;
+};
+
+export default ActionRoute;
diff --git a/examples/react-router/app/routes/home.tsx b/examples/react-router/app/routes/home.tsx
@@ -0,0 +1,3 @@
+const HomeRoute = () => <h1>Shield React Router Example</h1>;
+
+export default HomeRoute;
diff --git a/examples/react-router/assets/css/index.css b/examples/react-router/assets/css/index.css
@@ -0,0 +1,124 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@source "../../../../node_modules/@rustforweb/shield-react-shadcn-ui";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+    --radius: 0.65rem;
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+    * {
+        @apply border-border outline-ring/50;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}
diff --git a/examples/react-router/components.json b/examples/react-router/components.json
@@ -0,0 +1,21 @@
+{
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "aliases": {
+        "components": "~/components",
+        "hooks": "~/hooks",
+        "lib": "~/lib",
+        "ui": "~/components/ui",
+        "utils": "~/lib/utils"
+    },
+    "iconLibrary": "lucide",
+    "rsc": false,
+    "style": "new-york",
+    "tailwind": {
+        "baseColor": "neutral",
+        "config": "",
+        "css": "assets/css/index.css",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "tsx": true
+}
diff --git a/examples/react-router/package.json b/examples/react-router/package.json
@@ -0,0 +1,41 @@
+{
+    "name": "@rustforweb/shield-examples-react-router",
+    "description": "Example with React Router.",
+    "author": "Rust for Web <info@rustforweb.org>",
+    "repository": "github:RustForWeb/shield",
+    "license": "MIT",
+    "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"
+    },
+    "dependencies": {
+        "@react-router/node": "^7.9.2",
+        "@react-router/serve": "^7.9.2",
+        "@rustforweb/shield-react-router": "^0.1.0",
+        "@rustforweb/shield-react-shadcn-ui": "^0.1.0",
+        "@tanstack/react-query": "^5.90.2",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "isbot": "^5.1.31",
+        "react": "^19.1.1",
+        "react-dom": "^19.1.1",
+        "react-router": "^7.9.2",
+        "tailwind-merge": "^3.3.1"
+    },
+    "devDependencies": {
+        "@react-router/dev": "^7.9.2",
+        "@tailwindcss/vite": "^4.1.13",
+        "@types/node": "^22",
+        "@types/react": "^19.1.13",
+        "@types/react-dom": "^19.1.9",
+        "tailwindcss": "^4.1.14",
+        "tw-animate-css": "^1.4.0",
+        "typescript": "^5.9.2",
+        "vite": "^7.1.7",
+        "vite-tsconfig-paths": "^5.1.4"
+    }
+}
diff --git a/examples/react-router/react-router.config.ts b/examples/react-router/react-router.config.ts
@@ -0,0 +1,5 @@
+import type { Config } from '@react-router/dev/config';
+
+export default {
+    ssr: false,
+} satisfies Config;
diff --git a/examples/react-router/tsconfig.json b/examples/react-router/tsconfig.json
@@ -0,0 +1,19 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig.json",
+    "compilerOptions": {
+        "baseUrl": ".",
+        "jsx": "react-jsx",
+        "lib": ["ESNext", "DOM", "DOM.Iterable"],
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "noEmit": true,
+        "paths": {
+            "~/*": ["./app/*"],
+            "~assets/*": ["./assets/*"]
+        },
+        "rootDirs": [".", "./.react-router/types"],
+        "types": ["vite/client"]
+    },
+    "extends": "../../tsconfig.base.json",
+    "include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*"]
+}
diff --git a/examples/react-router/vite.config.ts b/examples/react-router/vite.config.ts
@@ -0,0 +1,13 @@
+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: [reactRouter(), tailwindcss(), tsconfigPaths()],
+    server: {
+        proxy: {
+            '/api': 'http://localhost:8080',
+        },
+    },
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const HomeRoute = () => <h1>Shield React Router Example</h1>;

		export default HomeRoute;