<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
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# IDEs and editors
/.idea
/.vscode

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
">
<input type="hidden" name="project[files][README.md]" value="# Material UI - Preact 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-preact
cd material-ui-preact
```

Install it and run:

```bash
npm install
npm run start
```

## The idea behind the example

The project uses Material UI with [Preact](https://github.com/developit/preact), which is a lightweight (3 kB) alternative to React with the same modern API.

This example uses CRA with `react-app-rewired` for adding webpack aliases for Preact.

It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI.

&lt;!-- #host-reference --&gt;

If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components).

## 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][config-overrides.js]" value="const { addWebpackAlias, override } = require(&#39;customize-cra&#39;);

module.exports = override(
  addWebpackAlias({
    react: &#39;preact/compat&#39;,
    &#39;react-dom&#39;: &#39;preact/compat&#39;,
  }),
);
">
<input type="hidden" name="project[files][package.json]" value="{&quot;name&quot;:&quot;material-ui-preact&quot;,&quot;version&quot;:&quot;7.0.0&quot;,&quot;private&quot;:true,&quot;dependencies&quot;:{&quot;@babel/helper-builder-react-jsx&quot;:&quot;latest&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;@testing-library/jest-dom&quot;:&quot;latest&quot;,&quot;@testing-library/react&quot;:&quot;latest&quot;,&quot;@testing-library/user-event&quot;:&quot;latest&quot;,&quot;preact&quot;:&quot;latest&quot;,&quot;react-scripts&quot;:&quot;^5.0.0&quot;},&quot;scripts&quot;:{&quot;start&quot;:&quot;react-app-rewired start&quot;,&quot;build&quot;:&quot;react-app-rewired build&quot;,&quot;test&quot;:&quot;react-app-rewired test&quot;,&quot;eject&quot;:&quot;react-app-rewired eject&quot;},&quot;browserslist&quot;:{&quot;production&quot;:[&quot;&gt;0.2%&quot;,&quot;not dead&quot;,&quot;not op_mini all&quot;],&quot;development&quot;:[&quot;last 1 chrome version&quot;,&quot;last 1 firefox version&quot;,&quot;last 1 safari version&quot;]},&quot;devDependencies&quot;:{&quot;customize-cra&quot;:&quot;latest&quot;,&quot;react-app-rewired&quot;:&quot;latest&quot;}}">
<input type="hidden" name="project[files][public/favicon.ico]" value="https://pkg.pr.new/template/68353cc4-2e36-4ee4-8c51-cc0b4630273f">
<input type="hidden" name="project[files][public/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; href=&quot;%PUBLIC_URL%/favicon.ico&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
    &lt;title&gt;Preact + Material UI&lt;/title&gt;
    &lt;!-- Fonts to support Material Design --&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;/head&gt;
  &lt;body&gt;
    &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
    &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
">
<input type="hidden" name="project[files][public/manifest.json]" value="{
  &quot;short_name&quot;: &quot;React App&quot;,
  &quot;name&quot;: &quot;Create React App Sample&quot;,
  &quot;icons&quot;: [
    {
      &quot;src&quot;: &quot;favicon.ico&quot;,
      &quot;sizes&quot;: &quot;64x64 32x32 24x24 16x16&quot;,
      &quot;type&quot;: &quot;image/x-icon&quot;
    },
    {
      &quot;src&quot;: &quot;logo192.png&quot;,
      &quot;type&quot;: &quot;image/png&quot;,
      &quot;sizes&quot;: &quot;192x192&quot;
    },
    {
      &quot;src&quot;: &quot;logo512.png&quot;,
      &quot;type&quot;: &quot;image/png&quot;,
      &quot;sizes&quot;: &quot;512x512&quot;
    }
  ],
  &quot;start_url&quot;: &quot;.&quot;,
  &quot;display&quot;: &quot;standalone&quot;,
  &quot;theme_color&quot;: &quot;#000000&quot;,
  &quot;background_color&quot;: &quot;#ffffff&quot;
}
">
<input type="hidden" name="project[files][src/App.js]" 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 Preact example
        &lt;/Typography&gt;
        &lt;ProTip /&gt;
        &lt;Copyright /&gt;
      &lt;/Box&gt;
    &lt;/Container&gt;
  );
}
">
<input type="hidden" name="project[files][src/Copyright.js]" value="import * as React from &#39;react&#39;;
import Typography from &#39;@mui/material/Typography&#39;;
import MuiLink 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;MuiLink color=&quot;inherit&quot; href=&quot;https://mui.com/&quot;&gt;
        Your Website
      &lt;/MuiLink&gt;{&#39; &#39;}
      {new Date().getFullYear()}.
    &lt;/Typography&gt;
  );
}
">
<input type="hidden" name="project[files][src/ProTip.js]" 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/index.js]" value="import * as React from &#39;react&#39;;
import * as ReactDOMClient from &#39;react-dom/client&#39;;
import App from &#39;./App&#39;;

const root = ReactDOMClient.createRoot(document.getElementById(&#39;root&#39;));

root.render(
  &lt;React.StrictMode&gt;
    &lt;App /&gt;
  &lt;/React.StrictMode&gt;,
);
">
<input type="hidden" name="project[files][src/setupTests.js]" value="// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import &#39;@testing-library/jest-dom/extend-expect&#39;;
">
<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-preact">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>