> For the complete documentation index, see [llms.txt](https://www.anandisheladiya.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.anandisheladiya.com/skills-and-experience/frontend/material-ui-the-ultimate-react-ui-framework.md).

# 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:

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

```

### **Basic Usage in a React Project**

**Using a Material UI Button**

```javascript
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**

```javascript
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**.

```javascript
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**

&#x20;**Import and Use Icons**

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

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

```

**Common Icons:**

* Home → `<Home />`
* &#x20;Delete → `<Delete />`
* Mail → `<Mail />`
* Search → `<Search />`
* Folder → `<Folder />`

### **Advanced Features in Material UI**

#### **1. Dark Mode**

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

```

2. **Data Tables**

```javascript
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>
  );
}

```

3. **Snackbar Notifications**

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

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

```