Skip to content
Edit this page

Learning resources

New to Material UI? Get up to speed quickly with our curated list of learning resources.

Your first component

The following code snippet demonstrates a basic Material UI app that features a <Button> component:

import * as React from 'react';
import ReactDOM from 'react-dom';
import Button from '@mui/material/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

In the interactive demo below, try changing the code and see how it affects the output. (Hint: change variant to "outlined" and color to "secondary". For more options, see the Button component page.)

Example projects

Visit the example projects page to see how we recommend implementing Material UI with various React libraries and frameworks like Next.js, Gatsby, Create React App, and more.

Templates

Check out our selection of basic templates to get started building your next app more quickly.

Beyond our official documentation, there are countless members of our community who create fantastic tutorials and guides for working with Material UI.

The following is a curated list of some of the best third-party resources we've found for learning how to build beautiful apps with our components.

Free