MUI Core

Ready to use components,
free forever

Get a growing list of components, ready-to-use, free forever and with accessibility always in mind. We've built the foundational UI blocks for your design system so you don't have to.

Get started

Search for React UI libraries

Spot MUI

Choose MUI

Component library

40+ building block components

We've built the foundational components for your design system, enabling you to launch that cool product you've been thinking about even faster. We got your back!

Much 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

Use the advanced theming feature to easily tailor the components to your needs. You can also quick start with Material Design.

Ultraviolet

Basement • Beside Myself

<Card variant="outlined" sx={{p: 1, display: 'flex', flexDirection: {xs: 'column', sm: 'row'} }}>
  <CardMedia
    component="img"
    alt="Beside Myself album cover"
    src="/static/images/cards/basement-beside-myself.jpg"
    width="124"
    height="124"
    sx={{ borderRadius: 0.5, width: 'auto', objectFit: 'cover' }}
  />
  <Box sx={{ alignSelf: 'center', mx: 2 }}>
    <Typography variant="body1" fontWeight={500}>
      Ultraviolet
    </Typography>
    <Typography component="div" variant="caption" color="text.secondary">
      Basement • Beside Myself
    </Typography>
    <Box sx={{ mt: 2 }}>
      <IconButton aria-label="fast rewind" disabled>
        <FastRewindRounded />
      </IconButton>
      <IconButton
        aria-label={paused ? 'play' : 'pause'}
        sx={{ mx: 2 }}
        onClick={() => setPaused((val) => !val)}
      >
        {paused ? <PlayArrowRounded /> : <PauseRounded />}
      </IconButton>
      <IconButton aria-label="fast forward" disabled>
        <FastForwardRounded />
      </IconButton>
    </Box>
  </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.

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

Get and give help by joining our contributors community

The core components were crafted by many hands, all over the world. Join the community to help us expand it even further!

Learn more

2.3M

Weekly downloads on npm

72.7k

Stars on GitHub

2.2k

Open-source contributors

15.8k

Followers on Twitter

Ready to use components, free forever