How to use Material UI in React

Wednesday, January 7, 2026

#react #material-ui #mui #ui #components

Building React applications with Material Design principles requires a comprehensive component library that implements Google’s design system. As the creator of CoreUI with over 12 years of React development experience since 2014, I’ve worked with various UI frameworks in production applications. Material UI (MUI) is the most popular React implementation of Material Design, offering 50+ customizable components with excellent TypeScript support. The installation is straightforward and provides immediate access to buttons, forms, navigation, and layout components.

Install Material UI using npm and import components directly into your React application.

npm install @mui/material @emotion/react @emotion/styled

import { Button, Card, CardContent, Typography } from '@mui/material'

const Dashboard = () => {
  return (
    <Card>
      <CardContent>
        <Typography variant='h5' component='div'>
          Dashboard
        </Typography>
        <Typography variant='body2' color='text.secondary'>
          Welcome to your dashboard
        </Typography>
        <Button variant='contained' color='primary'>
          Get Started
        </Button>
      </CardContent>
    </Card>
  )
}

export default Dashboard

Best Practice Note

Material UI uses Emotion for styling by default. The library includes a comprehensive theming system accessible via createTheme and ThemeProvider for customizing colors, typography, and spacing across your application. All components follow accessibility best practices with proper ARIA attributes. For enterprise applications requiring Bootstrap-based designs rather than Material Design, consider CoreUI for React which offers similar component breadth with more traditional styling and is available at CoreUI React.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

About the Author

Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 25 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.

With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.

Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.

Learn more about CoreUI’s solutions and see how your business can benefit from working with us.