Skip to main content

About Material UI

Meet Material-UI — your new favorite user interface library

Material-UI is a popular react library that has extensive extensive library of components and are ready for production.

  • It is an open-source, fronted react library.
  • It is built using Less, Less stands for ( Leaner Style Sheets)
  • It is backward-compatible language extension for CSS .
  • It was introduced in the year 2014, not long after React came out to public and since then it has grown in popularity and usage.

Material-UI widgets are hugely insipired from the Google's Maerial Design and hence it provides a high-quality, digital experience while dveloping front-end.

With more that 65,000 stars on on the github, Material-UI is one of the top user interface libraries for react

Some terrific feautres of Material-Ui

  • dyamic styles generated at runtime
  • Nested themes with intuitive overrrides
  • reduced load time with code splitting

What makes Material-UI different from other frontend libraries?

Seriously a hell lot of things, to mention a few,

  • Many front-end frameworks are not very well docuemented, this makes it hard to develop with them. However, Material-UI has detailed documnetation that makes it easy to naviagate and understand it well.

  • The components of it, are consistent in design and color tones, which allows the developed application/webpage to look aethetically pleasing and appealing.

  • Few websites whose frontend has used Material-UI

  • buybags

  • atomicCRM

  • backstage

  • d-cide

Installation Of Material-UI

To install Material-UI, run the following command in your React project's root directory

npm install @material-ui/core

If you prefer yarn, run the following

yarn add @material-ui/core

Use the following code to the head tag of your index.html file.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

Few Additional Knowledge

  • To use SVG icons, run the following command, and install @material-ui/icons as a dependency npm install @materail-ui/icons

The first thing to do in order to use any Material-UI component is to import that component. In your App.js, add the following code at the top with other imports.

import React from "react";
2import { Button } from '@material-ui/core';

Hope this helped. Image source - link