Setting Up a React and Material UI Project with Vite

I’m planning to rebuild a small Vue application with React and Material UI, so I’m noting down the basic setup process here. The goal is to get a Vite-based React project running and confirm that Material UI components can be used normally.

Create a React project

If you are using WebStorm, you can create a new Vite React project directly from the IDE. If you prefer VS Code or a terminal-based workflow, run the following commands:

npm create vite@latest my-project -- --template react
cd my-project

This creates a new React project named my-project and then enters the project directory.

Install Material UI

After running cd my-project, add Material UI and its required emotion dependencies:

npm install @mui/material @emotion/react @emotion/styled

You can also install them with pnpm:

pnpm i @mui/material @emotion/react @emotion/styled

Next, install the Roboto font package:

npm install @fontsource/roboto

Or with pnpm:

pnpm i @fontsource/roboto

Then install Material UI icons:

npm install @mui/icons-material

Or:

pnpm i @mui/icons-material

Add a simple Material UI button example

Modify src/index.jsx and add a simple test component using Material UI’s Stack and Button components:

import { useState } from 'react'
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

function App() {
const [count, setCount] = useState(0)

return (
    <Stack spacing={2} direction="row">
    <Button variant="text">Text</Button>
    <Button variant="contained">Contained</Button>
    <Button variant="outlined">Outlined</Button>
    </Stack>
)
}

export default App

After that, install the project dependencies from the terminal:

pnpm i

Once all dependencies have finished downloading, start the development server:

pnpm run dev

Open the browser and visit:

http://localhost:5173/

If everything is set up correctly, the page should display the Material UI buttons, which means MUI has been successfully introduced into the React project.