mui · mnajdova · Jan 27, 2022 · Sep 9, 2021 · Sep 9, 2021 · Jan 26, 2022
diff --git a/docs/src/pages/getting-started/example-projects/example-projects.md b/docs/src/pages/getting-started/example-projects/example-projects.md
@@ -16,6 +16,7 @@ You can find some example projects in the [GitHub repository](https://github.com
 - [CDN](https://github.com/mui-org/material-ui/tree/master/examples/cdn)
 - [Plain server-side](https://github.com/mui-org/material-ui/tree/master/examples/ssr)
 - [Tailwind CSS](https://github.com/mui-org/material-ui/tree/master/examples/tailwind)
+- [Vite.js](https://github.com/mui-org/material-ui/tree/next/examples/vitejs)
 - [Use styled-components as style engine](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-styled-components) ([TypeScript version](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-styled-components-typescript))
 
 Create React App is an awesome project for learning React.

diff --git a/examples/vitejs/.gitignore b/examples/vitejs/.gitignore
@@ -0,0 +1,10 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# misc
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/vitejs/README.md b/examples/vitejs/README.md
@@ -0,0 +1,39 @@
+# Vite.js example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/mui-org/material-ui):
+
+<!-- #default-branch-switch -->
+
+```sh
+curl https://codeload.github.com/mui-org/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/vitejs
+cd vitejs
+```
+
+Install it and run:
+
+```sh
+npm install
+npm run dev
+```
+
+or:
+
+<!-- #default-branch-switch -->
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui-org/material-ui/tree/master/examples/vitejs)
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/vitejs)
+
+## 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`, the default style engine in Material-UI v5.
+
+## What's next?
+
+<!-- #default-branch-switch -->
+
+You now have a working example project.
+You can head back to the documentation, continuing browsing it from the [templates](https://next.material-ui.com/getting-started/templates/) section.
diff --git a/examples/vitejs/index.html b/examples/vitejs/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App with Material-UI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/examples/vitejs/package.json b/examples/vitejs/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "vite-mui",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest",
+    "@mui/material": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react-refresh": "latest",
+    "vite": "latest"
+  }
+}
diff --git a/examples/vitejs/src/App.jsx b/examples/vitejs/src/App.jsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import ProTip from './ProTip';
+import Copyright from './Copyright';
+
+export default function App() {
+  return (
+    <Container maxWidth="sm">
+      <Box sx={{ my: 4 }}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Vite.js v5-beta example
+        </Typography>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  );
+}
diff --git a/examples/vitejs/src/Copyright.jsx b/examples/vitejs/src/Copyright.jsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+
+export default function Copyright() {
+  return (
+    <Typography variant="body2" color="text.secondary" align="center">
+      {'Copyright © '}
+      <Link color="inherit" href="https://material-ui.com/">
+        Your Website
+      </Link>{' '}
+      {new Date().getFullYear()}.
+    </Typography>
+  );
+}
diff --git a/examples/vitejs/src/ProTIp.jsx b/examples/vitejs/src/ProTIp.jsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Link from '@mui/material/Link';
+import SvgIcon from '@mui/material/SvgIcon';
+import Typography from '@mui/material/Typography';
+
+function LightBulbIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <path d="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" />
+    </SvgIcon>
+  );
+}
+
+export default function ProTip() {
+  return (
+    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+      <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
+      Pro tip: See more{' '}
+      <Link href="https://material-ui.com/getting-started/templates/">templates</Link> on the
+      Material-UI documentation.
+    </Typography>
+  );
+}
diff --git a/examples/vitejs/src/main.jsx b/examples/vitejs/src/main.jsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider } from '@mui/material/styles';
+import App from './App';
+import theme from './theme';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <ThemeProvider theme={theme}>
+      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+      <CssBaseline />
+      <App />
+    </ThemeProvider>,
+  </React.StrictMode>,
+  document.getElementById('root')
+)
diff --git a/examples/vitejs/src/theme.js b/examples/vitejs/src/theme.js
@@ -0,0 +1,19 @@
+import { createTheme } from '@mui/material/styles';
+import { red } from '@mui/material/colors';
+
+// Create a theme instance.
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#556cd6',
+    },
+    secondary: {
+      main: '#19857b',
+    },
+    error: {
+      main: red.A400,
+    },
+  },
+});
+
+export default theme;
diff --git a/examples/vitejs/vite.config.js b/examples/vitejs/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import reactRefresh from '@vitejs/plugin-react-refresh';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [reactRefresh()],
+});