MUI (Material-UI)

Language: JavaScript

UI Framework

MUI, originally called Material-UI, was created in 2014 by Hai Nguyen as one of the first React libraries implementing Material Design. Over time, it evolved into a full design system with theming, styled components, and extensive customization options. It is widely adopted for building modern React applications.

MUI is a popular React component library that implements Google’s Material Design system. It provides prebuilt, customizable components to build responsive and accessible UIs quickly.

Installation

npm: npm install @mui/material @emotion/react @emotion/styled
yarn: yarn add @mui/material @emotion/react @emotion/styled
cdn: <script src='https://unpkg.com/@mui/material/umd/material-ui.development.js'></script>
manual: Download prebuilt UMD bundles from the MUI GitHub releases and include in your project

Usage

MUI provides React components for layouts, forms, navigation, feedback, and more. It supports theming, styling solutions, and accessibility out-of-the-box.

Button usage

import * as React from 'react';
import Button from '@mui/material/Button';

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

Creates a Material Design-styled button with a `contained` variant.

TextField usage

import TextField from '@mui/material/TextField';

<TextField label="Name" variant="outlined" />

Renders an input field with a label and outlined style.

Custom theme

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

const theme = createTheme({
  palette: { primary: { main: '#1976d2' } }
});

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

Demonstrates customizing the MUI theme and applying it to components.

Responsive Grid Layout

import Grid from '@mui/material/Grid';

<Grid container spacing={2}>
  <Grid item xs={6}><div>Left</div></Grid>
  <Grid item xs={6}><div>Right</div></Grid>
</Grid>

Creates a responsive two-column layout using MUI’s Grid system.

Error Handling

Module not found: @mui/material: Ensure you have installed @mui/material along with @emotion/react and @emotion/styled.
Styles not applying: Wrap components in ThemeProvider and ensure CSS baseline is included if needed.
Invalid prop warning: Check the component API in docs — many props are variant or theme-specific.

Best Practices

Wrap your app with ThemeProvider to maintain consistent theming.

Use the `sx` prop or styled components for flexible custom styles.

Leverage responsive design utilities for cross-device support.

Prefer built-in accessibility features (ARIA roles, focus management).

Keep components modular and override styles via the theme where possible.

Official DocsGithub