Skip to main content

Welcome to Ahex Technologies

How to Add Material UI in ReactJS

How to Add Material UI in ReactJS

React components that implement Google’s Material Design.

Material UI is one of the world’s most popular UI framework backed by Google.

Material Design (codenamed Quantum Paperis a design language that Google developed in 2014. Material Design uses more grid-based layouts which are responsive, animations and transitions, padding, and depth effects such as lighting and shadows.

Before installing you must have npm and node installed, if not please go through the below link

https://nodejs.org/en/

https://docs.npmjs.com/getting-started

Now Setup the new react project, if you’r new to reactjs , click here to install the react project

  1. create-react-app materialreact
  2. cd materialreact/
  3. npm start
  4. After set up, install material UI
  5. npm install @material-ui/core (Please note that react >= 16.3.0 and react-dom >= 16.3.0 are peer dependencies.)
  6. Now the material UI is installed , and you can use it in your react components.
// Example Quick Start
import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';

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

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

For more reference about Material UI components , please click below link

https://material-ui.com/demos/app-bar/

Have a product idea or an existing build that needs to scale? Partner with Ahex and close the gaps before your customers find them.

Book a free consultation

Ready to build something that ships?

Ahex Technologies · Hyderabad · Serving UK, UAE, USA & Australia

Talk to an expert