🎨
UI Component5M+/wkMIT

@mui/material

Material UI (MUI) is the most popular React UI component library, implementing Google's Material Design specification with a comprehensive collection of pre-bui

Installation

npm
npm install @mui/material @emotion/react @emotion/styled
yarn
yarn add @mui/material @emotion/react @emotion/styled
pnpm
pnpm add @mui/material @emotion/react @emotion/styled

Import

ESM
import { Button } from '@mui/material';

Quick Example

usage
import { Button, TextField, Stack } from '@mui/material';

function LoginForm() {
  return (
    <Stack spacing={2} sx={{ maxWidth: 400, mx: 'auto', p: 3 }}>
      <TextField label="Email" variant="outlined" />
      <TextField label="Password" type="password" />
      <Button variant="contained" color="primary">Log In</Button>
    </Stack>
  );
}

About @mui/material

Material UI (MUI) is the most popular React UI component library, implementing Google's Material Design specification with a comprehensive collection of pre-built, accessible components. MUI provides over 50 components including buttons, text fields, selects, dialogs, menus, tables, pagination, stepper, snackbar, chips, and data display components, all following Material Design guidelines for elevation, motion, color, and typography. The library's theming system allows deep customization of colors, typography, spacing, breakpoints, and component-level style overrides through createTheme, enabling brands to adapt Material Design to their identity. MUI v5 uses Emotion as its default styling engine (with support for styled-components) and provides the sx prop for inline responsive styling with theme-aware values. MUI X extends the core with advanced data-heavy components including DataGrid, DatePicker, TreeView, and Charts for enterprise applications. The library provides comprehensive TypeScript types, server-side rendering support, and RTL (right-to-left) language support. MUI's component API follows a consistent pattern with variant, color, size, and disabled props across components. While opinions on Material Design aesthetics vary, MUI's comprehensive component coverage and enterprise-grade quality make it the go-to choice for teams needing a complete, production-ready component system.

Quick Facts

Package@mui/material
CategoryUI Component
Weekly Downloads5M+
LicenseMIT
Installnpm install @mui/material @emotion/react @emotion/styled

Related Packages

Browse npm Packages by Category

Explore our reference of 200 popular npm packages with install commands, examples, and quick-start guides.