Skip to content
Get packs

Guide · Open source

How to use Material UI: install and build React components

Updated · written with AI from the project's own documentation and checked against our catalogue data

Material UI is a free, MIT-licensed library of React components, such as buttons, menus and form controls, that follows Google's Material Design visual system. It is meant for developers who are already writing React and want prebuilt interface pieces instead of building each one from scratch. After this guide you will know what it is for, how to install its npm packages, and where to find the documentation for the rest.

Material UImui/material-ui · ★ 99.3k · MIT

Quick start

  1. 1Check prerequisites. Confirm you have Node.js installed and a React project to add Material UI to.
  2. 2Install the packages. Run npm install @mui/material @emotion/react @emotion/styled in your project folder.
  3. 3Open the documentation. Go to the Material UI getting started guide on the official documentation site.
  4. 4Import a component. Import a component such as a button from @mui/material into your React code.
  5. 5Render it in your app. Place the component in your JSX and run your app to see it working.
  6. 6Browse the examples. Look through the example projects in the GitHub repository for patterns you can reuse.
  7. 7Add MUI X if needed. Install the companion MUI X library when you need more complex components.

What Material UI is and who it is for

Material UI is a collection of React components that implement Google's Material Design system. Developers add these pieces to a React web app rather than building every interface element by hand.

It suits React developers who want a consistent, prebuilt set of components, teams that want to follow Material Design guidelines, and projects that need a large, documented component set. It is not a fit for people who are not writing React, since the library is built for React specifically.

  • Best for React developers who want consistent prebuilt components
  • Good for teams following Material Design guidelines
  • Not for non-React projects or fully custom visual styles without Material Design
  • Beginners should learn basic JavaScript and React first

What you need before you install

The project's install method is a package manager, and the prerequisites are Node.js and React. You need a working React app before you add Material UI to it.

  • Node.js
  • A React project

Install Material UI with npm

The README does not show the install command in the excerpt provided, but the standard npm form for the core packages is below. It installs the Material UI package along with the Emotion packages it depends on for styling.

Run the command from the root of your React project.

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

Use your first component

Once installed, import components from the package into your React code and render them like any other React component. The official documentation covers the full set of components and how to configure them.

The README links to the Material UI documentation's getting started page as the starting point for usage. Example projects are also available in the repository's examples folder.

  • Read the getting started guide in the Material UI documentation
  • Browse the example projects in the GitHub repository
  • Use @latest for the latest stable release; @next points to pre-releases

Extend with MUI X for advanced components

Material UI's core functionality is extended by MUI X, a suite of more complex components for advanced use cases. Use it when the base components are not enough for your app.

Get help and find upgrade guides

For how-to questions that do not involve changing the code base, the README recommends Stack Overflow instead of GitHub issues. Older major versions are documented on separate sites, and each has an upgrade guide linked from the README.

Release notes are published on the project's GitHub releases page, and the roadmap is in the Material UI documentation.

  • Stack Overflow for how-to questions
  • GitHub releases for the changelog
  • Upgrade guides for v3 to v6 are linked from the README

What people use it for

  • Building a React web app with consistent buttons, menus and form controls
  • Following Google's Material Design guidelines in a product interface
  • Starting an internal tool quickly with a large, documented component set
  • Extending basic components with more complex ones from MUI X

Frequently asked questions

Is Material UI free to use?

Yes. The project is licensed under the MIT license, and the README describes it as free forever. The README also mentions optional paid premium templates and themes in the MUI Store.

What do I need to install Material UI?

The prerequisites listed for the project are Node.js and React. Install the packages with npm, using the command shown in this guide.

Can I use Material UI without React?

No. The library is built for React specifically, so it is not useful for projects that do not use React.

Can I make Material UI look non-Material?

The components follow the Material Design look by default. Teams that want a completely custom visual style without Material Design may be better served by another library.

Where do I ask a question about using Material UI?

The README recommends Stack Overflow for how-to questions that do not involve changes to the code base. GitHub issues are for changes to the code.

How does Material UI compare to Chakra UI, Ant Design, Mantine or shadcn/ui?

Those are comparable projects. Material UI's distinguishing feature is its Material Design implementation and its companion MUI X library. Compare them against your visual style and component needs before choosing.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Material UI is a good choice for React developers who want a documented, prebuilt component set that follows Material Design. It is less suitable for non-React projects, beginners without JavaScript and React basics, or teams that want a fully custom look. Consider one of the comparable projects if you want a different visual system.

Install options & downloads