Install & Setup Vite + React + Typescript + MUI 5

Today, we will install and set up Vite with React, TypeScript, and Material UI (MUI 5). We will use React, Vite, and MUI 5.

Install React Project With Vite

Install vite via npm:

npm create vite@latest

Install vite via yarn:

yarn create vite

Select react.

? Select a framework: › - Use arrow-keys. Return to submit.
  vanilla
  vue
❯  react
  preact
  lit
  svelte

Select react js with typescript.

✔ Select a framework: › react
? Select a variant: › - Use arrow-keys. Return to submit.
  react
❯  react-ts

Move to project directory and install dependencies.

cd react-mui
npm install 
npm run dev

Install React Material UI 5 (MUI)

install mui 5 via npm:

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

Or install mui 5 via yarn:

yarn add @mui/material @emotion/react @emotion/styled

import mui button component in App.tsx.

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import './App.css';
import { Button } from '@mui/material';

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

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React + + Typescript + MUI 5</h1>
      <Button color="secondary">Secondary</Button>
      <Button variant="contained" color="success">
        Success
      </Button>
      <Button variant="outlined" color="error">
        Error
      </Button>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </div>
  );
}

export default App;

Install React Project With Vite

Install React Material UI 5 (MUI)

Aaronn