<html lang="en">
<head></head>
<body>

<form id="mainForm" method="post" action="https://stackblitz.com/run" target="_self">
<input type="hidden" name="project[files][.prettierignore]" value="**/build
**/public
pnpm-lock.yaml
routeTree.gen.ts">
<input type="hidden" name="project[files][README.md]" value="# TanStack Start - Material UI Example

A TanStack Start example demonstrating integration with Material UI (MUI).

- [TanStack Router Docs](https://tanstack.com/router)
- [Material UI Documentation](https://mui.com/)

## Start a new project based on this example

To start a new project based on this example, run:

```sh
npx gitpick TanStack/router/tree/main/examples/react/start-material-ui start-material-ui
```

## Getting Started

From your terminal:

```sh
pnpm install
pnpm dev
```

This starts your app in development mode, rebuilding assets on file changes.

## Build

To build the app for production:

```sh
pnpm build
```

## Material UI Integration

This example demonstrates how to integrate Material UI components with TanStack Start, including:

- Theme configuration
- Server-side rendering with MUI
- Using MUI components in your routes
">
<input type="hidden" name="project[files][package.json]" value="{&quot;name&quot;:&quot;tanstack-start-example-material-ui&quot;,&quot;private&quot;:true,&quot;sideEffects&quot;:false,&quot;type&quot;:&quot;module&quot;,&quot;scripts&quot;:{&quot;dev&quot;:&quot;vite dev&quot;,&quot;build&quot;:&quot;vite build &amp;&amp; tsc --noEmit&quot;,&quot;preview&quot;:&quot;vite preview&quot;,&quot;start&quot;:&quot;pnpx srvx --prod -s ../client dist/server/server.js&quot;},&quot;dependencies&quot;:{&quot;@emotion/cache&quot;:&quot;11.14.0&quot;,&quot;@emotion/react&quot;:&quot;11.14.0&quot;,&quot;@emotion/styled&quot;:&quot;11.14.0&quot;,&quot;@fontsource-variable/roboto&quot;:&quot;5.2.5&quot;,&quot;@mui/material&quot;:&quot;6.4.7&quot;,&quot;@tanstack/react-router&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/react-router@e1c34ffdf31d70311e79f524a1c35a5fa644ea03&quot;,&quot;@tanstack/react-start&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/react-start@e1c34ffdf31d70311e79f524a1c35a5fa644ea03&quot;,&quot;@tanstack/react-router-devtools&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@e1c34ffdf31d70311e79f524a1c35a5fa644ea03&quot;,&quot;react&quot;:&quot;^19.0.0&quot;,&quot;react-dom&quot;:&quot;^19.0.0&quot;,&quot;zod&quot;:&quot;^3.24.2&quot;},&quot;devDependencies&quot;:{&quot;@types/node&quot;:&quot;^22.5.4&quot;,&quot;@types/react&quot;:&quot;^19.0.8&quot;,&quot;@types/react-dom&quot;:&quot;^19.0.3&quot;,&quot;@vitejs/plugin-react&quot;:&quot;^4.3.4&quot;,&quot;typescript&quot;:&quot;^5.7.2&quot;,&quot;vite&quot;:&quot;^7.3.1&quot;,&quot;vite-tsconfig-paths&quot;:&quot;^5.1.4&quot;}}">
<input type="hidden" name="project[files][tsconfig.json]" value="{
  &quot;include&quot;: [&quot;**/*.ts&quot;, &quot;**/*.tsx&quot;, &quot;public/script*.js&quot;],
  &quot;compilerOptions&quot;: {
    &quot;strict&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;jsx&quot;: &quot;react-jsx&quot;,
    &quot;module&quot;: &quot;ESNext&quot;,
    &quot;moduleResolution&quot;: &quot;Bundler&quot;,
    &quot;lib&quot;: [&quot;DOM&quot;, &quot;DOM.Iterable&quot;, &quot;ES2022&quot;],
    &quot;isolatedModules&quot;: true,
    &quot;resolveJsonModule&quot;: true,
    &quot;skipLibCheck&quot;: true,
    &quot;target&quot;: &quot;ES2022&quot;,
    &quot;allowJs&quot;: true,
    &quot;forceConsistentCasingInFileNames&quot;: true,
    &quot;baseUrl&quot;: &quot;.&quot;,
    &quot;paths&quot;: {
      &quot;~/*&quot;: [&quot;./src/*&quot;]
    },
    &quot;noEmit&quot;: true
  }
}
">
<input type="hidden" name="project[files][vite.config.ts]" value="import { tanstackStart } from &#39;@tanstack/react-start/plugin/vite&#39;
import { defineConfig } from &#39;vite&#39;
import tsConfigPaths from &#39;vite-tsconfig-paths&#39;
import viteReact from &#39;@vitejs/plugin-react&#39;

export default defineConfig({
  server: {
    port: 3000,
  },
  ssr: {
    noExternal: [&#39;@mui/*&#39;],
  },
  plugins: [
    tsConfigPaths({
      projects: [&#39;./tsconfig.json&#39;],
    }),
    tanstackStart(),
    viteReact(),
  ],
})
">
<input type="hidden" name="project[files][public/favicon.ico]" value="https://pkg.pr.new/template/d1234abd-025a-427f-8ba3-9af2036ffee6">
<input type="hidden" name="project[files][src/routeTree.gen.ts]" value="/* eslint-disable */

// @ts-nocheck

// noinspection JSUnusedGlobalSymbols

// This file was automatically generated by TanStack Router.
// You should NOT make any changes in this file as it will be overwritten.
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.

import { Route as rootRouteImport } from &#39;./routes/__root&#39;
import { Route as AboutRouteImport } from &#39;./routes/about&#39;
import { Route as IndexRouteImport } from &#39;./routes/index&#39;

const AboutRoute = AboutRouteImport.update({
  id: &#39;/about&#39;,
  path: &#39;/about&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const IndexRoute = IndexRouteImport.update({
  id: &#39;/&#39;,
  path: &#39;/&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)

export interface FileRoutesByFullPath {
  &#39;/&#39;: typeof IndexRoute
  &#39;/about&#39;: typeof AboutRoute
}
export interface FileRoutesByTo {
  &#39;/&#39;: typeof IndexRoute
  &#39;/about&#39;: typeof AboutRoute
}
export interface FileRoutesById {
  __root__: typeof rootRouteImport
  &#39;/&#39;: typeof IndexRoute
  &#39;/about&#39;: typeof AboutRoute
}
export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths: &#39;/&#39; | &#39;/about&#39;
  fileRoutesByTo: FileRoutesByTo
  to: &#39;/&#39; | &#39;/about&#39;
  id: &#39;__root__&#39; | &#39;/&#39; | &#39;/about&#39;
  fileRoutesById: FileRoutesById
}
export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  AboutRoute: typeof AboutRoute
}

declare module &#39;@tanstack/react-router&#39; {
  interface FileRoutesByPath {
    &#39;/about&#39;: {
      id: &#39;/about&#39;
      path: &#39;/about&#39;
      fullPath: &#39;/about&#39;
      preLoaderRoute: typeof AboutRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/&#39;: {
      id: &#39;/&#39;
      path: &#39;/&#39;
      fullPath: &#39;/&#39;
      preLoaderRoute: typeof IndexRouteImport
      parentRoute: typeof rootRouteImport
    }
  }
}

const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  AboutRoute: AboutRoute,
}
export const routeTree = rootRouteImport
  ._addFileChildren(rootRouteChildren)
  ._addFileTypes&lt;FileRouteTypes&gt;()

import type { getRouter } from &#39;./router.tsx&#39;
import type { createStart } from &#39;@tanstack/react-start&#39;
declare module &#39;@tanstack/react-start&#39; {
  interface Register {
    ssr: true
    router: Awaited&lt;ReturnType&lt;typeof getRouter&gt;&gt;
  }
}
">
<input type="hidden" name="project[files][src/router.tsx]" value="import { createRouter } from &#39;@tanstack/react-router&#39;
import { routeTree } from &#39;./routeTree.gen&#39;

export function getRouter() {
  const router = createRouter({
    routeTree,
    defaultPreload: &#39;intent&#39;,
    defaultErrorComponent: (err) =&gt; &lt;p&gt;{err.error.stack}&lt;/p&gt;,
    defaultNotFoundComponent: () =&gt; &lt;p&gt;not found&lt;/p&gt;,
    scrollRestoration: true,
  })

  return router
}

declare module &#39;@tanstack/react-router&#39; {
  interface Register {
    router: ReturnType&lt;typeof getRouter&gt;
  }
}
">
<input type="hidden" name="project[files][src/components/Counter.tsx]" value="import { Stack } from &#39;@mui/material&#39;
import { useSearch } from &#39;@tanstack/react-router&#39;
import { CustomButtonLink } from &#39;~/components/CustomButtonLink&#39;

export function Counter() {
  const { count = 0 } = useSearch({ from: &#39;/&#39; })

  return (
    &lt;Stack&gt;
      &lt;CustomButtonLink
        variant=&quot;contained&quot;
        size=&quot;large&quot;
        to={&#39;/&#39;}
        search={{ count: count + 1 }}
      &gt;
        Clicks: {count}
      &lt;/CustomButtonLink&gt;
    &lt;/Stack&gt;
  )
}
">
<input type="hidden" name="project[files][src/components/CustomButtonLink.tsx]" value="import React from &#39;react&#39;
import { createLink } from &#39;@tanstack/react-router&#39;
import { Button } from &#39;@mui/material&#39;
import type { ButtonProps } from &#39;@mui/material&#39;
import type { LinkComponent } from &#39;@tanstack/react-router&#39;

interface MUIButtonLinkProps extends ButtonProps&lt;&#39;a&#39;&gt; {
  // Add any additional props you want to pass to the Button
}

const MUIButtonLinkComponent = React.forwardRef&lt;
  HTMLAnchorElement,
  MUIButtonLinkProps
&gt;((props, ref) =&gt; &lt;Button ref={ref} component=&quot;a&quot; {...props} /&gt;)

const CreatedButtonLinkComponent = createLink(MUIButtonLinkComponent)

export const CustomButtonLink: LinkComponent&lt;typeof MUIButtonLinkComponent&gt; = (
  props,
) =&gt; {
  return &lt;CreatedButtonLinkComponent preload={&#39;intent&#39;} {...props} /&gt;
}
">
<input type="hidden" name="project[files][src/components/CustomLink.tsx]" value="import React from &#39;react&#39;
import { createLink } from &#39;@tanstack/react-router&#39;
import { Link } from &#39;@mui/material&#39;
import type { LinkProps } from &#39;@mui/material&#39;
import type { LinkComponent } from &#39;@tanstack/react-router&#39;

interface MUILinkProps extends LinkProps {
  // Add any additional props you want to pass to the Link
}

const MUILinkComponent = React.forwardRef&lt;HTMLAnchorElement, MUILinkProps&gt;(
  (props, ref) =&gt; &lt;Link ref={ref} {...props} /&gt;,
)

const CreatedLinkComponent = createLink(MUILinkComponent)

export const CustomLink: LinkComponent&lt;typeof MUILinkComponent&gt; = (props) =&gt; {
  return &lt;CreatedLinkComponent preload={&#39;intent&#39;} {...props} /&gt;
}
">
<input type="hidden" name="project[files][src/components/Header.tsx]" value="import { AppBar, Box, Toolbar, css, styled } from &#39;@mui/material&#39;
import { CustomLink } from &#39;./CustomLink&#39;

const StyledCustomLink = styled(CustomLink)(
  ({ theme }) =&gt; css`
    color: ${theme.palette.common.white};
  `,
)

export function Header() {
  return (
    &lt;Box sx={{ flexGrow: 1 }}&gt;
      &lt;AppBar position=&quot;static&quot;&gt;
        &lt;Toolbar sx={{ gap: 2 }}&gt;
          &lt;StyledCustomLink to=&quot;/&quot;&gt;Index&lt;/StyledCustomLink&gt;
          &lt;StyledCustomLink to=&quot;/about&quot;&gt;About&lt;/StyledCustomLink&gt;
        &lt;/Toolbar&gt;
      &lt;/AppBar&gt;
    &lt;/Box&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/__root.tsx]" value="/// &lt;reference types=&quot;vite/client&quot; /&gt;
import { TanStackRouterDevtools } from &#39;@tanstack/react-router-devtools&#39;
import {
  HeadContent,
  Outlet,
  Scripts,
  createRootRoute,
} from &#39;@tanstack/react-router&#39;
import { CacheProvider } from &#39;@emotion/react&#39;
import { Container, CssBaseline, ThemeProvider } from &#39;@mui/material&#39;
import createCache from &#39;@emotion/cache&#39;
import fontsourceVariableRobotoCss from &#39;@fontsource-variable/roboto?url&#39;
import React from &#39;react&#39;
import { theme } from &#39;~/setup/theme&#39;
import { Header } from &#39;~/components/Header&#39;

export const Route = createRootRoute({
  head: () =&gt; ({
    links: [{ rel: &#39;stylesheet&#39;, href: fontsourceVariableRobotoCss }],
  }),
  component: RootComponent,
})

function RootComponent() {
  return (
    &lt;RootDocument&gt;
      &lt;Outlet /&gt;
    &lt;/RootDocument&gt;
  )
}

function Providers({ children }: { children: React.ReactNode }) {
  const emotionCache = createCache({ key: &#39;css&#39; })

  return (
    &lt;CacheProvider value={emotionCache}&gt;
      &lt;ThemeProvider theme={theme}&gt;
        &lt;CssBaseline /&gt;
        {children}
      &lt;/ThemeProvider&gt;
    &lt;/CacheProvider&gt;
  )
}

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    &lt;html&gt;
      &lt;head&gt;
        &lt;HeadContent /&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;Providers&gt;
          &lt;Header /&gt;

          &lt;Container component=&quot;main&quot; sx={{ paddingBlock: 4 }}&gt;
            {children}
          &lt;/Container&gt;
        &lt;/Providers&gt;

        &lt;TanStackRouterDevtools position=&quot;bottom-right&quot; /&gt;
        &lt;Scripts /&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/about.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
import { Typography } from &#39;@mui/material&#39;

export const Route = createFileRoute(&#39;/about&#39;)({
  component: RouteComponent,
})

function RouteComponent() {
  return &lt;Typography variant=&quot;h2&quot;&gt;About&lt;/Typography&gt;
}
">
<input type="hidden" name="project[files][src/routes/index.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
import { Stack, Typography } from &#39;@mui/material&#39;
import z from &#39;zod&#39;
import { Counter } from &#39;~/components/Counter&#39;

export const Route = createFileRoute(&#39;/&#39;)({
  validateSearch: z.object({
    count: z.number().optional(),
  }),
  component: RouteComponent,
})

function RouteComponent() {
  return (
    &lt;Stack alignItems=&quot;center&quot;&gt;
      &lt;Typography variant=&quot;h1&quot; marginBlockEnd={4}&gt;
        Hello world!
      &lt;/Typography&gt;
      &lt;Counter /&gt;
    &lt;/Stack&gt;
  )
}
">
<input type="hidden" name="project[files][src/setup/theme.ts]" value="import { createTheme } from &#39;@mui/material/styles&#39;

export const theme = createTheme({
  typography: {
    fontFamily: &quot;&#39;Roboto Variable&#39;, sans-serif&quot;,
  },
})
">
<input type="hidden" name="project[description]" value="generated by https://pkg.pr.new">
<input type="hidden" name="project[template]" value="node">
<input type="hidden" name="project[title]" value="tanstack-start-example-material-ui">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>