@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 install @mui/material @emotion/react @emotion/styled
yarn add @mui/material @emotion/react @emotion/styled
pnpm add @mui/material @emotion/react @emotion/styled
Import
import { Button } from '@mui/material';Quick Example
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 |
| Category | UI Component |
| Weekly Downloads | 5M+ |
| License | MIT |
| Install | npm install @mui/material @emotion/react @emotion/styled |
Related Packages
Chakra UI is an accessible, modular React component library that provides a set of composable buildi…
Ant Design is an enterprise-class UI design language and React component library created by Ant Grou…
Emotion is a performant and flexible CSS-in-JS library that provides multiple APIs for styling React…
React is the most popular JavaScript library for building user interfaces, developed and maintained …
Mantine is a fully featured React component library providing 100+ customizable components, 50+ hook…
Browse npm Packages by Category
Explore our reference of 200 popular npm packages with install commands, examples, and quick-start guides.