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 
<Button variant="text" startIcon={<ShoppingCartRounded />}>
  Add item
</Button>
<Button variant="contained" startIcon={<ShoppingCartRounded />}>
  Add item
</Button>
<Button variant="outlined" startIcon={<ShoppingCartRounded />}>
  Add item  
</Button>

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.
Birds of Tokyo album cover

If This Ship Sinks (I Give In)

Birds Of Tokyo
<Card
  variant="outlined"
  sx={{
    p: 1,
    display: 'flex',
    alignItems: 'center',
    gap: 2,
  }}
>
  <CardMedia
    component="img"
    width="100"
    height="100"
    alt="Birds of Tokyo album cover"
    src="/static/images/cards/birds-of-tokyo.jpg"
    sx={{
      borderRadius: 0.6,
      height: 100,
      width: 100,
    }}
  />
  <Stack direction="column" spacing={2} alignItems="center">
    <Stack direction="column" spacing={0.2} alignItems="center">
      <Typography color="text.primary" fontWeight="medium" fontSize={15}>
        If This Ship Sinks (I Give In)
      </Typography>
      <Typography
        component="div"
        variant="caption"
        color="text.secondary"
        fontWeight="regular"
      >
        Birds Of Tokyo
      </Typography>
    </Stack>
    <Stack direction="row" alignItems="center" spacing={1.5}>
      <IconButton aria-label="shuffle" disabled size="small" sx={{ flexGrow: 0 }}>
        <ShuffleRoundedIcon fontSize="small" />
      </IconButton>
      <IconButton aria-label="fast rewind" disabled size="small">
        <FastRewindRounded fontSize="small" />
      </IconButton>
      <IconButton
        aria-label={paused ? 'play' : 'pause'}
        sx={{ mx: 1 }}
        onClick={() => setPaused((val) => !val)}
      >
        {paused ? <PlayArrowRounded /> : <PauseRounded />}
      </IconButton>
      <IconButton aria-label="fast forward" disabled size="small">
        <FastForwardRounded fontSize="small" />
      </IconButton>
      <IconButton aria-label="loop" disabled size="small">
        <LoopRoundedIcon fontSize="small" />
      </IconButton>
    </Stack>
  </Stack>
</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={{
    p: 1,
    boxShadow: '0 2px 4px rgba(0, 127, 255, 0.2)',
    display: 'flex',
    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" noWrap>
      123 Main St, Phoenix, AZ
    </Typography>
    <Typography component="div" fontWeight="bold" noWrap>
      $280k - $310k
    </Typography>
    <Box
      sx={(theme) => ({
        mt: 1,
        px: 1,
        py: 0.5,
        typography: 'caption',
        borderRadius: 10,
        display: 'flex',
        bgcolor: 'primary.50',
        border: '1px solid',
        borderColor: 'primary.100',
        color: 'primary.700',
        ...theme.applyDarkStyles({
          bgcolor: 'primaryDark.700',
          color: 'primary.200',
          borderColor: 'primary.900',
        }),
      })}
    >
      <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