Stop 13 · UI LibrariesTopics · 1/7

Material UI

In short

Need a date picker, a data table and a dialog by Friday? MUI hands you hundreds of tested React components that follow Google's Material Design, so you can focus on your app's logic.

A comprehensive React component library implementing Google's Material Design system — buttons, dialogs, tables and more, ready out of the box.

The jaadu relaxes on a sofa in a showroom where all the furniture matches.

Think of it like this

Buying furniture from a big showroom

You walk into a furniture showroom and everything matches: same wood, same finish. Delivery is quick and it all looks good together. But making that sofa look totally different takes real effort. MUI is that showroom.

Watch it happen

How one theme reaches every button

ThemeProvider

Stack

Button contained

Button outlined

1/5createTheme sets primary.main to purple, and ThemeProvider shares that theme with everything inside it.

The big ideas

What you need to know

Install the trio

npm install @mui/material @emotion/react @emotion/styled. Emotion is the CSS-in-JS engine MUI uses for styling.

One theme to rule them

createTheme sets your colours, fonts and spacing once. ThemeProvider applies it to every component.

The sx prop for quick tweaks

sx lets you write styles right on a component, with theme values like p: 2 meaning two spacing units.

Big library, big bundle

Import components individually and check your bundle size. MUI is heavier than Tailwind-based options.

See it in code

Walk through the code

tsx

1import { createTheme, ThemeProvider } from "@mui/material/styles";2import Button from "@mui/material/Button";3import Stack from "@mui/material/Stack";4 5const theme = createTheme({ palette: { primary: { main: "#7E39FE" } } });6 7export default function App() {8  return (9    <ThemeProvider theme={theme}>10      <Stack direction="row" spacing={2} sx={{ p: 2 }}>11        <Button variant="contained">Save</Button>12        <Button variant="outlined">Cancel</Button>13      </Stack>14    </ThemeProvider>15  );16}

1/3Import the theme tools and each component from its own path, which keeps the bundle smaller.

Change main once and every primary button, link and focus ring follows. spacing={2} and p: 2 both use the theme's spacing scale.

Save yourself the pain

Common mistakes

Oops

Overriding MUI styles with !important all over your CSS.

Do this instead

Change the theme or use sx and styleOverrides in the theme. They are designed for this.

Oops

Shipping MUI with its default look and calling it a design.

Do this instead

Set at least your brand colour, font and border radius in the theme, or every app looks the same.

Your mission

Rebrand MUI in 20 minutes

~25 min

Quick check

You want every MUI button in your app to use your brand purple. What's the cleanest way?

Go deeper

1Build a small form or dashboard using Material UI's core components.
2Learn its theming system (`createTheme`) to customize colors and typography.
3Compare its bundle size and customization trade-offs against a lighter library.