Open In App

React Material-UI Introduction and Installation

Last Updated : 20 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Material UI is the most powerful and efficient React UI Framework to build an Application by adding Designs and Animations and using it with technical and scientific innovation. It is basically a design language that was developed by Google in 2014. It uses more Design and Animations, grid-system and provides shadows and lightning effects.

Material UI can be used with all the JavaScript frameworks like AngularJS, VueJS, and libraries like ReactJS, to make the Application more amazing and responsive. With over 35,000 stars on the GitHub, Material UI is one of the top User Interface libraries for React.

Features of Material UI

Material UI provides low-level utility functions called “style functions”  for building powerful design systems. 

  • Access the theme values directly from the component props.
  • Encourage UI consistency.
  • Write responsive style effortlessly.
  • Work with any theme object.
  • Less than KB g zipped.
  • Fast enough to execute.

Prerequisite:

Installation:

To install Material UI run the below command in your working directory.

  • Install Material UI by using npm.
    npm install @material-ui/core
  • Install Material UI by using yarn.
    yarn add @material-ui/core
Installation

Example: In this example we will make changes in App.js, we will import Material UI and place a button with the primary color.

App.js
import React, {Component} from 'react';
import './App.css';
import Button from '@material-ui/core/Button'; 

class App extends Component {
  render(){
    return (
      <div className="App"> 
        <br />
        <Button variant="contained" color="primary" 
                size="large">
            GeeksforGeeks
        </Button>     
    </div>
    
    ); 
  }
 
}

export default App;

Output:

Baisc React MUI Output

Previous Article
Next Article

Similar Reads

Angular Material Installation
Angular Material is a popular UI framework for building user interfaces with the Material Design style, widely used by web developers around the world. It is a set of reusable UI components and guidelines for building web applications with the Material Design language, which is developed by Google. It is built on top of Angular, a popular JavaScrip
5 min read
Introduction and Installation of Storybook for React
Storybook is an open-source UI development tool that facilitates the creation of reusable, well-documented components independently. It automates visual testing to prevent bugs and runs alongside the app in development mode. Additionally, it supports server-rendered component frameworks like Ruby on Rails. Prerequisites:NodeJS or NPMReact JSStorybo
2 min read
React Spring Introduction and Installation
React Spring is an animation library that makes animating UI elements simple. It is different from other animation libraries where someone has to deal with curves, easing, and time durations, all of which are in sync with each other. Platforms: React Spring is a cross-platform library, it supports React, react-native, web, and many more platforms.
2 min read
Fluent UI Introduction and Installation for React
Microsoft's Fluent UI, unveiled in 2017, is an open-source, cross-platform design system that empowers developers to craft seamless applications like Office 365. It guarantees a uniform and polished design across diverse platforms for a cohesive user experience. Prerequisite:Node JS React JSFeatures of Fluent UI:Highly customizable.Up to date compo
2 min read
React-Motion Introduction & Installation
The react-motion package is a JavaScript animation library for the React applications which can be used for creating smooth and interactive animations. This uses the spring-based physics model, through which we can define animations with natural and dynamic movements. This library is mainly suited for complex UI animations and transitions. In this
4 min read
BootStrap Introduction and Installation
To begin Web development you may go through this article first. Grid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and JumbotronBootstrap is a free and open-source collection of tools for creating websites and web applications. It is the most popular HTML, CSS, and JavaScrip
4 min read
Introduction and Installation of Heroku CLI on Windows machine
Heroku: It is a cloud based application deployment and management service. Heroku works on the container based design system and these smart containers are known as dynos. It runs application inside various dynos and each dyno is separated from each other. Installation of Heroku on Windows machine: Step 1: Download Windows installer Download the ap
2 min read
Svelte | Introduction and Installation
Svelte is the new methodology for creating web apps. It can be used in a small part of a code or in an entire single page application. It is a compiler not a framework, which is faster than other JavaScript libraries like ReactJS, AngularJS, VueJS. It is used to create reactive web apps. If any change occurs in the data that change will reflect on
2 min read
Introduction and Installation process of Gulp
Gulp can be defined as a task runner or a toolkit for automating time-consuming tasks such as magnification, concatenation, cache busting, unit testing and linting in web development. It uses Node.js as a platform and utilizes JavaScript code to help in running front-end tasks and large-scale web applications. These tasks can be run on PowerShell,
3 min read
Ant Design Introduction and Installation for Angular
Ant Design is a design pattern for enterprise-level products that can be integrated with other front-end frameworks such as Angular, React, or Vue. Ant Design official implementation is released with React but it can be used with other JavaScript frameworks. It is an open-source tool with approximately 50.4K GitHub stars, it is the world's second m
3 min read