Material UI – The Ultimate React UI Framework

Introduction

Material UI (MUI) is a popular React UI library that provides ready-to-use, customizable components based on Google’s Material Design principles. It helps developers build beautiful, responsive, and accessible web applications quickly.

Why Use Material UI?

• Pre-designed Components – Buttons, Modals, Tables, Forms, etc.

• Customizable with Theme Support – Easily change colors, typography, and styles.

• Fully Responsive – Works on all screen sizes.

• Performance Optimized – Uses JSS (CSS-in-JS) for efficient styling.

• Built-in Dark Mode – Easy theming for dark/light mode.

• Accessibility (a11y) Ready – Compliant with WCAG standards.

Installation

Install Material UI core library & icons:

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

Basic Usage in a React Project

Using a Material UI Button

import React from "react";
import { Button } from "@mui/material";

function App() {
  return (
    <Button variant="contained" color="primary">
      Click Me
    </Button>
  );
}

export default App;

Core Components in Material UI

Button	Styled buttons with different variants	<Button variant="contained">Click</Button>

Typography	Pre-styled text elements	<Typography variant="h4">Heading</Typography>

Grid	Responsive layout system	<Grid container spacing={2}>...</Grid>

Card	Material Design card component	<Card><CardContent>Content</CardContent></Card>

AppBar	Navigation bar/header	<AppBar position="static">...</AppBar>

Drawer	Sidebar navigation menu	<Drawer open={true}>...</Drawer>

Table	Display tabular data	<Table><TableRow><TableCell>Data</TableCell></TableRow></Table>

Dialog	Pop-up modal for interactions	<Dialog open={true}>...</Dialog>

Theming & Customization

Applying a Custom Theme

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

const theme = createTheme({
  palette: {
    primary: {
      main: "#1976d2",
    },
    secondary: {
      main: "#ff4081",
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary" variant="contained">Themed Button</Button>
    </ThemeProvider>
  );
}

Responsive Design with Grid System

Material UI uses a flexbox-based grid system.

import { Grid, Paper } from "@mui/material";

function GridExample() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} sm={6} md={4}>
        <Paper>Item 1</Paper>
      </Grid>
      <Grid item xs={12} sm={6} md={4}>
        <Paper>Item 2</Paper>
      </Grid>
    </Grid>
  );
}

Breakpoints:

• xs → Extra small (mobile)

• sm → Small (tablet)

• md → Medium (laptops)

• lg → Large (desktops)

• xl → Extra-large screens

Icons in Material UI

Import and Use Icons

import { Home, Delete } from "@mui/icons-material";

function IconExample() {
  return <Home fontSize="large" color="primary" />;
}

Common Icons:

• Home → <Home />

• Delete → <Delete />

• Mail → <Mail />

• Search → <Search />

• Folder → <Folder />

Advanced Features in Material UI

1. Dark Mode

const darkTheme = createTheme({
  palette: {
    mode: "dark",
  },
});

1. Data Tables

import { Table, TableRow, TableCell } from "@mui/material";

function DataTable() {
  return (
    <Table>
      <TableRow>
        <TableCell>Name</TableCell>
        <TableCell>Age</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Alice</TableCell>
        <TableCell>25</TableCell>
      </TableRow>
    </Table>
  );
}

1. Snackbar Notifications

import { Snackbar } from "@mui/material";

function Notification() {
  return (
    <Snackbar open={true} message="This is a notification!" />
  );
}