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

<form id="mainForm" method="post" action="https://stackblitz.com/run" target="_self">
<input type="hidden" name="project[files][.gitignore]" value="# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
node_modules

# misc
.DS_Store
dist
dist-ssr
*.local">
<input type="hidden" name="project[files][README.md]" value="# Material UI - Vite.js example

## How to use

Download the example [or clone the repo](https://github.com/mui/material-ui):

&lt;!-- #target-branch-reference --&gt;

```bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-vite
cd material-ui-vite
```

Install it and run:

```bash
npm install
npm run dev
```

or:

&lt;!-- #target-branch-reference --&gt;

[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-vite)

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-vite)

## The idea behind the example

This example uses [Vite.js](https://github.com/vitejs/vite).
It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI.

## What&#39;s next?

&lt;!-- #host-reference --&gt;

You now have a working example project.
You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section.
">
<input type="hidden" name="project[files][index.html]" value="&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;link rel=&quot;icon&quot; type=&quot;image/svg+xml&quot; href=&quot;/vite.svg&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1, width=device-width&quot; /&gt;
    &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot; /&gt;
    &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin /&gt;
    &lt;link
      rel=&quot;stylesheet&quot;
      href=&quot;https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&amp;display=swap&quot;
    /&gt;
    &lt;title&gt;Vite + Material UI&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
    &lt;script type=&quot;module&quot; src=&quot;/src/main.jsx&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
">
<input type="hidden" name="project[files][package.json]" value="{&quot;name&quot;:&quot;material-ui-vite&quot;,&quot;version&quot;:&quot;7.0.0&quot;,&quot;private&quot;:true,&quot;scripts&quot;:{&quot;dev&quot;:&quot;vite&quot;,&quot;build&quot;:&quot;vite build&quot;,&quot;serve&quot;:&quot;vite preview&quot;},&quot;dependencies&quot;:{&quot;@emotion/react&quot;:&quot;latest&quot;,&quot;@emotion/styled&quot;:&quot;latest&quot;,&quot;@mui/material&quot;:&quot;https://pkg.pr.new/mui/material-ui/@mui/material@a64e0bf1a85b74aafac2746481aefef7e2ab0434&quot;,&quot;react&quot;:&quot;latest&quot;,&quot;react-dom&quot;:&quot;latest&quot;},&quot;devDependencies&quot;:{&quot;@vitejs/plugin-react&quot;:&quot;latest&quot;,&quot;vite&quot;:&quot;latest&quot;}}">
<input type="hidden" name="project[files][vite.config.js]" value="import { defineConfig } from &#39;vite&#39;;
import react from &#39;@vitejs/plugin-react&#39;;

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
});
">
<input type="hidden" name="project[files][public/vite.svg]" value="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; aria-hidden=&quot;true&quot; role=&quot;img&quot; class=&quot;iconify iconify--logos&quot; width=&quot;31.88&quot; height=&quot;32&quot; preserveAspectRatio=&quot;xMidYMid meet&quot; viewBox=&quot;0 0 256 257&quot;&gt;&lt;defs&gt;&lt;linearGradient id=&quot;IconifyId1813088fe1fbc01fb466&quot; x1=&quot;-.828%&quot; x2=&quot;57.636%&quot; y1=&quot;7.652%&quot; y2=&quot;78.411%&quot;&gt;&lt;stop offset=&quot;0%&quot; stop-color=&quot;#41D1FF&quot;&gt;&lt;/stop&gt;&lt;stop offset=&quot;100%&quot; stop-color=&quot;#BD34FE&quot;&gt;&lt;/stop&gt;&lt;/linearGradient&gt;&lt;linearGradient id=&quot;IconifyId1813088fe1fbc01fb467&quot; x1=&quot;43.376%&quot; x2=&quot;50.316%&quot; y1=&quot;2.242%&quot; y2=&quot;89.03%&quot;&gt;&lt;stop offset=&quot;0%&quot; stop-color=&quot;#FFEA83&quot;&gt;&lt;/stop&gt;&lt;stop offset=&quot;8.333%&quot; stop-color=&quot;#FFDD35&quot;&gt;&lt;/stop&gt;&lt;stop offset=&quot;100%&quot; stop-color=&quot;#FFA800&quot;&gt;&lt;/stop&gt;&lt;/linearGradient&gt;&lt;/defs&gt;&lt;path fill=&quot;url(#IconifyId1813088fe1fbc01fb466)&quot; d=&quot;M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;url(#IconifyId1813088fe1fbc01fb467)&quot; d=&quot;M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;">
<input type="hidden" name="project[files][src/App.jsx]" value="import * as React from &#39;react&#39;;
import Container from &#39;@mui/material/Container&#39;;
import Typography from &#39;@mui/material/Typography&#39;;
import Box from &#39;@mui/material/Box&#39;;
import ProTip from &#39;./ProTip&#39;;
import Copyright from &#39;./Copyright&#39;;

export default function App() {
  return (
    &lt;Container maxWidth=&quot;sm&quot;&gt;
      &lt;Box sx={{ my: 4 }}&gt;
        &lt;Typography variant=&quot;h4&quot; component=&quot;h1&quot; sx={{ mb: 2 }}&gt;
          Material UI Vite.js example
        &lt;/Typography&gt;
        &lt;ProTip /&gt;
        &lt;Copyright /&gt;
      &lt;/Box&gt;
    &lt;/Container&gt;
  );
}
">
<input type="hidden" name="project[files][src/Copyright.jsx]" value="import * as React from &#39;react&#39;;
import Typography from &#39;@mui/material/Typography&#39;;
import Link from &#39;@mui/material/Link&#39;;

export default function Copyright() {
  return (
    &lt;Typography
      variant=&quot;body2&quot;
      align=&quot;center&quot;
      sx={{
        color: &#39;text.secondary&#39;,
      }}
    &gt;
      {&#39;Copyright © &#39;}
      &lt;Link color=&quot;inherit&quot; href=&quot;https://mui.com/&quot;&gt;
        Your Website
      &lt;/Link&gt;{&#39; &#39;}
      {new Date().getFullYear()}.
    &lt;/Typography&gt;
  );
}
">
<input type="hidden" name="project[files][src/ProTip.jsx]" value="import * as React from &#39;react&#39;;
import Link from &#39;@mui/material/Link&#39;;
import SvgIcon from &#39;@mui/material/SvgIcon&#39;;
import Typography from &#39;@mui/material/Typography&#39;;

function LightBulbIcon(props) {
  return (
    &lt;SvgIcon {...props}&gt;
      &lt;path d=&quot;M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z&quot; /&gt;
    &lt;/SvgIcon&gt;
  );
}

export default function ProTip() {
  return (
    &lt;Typography sx={{ mt: 6, mb: 3, color: &#39;text.secondary&#39; }}&gt;
      &lt;LightBulbIcon sx={{ mr: 1, verticalAlign: &#39;middle&#39; }} /&gt;
      {&#39;Pro tip: See more &#39;}
      &lt;Link href=&quot;https://mui.com/material-ui/getting-started/templates/&quot;&gt;templates&lt;/Link&gt;
      {&#39; in the Material UI documentation.&#39;}
    &lt;/Typography&gt;
  );
}
">
<input type="hidden" name="project[files][src/main.jsx]" value="import * as React from &#39;react&#39;;
import * as ReactDOM from &#39;react-dom/client&#39;;
import CssBaseline from &#39;@mui/material/CssBaseline&#39;;
import { ThemeProvider } from &#39;@mui/material/styles&#39;;
import App from &#39;./App&#39;;
import theme from &#39;./theme&#39;;

const rootElement = document.getElementById(&#39;root&#39;);
const root = ReactDOM.createRoot(rootElement);

root.render(
  &lt;React.StrictMode&gt;
    &lt;ThemeProvider theme={theme}&gt;
      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
      &lt;CssBaseline /&gt;
      &lt;App /&gt;
    &lt;/ThemeProvider&gt;
  &lt;/React.StrictMode&gt;,
);
">
<input type="hidden" name="project[files][src/theme.js]" value="import { createTheme } from &#39;@mui/material/styles&#39;;
import { red } from &#39;@mui/material/colors&#39;;

// Create a theme instance.
const theme = createTheme({
  cssVariables: true,
  palette: {
    primary: {
      main: &#39;#556cd6&#39;,
    },
    secondary: {
      main: &#39;#19857b&#39;,
    },
    error: {
      main: red.A400,
    },
  },
});

export default theme;
">
<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="material-ui-vite">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>