MUI (Material UI)

MUI is a **React component library** with a powerful theming system. Great for dashboards and enterprise apps.

Install

bash

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

Theme setup (tokens)

tsx

import { createTheme, ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";

const theme = createTheme({
  palette: {
    mode: "dark",
    primary: { main: "#2563eb" },
    background: { default: "#0b1220", paper: "#0f1a2e" },
  },
  shape: { borderRadius: 12 },
});

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
}

Component override example

ts

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: { textTransform: "none", fontWeight: 700 },
      },
    },
  },
});