├── .yarnrc.yml
├── public
    └── favicon.ico
├── .gitignore
├── app
    ├── components
    │   ├── Welcome
    │   │   ├── Welcome.story.tsx
    │   │   ├── Welcome.module.css
    │   │   └── Welcome.tsx
    │   └── ColorSchemeToggle
    │   │   └── ColorSchemeToggle.tsx
    ├── routes
    │   └── _index.tsx
    ├── entry.client.tsx
    ├── root.tsx
    └── entry.server.tsx
├── README.md
├── vite.config.ts
├── postcss.config.cjs
├── tsconfig.json
├── package.json
└── .eslintrc.cjs


/.yarnrc.yml:
--------------------------------------------------------------------------------
1 | nodeLinker: node-modules
2 | 
3 | yarnPath: .yarn/releases/yarn-4.6.0.cjs
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mantinedev/remix-template/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 
3 | /.cache
4 | /build
5 | .env
6 | .yarn/install-state.gz
7 | .DS_Store


--------------------------------------------------------------------------------
/app/components/Welcome/Welcome.story.tsx:
--------------------------------------------------------------------------------
1 | import { Welcome } from './Welcome';
2 | 
3 | export default {
4 |   title: 'Welcome',
5 | };
6 | 
7 | export const Usage = () => <Welcome />;
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Deprecated Remix template
2 | 
3 | The template is deprecated and no longer maintained. Follow [react-router v7](https://reactrouter.com/start/framework/installation) installation instructions and [Mantine documentation](https://mantine.dev/guides/react-router/) to initialize new React Router project.
4 | 


--------------------------------------------------------------------------------
/app/components/Welcome/Welcome.module.css:
--------------------------------------------------------------------------------
 1 | .title {
 2 |   color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
 3 |   font-size: rem(100px);
 4 |   font-weight: 900;
 5 |   letter-spacing: rem(-2px);
 6 | 
 7 |   @media (max-width: $mantine-breakpoint-md) {
 8 |     font-size: rem(50px);
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { vitePlugin as remix } from "@remix-run/dev";
 2 | import { installGlobals } from "@remix-run/node";
 3 | import { defineConfig } from "vite";
 4 | import tsconfigPaths from "vite-tsconfig-paths";
 5 | 
 6 | installGlobals();
 7 | 
 8 | export default defineConfig({
 9 |   plugins: [remix(), tsconfigPaths()],
10 | });
11 | 


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   plugins: {
 3 |     "postcss-preset-mantine": {},
 4 |     "postcss-simple-vars": {
 5 |       variables: {
 6 |         "mantine-breakpoint-xs": "36em",
 7 |         "mantine-breakpoint-sm": "48em",
 8 |         "mantine-breakpoint-md": "62em",
 9 |         "mantine-breakpoint-lg": "75em",
10 |         "mantine-breakpoint-xl": "88em",
11 |       },
12 |     },
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/app/components/ColorSchemeToggle/ColorSchemeToggle.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { Button, Group, useMantineColorScheme } from '@mantine/core';
 4 | 
 5 | export function ColorSchemeToggle() {
 6 |   const { setColorScheme } = useMantineColorScheme();
 7 | 
 8 |   return (
 9 |     <Group justify="center" mt="xl">
10 |       <Button onClick={() => setColorScheme('light')}>Light</Button>
11 |       <Button onClick={() => setColorScheme('dark')}>Dark</Button>
12 |       <Button onClick={() => setColorScheme('auto')}>Auto</Button>
13 |     </Group>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/app/routes/_index.tsx:
--------------------------------------------------------------------------------
 1 | import type { MetaFunction } from "@remix-run/node";
 2 | import { Welcome } from "~/components/Welcome/Welcome";
 3 | import { ColorSchemeToggle } from "~/components/ColorSchemeToggle/ColorSchemeToggle";
 4 | 
 5 | export const meta: MetaFunction = () => {
 6 |   return [
 7 |     { title: "Mantine Remix App" },
 8 |     { name: "description", content: "Welcome to Mantine!" },
 9 |   ];
10 | };
11 | 
12 | export default function Index() {
13 |   return (
14 |     <div>
15 |       <Welcome />
16 |       <ColorSchemeToggle />
17 |     </div>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/app/entry.client.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * By default, Remix will handle hydrating your app on the client for you.
 3 |  * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
 4 |  * For more information, see https://remix.run/file-conventions/entry.client
 5 |  */
 6 | 
 7 | import { RemixBrowser } from "@remix-run/react";
 8 | import { startTransition, StrictMode } from "react";
 9 | import { hydrateRoot } from "react-dom/client";
10 | 
11 | startTransition(() => {
12 |   hydrateRoot(
13 |     document,
14 |     <StrictMode>
15 |       <RemixBrowser />
16 |     </StrictMode>
17 |   );
18 | });
19 | 


--------------------------------------------------------------------------------
/app/root.tsx:
--------------------------------------------------------------------------------
 1 | import "@mantine/core/styles.css";
 2 | 
 3 | import { MantineProvider, ColorSchemeScript } from "@mantine/core";
 4 | import {
 5 |   Links,
 6 |   Meta,
 7 |   Outlet,
 8 |   Scripts,
 9 |   ScrollRestoration,
10 | } from "@remix-run/react";
11 | 
12 | export function Layout({ children }: { children: React.ReactNode }) {
13 |   return (
14 |     <html lang="en">
15 |       <head>
16 |         <meta charSet="utf-8" />
17 |         <meta name="viewport" content="width=device-width, initial-scale=1" />
18 |         <Meta />
19 |         <Links />
20 |         <ColorSchemeScript />
21 |       </head>
22 |       <body>
23 |         <MantineProvider>{children}</MantineProvider>
24 |         <ScrollRestoration />
25 |         <Scripts />
26 |       </body>
27 |     </html>
28 |   );
29 | }
30 | 
31 | export default function App() {
32 |   return <Outlet />;
33 | }
34 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": [
 3 |     "**/*.ts",
 4 |     "**/*.tsx",
 5 |     "**/.server/**/*.ts",
 6 |     "**/.server/**/*.tsx",
 7 |     "**/.client/**/*.ts",
 8 |     "**/.client/**/*.tsx"
 9 |   ],
10 |   "compilerOptions": {
11 |     "lib": ["DOM", "DOM.Iterable", "ES2022"],
12 |     "types": ["@remix-run/node", "vite/client"],
13 |     "isolatedModules": true,
14 |     "esModuleInterop": true,
15 |     "jsx": "react-jsx",
16 |     "module": "ESNext",
17 |     "moduleResolution": "Bundler",
18 |     "resolveJsonModule": true,
19 |     "target": "ES2022",
20 |     "strict": true,
21 |     "allowJs": true,
22 |     "skipLibCheck": true,
23 |     "forceConsistentCasingInFileNames": true,
24 |     "baseUrl": ".",
25 |     "paths": {
26 |       "~/*": ["./app/*"]
27 |     },
28 | 
29 |     // Vite takes care of building everything, not tsc.
30 |     "noEmit": true
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/app/components/Welcome/Welcome.tsx:
--------------------------------------------------------------------------------
 1 | import { Title, Text, Anchor } from "@mantine/core";
 2 | import classes from "./Welcome.module.css";
 3 | 
 4 | export function Welcome() {
 5 |   return (
 6 |     <>
 7 |       <Title className={classes.title} ta="center" mt={100}>
 8 |         Welcome to{" "}
 9 |         <Text
10 |           inherit
11 |           variant="gradient"
12 |           component="span"
13 |           gradient={{ from: "pink", to: "yellow" }}
14 |         >
15 |           Mantine
16 |         </Text>
17 |       </Title>
18 |       <Text color="dimmed" ta="center" size="lg" maw={580} mx="auto" mt="xl">
19 |         This starter Remix project includes a minimal setup for server side
20 |         rendering, if you want to learn more on Mantine + Remix integration
21 |         follow{" "}
22 |         <Anchor href="https://mantine.dev/guides/remix/" size="lg">
23 |           this guide
24 |         </Anchor>
25 |         . To get started edit index.tsx file.
26 |       </Text>
27 |     </>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vite-remix",
 3 |   "private": true,
 4 |   "sideEffects": false,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "build": "remix vite:build",
 8 |     "dev": "remix vite:dev",
 9 |     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
10 |     "start": "remix-serve ./build/server/index.js",
11 |     "typecheck": "tsc"
12 |   },
13 |   "dependencies": {
14 |     "@mantine/core": "7.16.0",
15 |     "@mantine/hooks": "7.16.0",
16 |     "@remix-run/node": "^2.9.2",
17 |     "@remix-run/react": "^2.9.2",
18 |     "@remix-run/serve": "^2.9.2",
19 |     "isbot": "^5.1.9",
20 |     "react": "^18.3.1",
21 |     "react-dom": "^18.3.1"
22 |   },
23 |   "devDependencies": {
24 |     "@remix-run/dev": "^2.9.2",
25 |     "@types/react": "^18.3.3",
26 |     "@types/react-dom": "^18.3.0",
27 |     "@typescript-eslint/eslint-plugin": "^7.13.1",
28 |     "@typescript-eslint/parser": "^7.13.1",
29 |     "eslint": "^8.57.0",
30 |     "eslint-import-resolver-typescript": "^3.6.1",
31 |     "eslint-plugin-import": "^2.29.1",
32 |     "eslint-plugin-jsx-a11y": "^6.9.0",
33 |     "eslint-plugin-react": "^7.34.3",
34 |     "eslint-plugin-react-hooks": "^4.6.2",
35 |     "postcss": "^8.4.38",
36 |     "postcss-preset-mantine": "1.17.0",
37 |     "postcss-simple-vars": "^7.0.1",
38 |     "typescript": "^5.5.2",
39 |     "vite": "^5.3.1",
40 |     "vite-tsconfig-paths": "^4.3.2"
41 |   },
42 |   "engines": {
43 |     "node": ">=18.0.0"
44 |   },
45 |   "packageManager": "yarn@4.6.0"
46 | }
47 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This is intended to be a basic starting point for linting in your app.
 3 |  * It relies on recommended configs out of the box for simplicity, but you can
 4 |  * and should modify this configuration to best suit your team's needs.
 5 |  */
 6 | 
 7 | /** @type {import('eslint').Linter.Config} */
 8 | module.exports = {
 9 |   root: true,
10 |   parserOptions: {
11 |     ecmaVersion: "latest",
12 |     sourceType: "module",
13 |     ecmaFeatures: {
14 |       jsx: true,
15 |     },
16 |   },
17 |   env: {
18 |     browser: true,
19 |     commonjs: true,
20 |     es6: true,
21 |   },
22 | 
23 |   // Base config
24 |   extends: ["eslint:recommended"],
25 | 
26 |   overrides: [
27 |     // React
28 |     {
29 |       files: ["**/*.{js,jsx,ts,tsx}"],
30 |       plugins: ["react", "jsx-a11y"],
31 |       extends: [
32 |         "plugin:react/recommended",
33 |         "plugin:react/jsx-runtime",
34 |         "plugin:react-hooks/recommended",
35 |         "plugin:jsx-a11y/recommended",
36 |       ],
37 |       settings: {
38 |         react: {
39 |           version: "detect",
40 |         },
41 |         formComponents: ["Form"],
42 |         linkComponents: [
43 |           { name: "Link", linkAttribute: "to" },
44 |           { name: "NavLink", linkAttribute: "to" },
45 |         ],
46 |         "import/resolver": {
47 |           typescript: {},
48 |         },
49 |       },
50 |     },
51 | 
52 |     // Typescript
53 |     {
54 |       files: ["**/*.{ts,tsx}"],
55 |       plugins: ["@typescript-eslint", "import"],
56 |       parser: "@typescript-eslint/parser",
57 |       settings: {
58 |         "import/internal-regex": "^~/",
59 |         "import/resolver": {
60 |           node: {
61 |             extensions: [".ts", ".tsx"],
62 |           },
63 |           typescript: {
64 |             alwaysTryTypes: true,
65 |           },
66 |         },
67 |       },
68 |       extends: [
69 |         "plugin:@typescript-eslint/recommended",
70 |         "plugin:import/recommended",
71 |         "plugin:import/typescript",
72 |       ],
73 |     },
74 | 
75 |     // Node
76 |     {
77 |       files: [".eslintrc.cjs"],
78 |       env: {
79 |         node: true,
80 |       },
81 |     },
82 |   ],
83 | };
84 | 


--------------------------------------------------------------------------------
/app/entry.server.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * By default, Remix will handle generating the HTTP Response for you.
  3 |  * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
  4 |  * For more information, see https://remix.run/file-conventions/entry.server
  5 |  */
  6 | 
  7 | import { PassThrough } from "node:stream";
  8 | 
  9 | import type { AppLoadContext, EntryContext } from "@remix-run/node";
 10 | import { createReadableStreamFromReadable } from "@remix-run/node";
 11 | import { RemixServer } from "@remix-run/react";
 12 | import { isbot } from "isbot";
 13 | import { renderToPipeableStream } from "react-dom/server";
 14 | 
 15 | const ABORT_DELAY = 5_000;
 16 | 
 17 | export default function handleRequest(
 18 |   request: Request,
 19 |   responseStatusCode: number,
 20 |   responseHeaders: Headers,
 21 |   remixContext: EntryContext,
 22 |   // This is ignored so we can keep it in the template for visibility.  Feel
 23 |   // free to delete this parameter in your app if you're not using it!
 24 |   // eslint-disable-next-line @typescript-eslint/no-unused-vars
 25 |   loadContext: AppLoadContext
 26 | ) {
 27 |   return isbot(request.headers.get("user-agent") || "")
 28 |     ? handleBotRequest(
 29 |         request,
 30 |         responseStatusCode,
 31 |         responseHeaders,
 32 |         remixContext
 33 |       )
 34 |     : handleBrowserRequest(
 35 |         request,
 36 |         responseStatusCode,
 37 |         responseHeaders,
 38 |         remixContext
 39 |       );
 40 | }
 41 | 
 42 | function handleBotRequest(
 43 |   request: Request,
 44 |   responseStatusCode: number,
 45 |   responseHeaders: Headers,
 46 |   remixContext: EntryContext
 47 | ) {
 48 |   return new Promise((resolve, reject) => {
 49 |     let shellRendered = false;
 50 |     const { pipe, abort } = renderToPipeableStream(
 51 |       <RemixServer
 52 |         context={remixContext}
 53 |         url={request.url}
 54 |         abortDelay={ABORT_DELAY}
 55 |       />,
 56 |       {
 57 |         onAllReady() {
 58 |           shellRendered = true;
 59 |           const body = new PassThrough();
 60 |           const stream = createReadableStreamFromReadable(body);
 61 | 
 62 |           responseHeaders.set("Content-Type", "text/html");
 63 | 
 64 |           resolve(
 65 |             new Response(stream, {
 66 |               headers: responseHeaders,
 67 |               status: responseStatusCode,
 68 |             })
 69 |           );
 70 | 
 71 |           pipe(body);
 72 |         },
 73 |         onShellError(error: unknown) {
 74 |           reject(error);
 75 |         },
 76 |         onError(error: unknown) {
 77 |           responseStatusCode = 500;
 78 |           // Log streaming rendering errors from inside the shell.  Don't log
 79 |           // errors encountered during initial shell rendering since they'll
 80 |           // reject and get logged in handleDocumentRequest.
 81 |           if (shellRendered) {
 82 |             console.error(error);
 83 |           }
 84 |         },
 85 |       }
 86 |     );
 87 | 
 88 |     setTimeout(abort, ABORT_DELAY);
 89 |   });
 90 | }
 91 | 
 92 | function handleBrowserRequest(
 93 |   request: Request,
 94 |   responseStatusCode: number,
 95 |   responseHeaders: Headers,
 96 |   remixContext: EntryContext
 97 | ) {
 98 |   return new Promise((resolve, reject) => {
 99 |     let shellRendered = false;
100 |     const { pipe, abort } = renderToPipeableStream(
101 |       <RemixServer
102 |         context={remixContext}
103 |         url={request.url}
104 |         abortDelay={ABORT_DELAY}
105 |       />,
106 |       {
107 |         onShellReady() {
108 |           shellRendered = true;
109 |           const body = new PassThrough();
110 |           const stream = createReadableStreamFromReadable(body);
111 | 
112 |           responseHeaders.set("Content-Type", "text/html");
113 | 
114 |           resolve(
115 |             new Response(stream, {
116 |               headers: responseHeaders,
117 |               status: responseStatusCode,
118 |             })
119 |           );
120 | 
121 |           pipe(body);
122 |         },
123 |         onShellError(error: unknown) {
124 |           reject(error);
125 |         },
126 |         onError(error: unknown) {
127 |           responseStatusCode = 500;
128 |           // Log streaming rendering errors from inside the shell.  Don't log
129 |           // errors encountered during initial shell rendering since they'll
130 |           // reject and get logged in handleDocumentRequest.
131 |           if (shellRendered) {
132 |             console.error(error);
133 |           }
134 |         },
135 |       }
136 |     );
137 | 
138 |     setTimeout(abort, ABORT_DELAY);
139 |   });
140 | }
141 | 


--------------------------------------------------------------------------------