Skip to content

MUI Core /Material UI

Ready to use
Material Design
components

Material UI is beautiful by design and features a suite of customization options that make it easy to implement your own custom design system.

Get startedView templates

The world's best product teams trust MUI to deliver an unrivaled experience for both developers and users.

Component library

40+ building block components

A meticulous implementation of Material Design; every Material UI component meets the highest standards of form and function.

ButtonText fieldTableAlertTooltipMuch more 
<div>
  <Button variant="text" startIcon={<ShoppingCartRounded />}>
    Add to Cart
  </Button>
  <Button variant="contained" startIcon={<ShoppingCartRounded />}>
    Add to Cart
  </Button>
  <Button variant="outlined" startIcon={<ShoppingCartRounded />}>
    Add to Cart
  </Button>
</div>

Own the styling!

Build your own design system using the sophisticated theming features. You can also start by using Google's Material Design.

Theming

Build your design system just as you want it to be

Start quickly with Material Design or use the advanced theming feature to easily tailor the components to your needs.

Custom ThemeTheming allows you to use your brand's design tokens, easily making the components reflect its look and feel.Material DesignEvery component comes with Google's tried and tested design system ready for use.
Beside Myself album cover

Ultraviolet

Basement • Beside Myself
<Card
  variant="outlined"
  sx={{
    p: 1,
    display: 'flex',
    flexDirection: { xs: 'column', sm: 'row' },
  }}
>
  <CardMedia
    component="img"
    width="124"
    height="124"
    alt="Beside Myself album cover"
    src="/static/images/cards/basement-beside-myself.jpeg"
    sx={{
      borderRadius: 0.5,
      width: 'clamp(124px, (304px - 100%) * 999 , 100%)',
    }}
  />
  <Box sx={{ alignSelf: 'center', px: { xs: 0, sm: 2 } }}>
    <Typography
      variant="body1"
      color="text.primary"
      fontWeight={600}
      sx={{
        textAlign: { xs: 'center', sm: 'start' },
        mt: { xs: 1.5, sm: 0 },
      }}
    >
      Ultraviolet
    </Typography>
    <Typography
      component="div"
      variant="caption"
      color="text.secondary"
      fontWeight={500}
      sx={{ textAlign: { xm: 'center', sm: 'start' } }}
    >
      Basement • Beside Myself
    </Typography>
    <Stack
      direction="row"
      spacing={1}
      sx={{
        mt: 2,
        justifyContent: { xs: 'space-between', sm: 'flex-start' },
      }}
    >
      <IconButton aria-label="fast rewind" disabled>
        <FastRewindRounded />
      </IconButton>
      <IconButton
        aria-label={paused ? 'play' : 'pause'}
        sx={{ mx: 1 }}
        onClick={() => setPaused((val) => !val)}
      >
        {paused ? <PlayArrowRounded /> : <PauseRounded />}
      </IconButton>
      <IconButton aria-label="fast forward" disabled>
        <FastForwardRounded />
      </IconButton>
    </Stack>
  </Box>
</Card>

Styling

Rapidly add and tweak any styles using CSS utilities

CSS utilities allow you to move faster and make for a smooth developer experience when styling any component.

Leverage the tokens from your themeEasily use the design tokens defined in your theme for any CSS property out there.No context switchingThe styling and component usage are both in the same place, right where you need them.Responsive styles right inside system propAn elegant API for writing CSS media queries that match your theme breakpoints.
123 Main St, Phoenix, AZ cover

123 Main St, Phoenix, AZ

$280k - $310k
Confidence score of 85%
<Card
  variant="outlined"
  sx={{
    display: 'flex',
    p: 1,
    flexDirection: {
      xs: 'column', // mobile
      sm: 'row', // tablet and up
    },
  }}
>
  <CardMedia
    component="img"
    width="100"
    height="100"
    alt="123 Main St, Phoenix, AZ cover"
    src="/static/images/cards/real-estate.png"
    sx={{
      borderRadius: 0.5,
      width: { xs: '100%', sm: 100 },
      mr: { sm: 1.5 },
      mb: { xs: 1.5, sm: 0 },
    }}
  />
  <Box sx={{ alignSelf: 'center', ml: 2 }}>
    <Typography variant="body2" color="text.secondary">
      123 Main St, Phoenix, AZ
    </Typography>
    <Typography component="div" fontWeight="bold">
      $280k - $310k
    </Typography>
    <Box
      sx={{
        ml: -1,
        mt: 0.75,
        px: 1,
        py: 0.5,
        borderRadius: 1,
        display: 'flex',
        typography: 'caption',
        bgcolor: (theme) =>
          theme.palette.mode === 'dark' ? 'primary.900' : 'primary.50',
        color: (theme) =>
          theme.palette.mode === 'dark' ? '#fff' : 'primary.700',
      }}
    >
      <InfoRounded sx={{ fontSize: 16, mr: 0.5, mt: '1px' }} />
      Confidence score of 85%
    </Box>
  </Box>
</Card>

Community

Join our global community

The core components were crafted by many hands, all over the world. Join us today to get help when you need it, and lend a hand when you can.

Learn more
4M

Weekly downloads on npm

87k

Stars on GitHub

2.7k

Open-source contributors

18.4k

Followers on Twitter