# 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!" />
  );
}

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.anandisheladiya.com/skills-and-experience/frontend/material-ui-the-ultimate-react-ui-framework.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.