diff --git a/docs/src/pages/getting-started/example-projects/example-projects.md b/docs/src/pages/getting-started/example-projects/example-projects.md index 50216a4492c576..485cdd705d57da 100644 --- 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 new file mode 100644 index 00000000000000..1bff1d78b6e1e9 --- /dev/null +++ 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 \ No newline at end of file diff --git a/examples/vitejs/README.md b/examples/vitejs/README.md new file mode 100644 index 00000000000000..94ac4e119ce789 --- /dev/null +++ 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): + + + +```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: + + + +[![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? + + + +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 new file mode 100644 index 00000000000000..18783601fbf37d --- /dev/null +++ b/examples/vitejs/index.html @@ -0,0 +1,12 @@ + + + + + + Vite App with Material-UI + + +
+ + + diff --git a/examples/vitejs/package.json b/examples/vitejs/package.json new file mode 100644 index 00000000000000..5ab2df65d68efe --- /dev/null +++ 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 new file mode 100644 index 00000000000000..2a759169a51a28 --- /dev/null +++ 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 ( + + + + Vite.js v5-beta example + + + + + + ); +} \ No newline at end of file diff --git a/examples/vitejs/src/Copyright.jsx b/examples/vitejs/src/Copyright.jsx new file mode 100644 index 00000000000000..89532f81eb2592 --- /dev/null +++ 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 ( + + {'Copyright © '} + + Your Website + {' '} + {new Date().getFullYear()}. + + ); +} \ No newline at end of file diff --git a/examples/vitejs/src/ProTIp.jsx b/examples/vitejs/src/ProTIp.jsx new file mode 100644 index 00000000000000..17ca9e6782dc58 --- /dev/null +++ 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 ( + + + + ); +} + +export default function ProTip() { + return ( + + + Pro tip: See more{' '} + templates on the + Material-UI documentation. + + ); +} \ No newline at end of file diff --git a/examples/vitejs/src/main.jsx b/examples/vitejs/src/main.jsx new file mode 100644 index 00000000000000..6a4cc9c3f4a4f8 --- /dev/null +++ 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( + + + {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} + + + , + , + document.getElementById('root') +) diff --git a/examples/vitejs/src/theme.js b/examples/vitejs/src/theme.js new file mode 100644 index 00000000000000..050b11a7d1e1b7 --- /dev/null +++ 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 new file mode 100644 index 00000000000000..75f50ede312d97 --- /dev/null +++ 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()], +});