# Material-UI v4

Material-UI v4 is a popular React component library that implements Google's Material Design specification. This version (v4.11.3) uses the `@material-ui/core` package naming convention and JSS (JavaScript Style Sheets) as its default styling solution. It provides a comprehensive set of production-ready components that are accessible, customizable, and well-documented. Material-UI v4 has been battle-tested in countless production applications and offers a stable foundation for building React applications with Material Design aesthetics.

This is the legacy version 4 of Material-UI, which has been superseded by v5 (now called MUI). While v4 is in maintenance mode with only critical bug fixes and security patches, it remains widely used in production applications. The library requires React 16.8+ or React 17, uses JSS for styling, and includes packages for core components (`@material-ui/core`), styling utilities (`@material-ui/styles`), system utilities (`@material-ui/system`), icons (`@material-ui/icons`), and experimental components (`@material-ui/lab`).

## Installation

Install Material-UI v4 core package

```bash
# Using npm
npm install @material-ui/core

# Using yarn
yarn add @material-ui/core

# Install Roboto font (optional but recommended)
npm install typeface-roboto

# Install Material Icons (optional)
npm install @material-ui/icons

# Peer dependencies required
# React: ^16.8.0 || ^17.0.0
# React DOM: ^16.8.0 || ^17.0.0
```

## Basic Button Component Usage

Create and use Material-UI v4 buttons with different variants

```jsx
import React from 'react';
import Button from '@material-ui/core/Button';

function App() {
  return (
    <div>
      <Button variant="text">Text Button</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
      <Button variant="contained" color="primary">
        Primary
      </Button>
      <Button variant="contained" color="secondary">
        Secondary
      </Button>
      <Button variant="contained" disabled>
        Disabled
      </Button>
      <Button variant="contained" size="small">
        Small
      </Button>
      <Button variant="contained" size="large">
        Large
      </Button>
    </div>
  );
}

export default App;
```

## Layout with Box, Container, and Grid

Use layout components for responsive designs

```jsx
import React from 'react';
import Container from '@material-ui/core/Container';
import Box from '@material-ui/core/Box';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';

export default function LayoutExample() {
  return (
    <Container maxWidth="lg">
      <Box mt={4} mb={4}>
        <Typography variant="h4" component="h1" gutterBottom>
          Welcome to Material-UI v4
        </Typography>
        <Grid container spacing={3}>
          <Grid item xs={12} md={8}>
            <Paper style={{ padding: 16, minHeight: 200 }}>
              <Typography>
                Main content area (8 columns on medium+, full width on small)
              </Typography>
            </Paper>
          </Grid>
          <Grid item xs={12} md={4}>
            <Paper style={{ padding: 16, minHeight: 200 }}>
              <Typography>
                Sidebar (4 columns on medium+, full width on small)
              </Typography>
            </Paper>
          </Grid>
        </Grid>
      </Box>
    </Container>
  );
}
```

## Form Controls with TextField

Create form inputs with validation

```jsx
import React, { useState } from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Box from '@material-ui/core/Box';

export default function FormExample() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState(false);

  const handleSubmit = (event) => {
    event.preventDefault();
    const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    setError(!isValid);
    if (isValid) {
      console.log('Form submitted:', email);
    }
  };

  return (
    <Box component="form" onSubmit={handleSubmit} maxWidth={400}>
      <TextField
        fullWidth
        label="Email"
        variant="outlined"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        error={error}
        helperText={error ? 'Please enter a valid email' : ''}
        margin="normal"
        required
      />
      <TextField
        fullWidth
        label="Password"
        type="password"
        variant="outlined"
        margin="normal"
        required
      />
      <TextField
        fullWidth
        label="Bio"
        multiline
        rows={4}
        placeholder="Tell us about yourself..."
        variant="outlined"
        margin="normal"
      />
      <Box mt={2}>
        <Button variant="contained" color="primary" type="submit">
          Submit
        </Button>
      </Box>
    </Box>
  );
}
```

## Custom Theme with makeStyles and ThemeProvider

Define and apply custom themes using JSS

```jsx
import React from 'react';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#1976d2',
      light: '#42a5f5',
      dark: '#1565c0',
    },
    secondary: {
      main: '#dc004e',
    },
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    h1: {
      fontSize: '2.5rem',
      fontWeight: 500,
    },
  },
  overrides: {
    MuiButton: {
      root: {
        borderRadius: 8,
        textTransform: 'none',
      },
    },
  },
});

const useStyles = makeStyles((theme) => ({
  root: {
    padding: theme.spacing(4),
  },
  customButton: {
    marginTop: theme.spacing(2),
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    color: 'white',
    height: 48,
    padding: '0 30px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  },
}));

export default function ThemeExample() {
  const classes = useStyles();

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Box className={classes.root}>
        <Typography variant="h1" gutterBottom>
          Custom Themed App
        </Typography>
        <Button variant="contained" color="primary">
          Primary Button
        </Button>
        <Button className={classes.customButton}>
          Custom Styled Button
        </Button>
      </Box>
    </ThemeProvider>
  );
}
```

## Card Component with Actions

Create content cards with headers, media, and actions

```jsx
import React from 'react';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import CardHeader from '@material-ui/core/CardHeader';
import Avatar from '@material-ui/core/Avatar';
import IconButton from '@material-ui/core/IconButton';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import { red } from '@material-ui/core/colors';
import MoreVertIcon from '@material-ui/icons/MoreVert';

export default function CardExample() {
  return (
    <Card style={{ maxWidth: 345 }}>
      <CardHeader
        avatar={
          <Avatar style={{ backgroundColor: red[500] }}>R</Avatar>
        }
        action={
          <IconButton aria-label="settings">
            <MoreVertIcon />
          </IconButton>
        }
        title="Recipe Title"
        subheader="September 14, 2021"
      />
      <CardMedia
        component="img"
        height="194"
        image="/static/images/cards/recipe.jpg"
        alt="Recipe image"
      />
      <CardContent>
        <Typography variant="body2" color="textSecondary">
          This impressive recipe combines the flavors of shrimp and
          chorizo with smoked paprika, creating a truly delicious dish.
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  );
}
```

## Dialog (Modal) Component

Display modal dialogs with customizable content

```jsx
import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import TextField from '@material-ui/core/TextField';

export default function DialogExample() {
  const [open, setOpen] = useState(false);

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const handleSubmit = () => {
    console.log('Form submitted');
    handleClose();
  };

  return (
    <div>
      <Button variant="outlined" onClick={handleOpen}>
        Open Form Dialog
      </Button>
      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
        <DialogTitle>Subscribe to Newsletter</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Enter your email address to subscribe to our newsletter and
            receive updates.
          </DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            label="Email Address"
            type="email"
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleSubmit} color="primary" variant="contained">
            Subscribe
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}
```

## AppBar and Navigation

Build application headers with navigation menus

```jsx
import React, { useState } from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import MenuIcon from '@material-ui/icons/Menu';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}));

export default function AppBarExample() {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = useState(null);

  const handleMenu = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="menu"
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            My Application
          </Typography>
          <Button color="inherit">Home</Button>
          <Button color="inherit">About</Button>
          <Button
            color="inherit"
            onClick={handleMenu}
            aria-controls="account-menu"
            aria-haspopup="true"
          >
            Account
          </Button>
          <Menu
            id="account-menu"
            anchorEl={anchorEl}
            open={Boolean(anchorEl)}
            onClose={handleClose}
          >
            <MenuItem onClick={handleClose}>Profile</MenuItem>
            <MenuItem onClick={handleClose}>My account</MenuItem>
            <MenuItem onClick={handleClose}>Logout</MenuItem>
          </Menu>
        </Toolbar>
      </AppBar>
    </div>
  );
}
```

## Data Table with Sorting

Create sortable data tables with Material-UI v4

```jsx
import React, { useState } from 'react';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import TableSortLabel from '@material-ui/core/TableSortLabel';
import Paper from '@material-ui/core/Paper';
import Checkbox from '@material-ui/core/Checkbox';

const rows = [
  { id: 1, name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3 },
  { id: 2, name: 'Donut', calories: 452, fat: 25.0, carbs: 51, protein: 4.9 },
  { id: 3, name: 'Eclair', calories: 262, fat: 16.0, carbs: 24, protein: 6.0 },
];

export default function TableExample() {
  const [selected, setSelected] = useState([]);
  const [order, setOrder] = useState('asc');
  const [orderBy, setOrderBy] = useState('name');

  const handleSelectAll = (event) => {
    if (event.target.checked) {
      setSelected(rows.map((row) => row.id));
    } else {
      setSelected([]);
    }
  };

  const handleSelect = (id) => {
    const selectedIndex = selected.indexOf(id);
    let newSelected = [];

    if (selectedIndex === -1) {
      newSelected = [...selected, id];
    } else {
      newSelected = selected.filter((itemId) => itemId !== id);
    }

    setSelected(newSelected);
  };

  const handleRequestSort = (property) => {
    const isAsc = orderBy === property && order === 'asc';
    setOrder(isAsc ? 'desc' : 'asc');
    setOrderBy(property);
  };

  const isSelected = (id) => selected.indexOf(id) !== -1;

  return (
    <TableContainer component={Paper}>
      <Table style={{ minWidth: 650 }}>
        <TableHead>
          <TableRow>
            <TableCell padding="checkbox">
              <Checkbox
                indeterminate={selected.length > 0 && selected.length < rows.length}
                checked={rows.length > 0 && selected.length === rows.length}
                onChange={handleSelectAll}
              />
            </TableCell>
            <TableCell>
              <TableSortLabel
                active={orderBy === 'name'}
                direction={orderBy === 'name' ? order : 'asc'}
                onClick={() => handleRequestSort('name')}
              >
                Dessert
              </TableSortLabel>
            </TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat (g)</TableCell>
            <TableCell align="right">Carbs (g)</TableCell>
            <TableCell align="right">Protein (g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => {
            const isItemSelected = isSelected(row.id);
            return (
              <TableRow
                key={row.id}
                hover
                selected={isItemSelected}
                onClick={() => handleSelect(row.id)}
              >
                <TableCell padding="checkbox">
                  <Checkbox checked={isItemSelected} />
                </TableCell>
                <TableCell component="th" scope="row">
                  {row.name}
                </TableCell>
                <TableCell align="right">{row.calories}</TableCell>
                <TableCell align="right">{row.fat}</TableCell>
                <TableCell align="right">{row.carbs}</TableCell>
                <TableCell align="right">{row.protein}</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </TableContainer>
  );
}
```

## Snackbar Notifications

Display temporary notification messages

```jsx
import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import Snackbar from '@material-ui/core/Snackbar';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';

export default function SnackbarExample() {
  const [open, setOpen] = useState(false);

  const handleClick = () => {
    setOpen(true);
  };

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    setOpen(false);
  };

  return (
    <div>
      <Button variant="contained" color="primary" onClick={handleClick}>
        Show Snackbar
      </Button>
      <Snackbar
        open={open}
        autoHideDuration={6000}
        onClose={handleClose}
        message="This is a notification message"
        action={
          <IconButton
            size="small"
            aria-label="close"
            color="inherit"
            onClick={handleClose}
          >
            <CloseIcon fontSize="small" />
          </IconButton>
        }
      />
    </div>
  );
}
```

## Alert Component from Lab

Use Alert component from @material-ui/lab for styled notifications

```jsx
import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import Snackbar from '@material-ui/core/Snackbar';
import Alert from '@material-ui/lab/Alert';

export default function AlertExample() {
  const [open, setOpen] = useState(false);
  const [severity, setSeverity] = useState('success');

  const handleClick = (type) => {
    setSeverity(type);
    setOpen(true);
  };

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    setOpen(false);
  };

  return (
    <div>
      <Button variant="contained" onClick={() => handleClick('success')}>
        Success
      </Button>
      <Button variant="contained" color="secondary" onClick={() => handleClick('error')} style={{ marginLeft: 8 }}>
        Error
      </Button>
      <Button variant="contained" onClick={() => handleClick('warning')} style={{ marginLeft: 8 }}>
        Warning
      </Button>
      <Button variant="contained" onClick={() => handleClick('info')} style={{ marginLeft: 8 }}>
        Info
      </Button>

      <Snackbar
        open={open}
        autoHideDuration={6000}
        onClose={handleClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      >
        <Alert onClose={handleClose} severity={severity} variant="filled">
          This is a {severity} message!
        </Alert>
      </Snackbar>
    </div>
  );
}

// Installation required:
// npm install @material-ui/lab
// yarn add @material-ui/lab
```

## Responsive Media Query Hook

Use useMediaQuery hook for responsive behavior

```jsx
import React from 'react';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { useTheme } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';

export default function MediaQueryExample() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const isTablet = useMediaQuery(theme.breakpoints.between('sm', 'md'));
  const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

  return (
    <Box p={3}>
      <Typography variant="h5" gutterBottom>
        Current Breakpoint:
      </Typography>
      <Typography variant="body1" style={{ marginBottom: 16 }}>
        {isMobile && 'Mobile (< 600px)'}
        {isTablet && 'Tablet (600px - 960px)'}
        {isDesktop && 'Desktop (≥ 960px)'}
      </Typography>
      <Typography variant="body2" color="textSecondary">
        Prefers dark mode: {prefersDarkMode ? 'Yes' : 'No'}
      </Typography>
      <Box mt={2}>
        <Button
          variant="contained"
          color="primary"
          size={isMobile ? 'small' : 'large'}
          fullWidth={isMobile}
        >
          Responsive Button
        </Button>
      </Box>
    </Box>
  );
}
```

## Material Icons Usage

Import and use Material Design icons from @material-ui/icons

```jsx
import React from 'react';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import SendIcon from '@material-ui/icons/Send';
import FavoriteIcon from '@material-ui/icons/Favorite';
import ShareIcon from '@material-ui/icons/Share';
import HomeIcon from '@material-ui/icons/Home';

export default function IconExample() {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <Button variant="contained" color="primary" startIcon={<DeleteIcon />}>
        Delete
      </Button>
      <Button variant="contained" color="primary" endIcon={<SendIcon />}>
        Send
      </Button>
      <IconButton aria-label="favorite" color="secondary">
        <FavoriteIcon />
      </IconButton>
      <IconButton aria-label="share" color="primary">
        <ShareIcon />
      </IconButton>
      <HomeIcon fontSize="large" color="action" />
    </div>
  );
}

// Installation required:
// npm install @material-ui/icons
// yarn add @material-ui/icons
```

## Autocomplete Component

Create searchable dropdown with autocomplete from @material-ui/lab

```jsx
import React, { useState } from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

const countries = [
  { code: 'US', label: 'United States', phone: '1' },
  { code: 'GB', label: 'United Kingdom', phone: '44' },
  { code: 'FR', label: 'France', phone: '33' },
  { code: 'DE', label: 'Germany', phone: '49' },
  { code: 'JP', label: 'Japan', phone: '81' },
];

export default function AutocompleteExample() {
  const [value, setValue] = useState(null);
  const [inputValue, setInputValue] = useState('');

  return (
    <div style={{ width: 300 }}>
      <Autocomplete
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
        inputValue={inputValue}
        onInputChange={(event, newInputValue) => {
          setInputValue(newInputValue);
        }}
        options={countries}
        autoHighlight
        getOptionLabel={(option) => option.label}
        renderOption={(option) => (
          <React.Fragment>
            ({option.code}) {option.label} +{option.phone}
          </React.Fragment>
        )}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Choose a country"
            variant="outlined"
            inputProps={{
              ...params.inputProps,
              autoComplete: 'new-password',
            }}
          />
        )}
      />
    </div>
  );
}

// Installation required:
// npm install @material-ui/lab
// yarn add @material-ui/lab
```

## Styled Components with withStyles

Create custom styled components using withStyles HOC

```jsx
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';

const StyledButton = withStyles((theme) => ({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 8,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
    '&:hover': {
      background: 'linear-gradient(45deg, #FE8B6B 30%, #FFAE53 90%)',
    },
  },
}))(Button);

const StyledPaper = withStyles((theme) => ({
  root: {
    padding: theme.spacing(3),
    background: `linear-gradient(45deg, ${theme.palette.primary.main} 30%, ${theme.palette.secondary.main} 90%)`,
    color: theme.palette.common.white,
    borderRadius: theme.spacing(2),
    boxShadow: '0 3px 5px 2px rgba(33, 150, 243, .3)',
  },
}))(Paper);

export default function StyledExample() {
  return (
    <div>
      <StyledButton>Custom Styled Button</StyledButton>
      <StyledPaper style={{ marginTop: 16 }}>
        This paper has a gradient background
      </StyledPaper>
    </div>
  );
}
```

## Styling with makeStyles Hook

Create component styles using the makeStyles hook

```jsx
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme) => ({
  root: {
    maxWidth: 345,
    margin: theme.spacing(2),
  },
  header: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText,
    padding: theme.spacing(2),
  },
  content: {
    padding: theme.spacing(2),
  },
  button: {
    margin: theme.spacing(1),
    borderRadius: theme.spacing(2),
    textTransform: 'none',
  },
  // Responsive styling
  responsiveText: {
    [theme.breakpoints.down('sm')]: {
      fontSize: '0.875rem',
    },
    [theme.breakpoints.up('md')]: {
      fontSize: '1.25rem',
    },
  },
}));

export default function MakeStylesExample() {
  const classes = useStyles();

  return (
    <Card className={classes.root}>
      <div className={classes.header}>
        <Typography variant="h6">Styled with makeStyles</Typography>
      </div>
      <CardContent className={classes.content}>
        <Typography className={classes.responsiveText}>
          This component uses the makeStyles hook for styling with theme support.
        </Typography>
        <Button
          variant="contained"
          color="primary"
          className={classes.button}
        >
          Custom Button
        </Button>
      </CardContent>
    </Card>
  );
}
```

## Summary

Material-UI v4 provides a mature and stable component library for building React applications with Material Design. While it is now in maintenance mode (superseded by MUI v5), it remains an excellent choice for existing projects and offers a comprehensive set of components including Buttons, TextFields, Dialogs, Tables, Cards, Grids, and more. The library uses JSS for styling through APIs like `makeStyles`, `withStyles`, and `styled`, providing a powerful theming system through `createMuiTheme` and `ThemeProvider`. The `@material-ui/lab` package contains experimental components like Alert, Autocomplete, Rating, and Skeleton that are production-ready but may have API changes in future releases.

Key advantages of Material-UI v4 include its extensive component library, TypeScript support, comprehensive documentation, responsive design utilities with breakpoints, built-in accessibility features, and the flexibility of the JSS styling solution. Common use cases include enterprise dashboards, admin panels, e-commerce platforms, data-heavy applications, and form-intensive web apps. The library integrates well with React frameworks, supports server-side rendering, and has a large community with extensive third-party resources. For new projects, consider migrating to MUI v5, but Material-UI v4 remains a solid choice for maintaining existing applications with continued security updates and critical bug fixes.