In the world of web development, user interfaces are a crucial aspect of any web application. To our aid, there are many UI libraries that allow us to build scalable web applications from scratch.
Material UI is a React-based UI library with many ready-made components for creating an appealing user experience. It implements Material Design principles in terms of visual and interactive design, and provides a set of pre-designed and customizable React components. These prebuilt components have rescued developers from the hassle of writing CSS rules over and over again.
Whether you're an absolute beginner or an experienced developer, Material UI is an excellent library to meet the requirements of your web application. This detailed blog will help you build a responsive web application using Material UI. We will also cover all its features and benefits of Material UI.
So, let's dive in!
What is Material UI (MUI)
Material UI is a popular front-end user interface (UI) component library for React. It has a number of ready-made components for making web apps. Material design draws inspiration from the tangible world and its various textures, taking into account their interactions with light and shadows.
MUI components are created with React and follow the "composition over inheritance" principle. This means they're designed to be combined and customized for building advanced interfaces. Each component is modular so that you can easily modify it by adding or removing features, adjusting the look and behaviour, or nesting it with other components to make responsive web designs.
Material UI has approximately 2.5 million downloads per week. Its popularity can be attributed to its ease of use, flexibility, and responsive design capabilities
Material UI is a vast library that offers a wide range of user interface elements and components. You can find everything from modals and forms to form elements and much more. These components are very flexible and can be customized to our needs, making them perfect for creating responsive and accessible React components from scratch.
Getting started with Material UI
In order to set up Material UI in your project, you need to have a working React project.
Setting up a React project
One prerequisite before creating a React app is to install Node.js on your system, as it is required to provide the necessary runtime environment for executing JavaScript code on the server or local machine.
Now you can follow the below steps:
Open the command prompt in the folder where you want to have your React app. You can move the chosen folder location with the cd (change directory) command.
Type the following command to create a boilerplate setup. npm init vite@latest my-react-app --template react Additionally, you can also use NextJS, which is a production-grade framework built on top of ReactJS. You can use the following command to set up a NextJS project: npx create-next-app
Now change the working directory to your project directory using the following command. cd project-directory
Start your development server by running npm start or npm run dev on the terminal.
Now that you have finished setting up your React project setup, let's integrate Material UI into the project.
Install Material UI
Material UI can be installed on your project using the package manager of your choice. NPM and yarn are the most popular ones.
To add Material UI to your project, run one of the following commands:
After installing Material UI, you can now import the UI components into your React component by using the syntax.
import Element from “@mui/*”;
Now that Material UI is installed on your project, let's understand the basic UI components present in Material UI.
Understanding the basic UI components in Material UI
As we mentioned earlier, Material UI is a vast library with lots of components that we can use. All we have to do is import the component, and we can directly start using the MUI component in our React application.
Some of the most commonly used Material UI components are:
Buttons
Most websites use buttons for CTAs, and Material UI provides a wide range of button components that can be used in different scenarios. A Button component can be used to respond to user clicks and show some animations.
Mainly, there are three variants for the Button component:
Text button: Text buttons are commonly used for actions that are not as prominent, such as those found in dialogs and cards.
Contained button: Contained buttons are highly emphasized and can be distinguished by their use of elevation and fill
Outlined button: These are medium-emphasis buttons. They include actions that are important but aren't the main focus of an app.
Let’s look at an example of using the Button component to render three buttons with different variants (text, contained, and outlined).
import * as React from 'react';
import Button from '@mui/material/Button';
export default function App() {
return (
<>
<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined"> Outlined</Button>
</>
);
}
Output:
Text Fields
Text fields are used to take input directly from the user in a web application. Material UI provides a TextField component that can be used to create text fields. It is often used with form elements for handling user data.
TextField also has three variants: outlined, filled, and standard. This code is an example of the different variants of the Material UI TextField component.
Material UI offers three distinct methods for incorporating icons into your project:
Standardized material icons: These icons come pre-packaged as React components in SVG format.
SvgIcon component: With these icons you can use custom SVG icons while still using React's features.
Icon component: The icon component allows you to use custom font icons within your project, again wrapped in React to ensure optimal performance.
Using standardized material icons
To use standardized Material Icons, you need to additionally install the @mui/icons-material package using the package manager you prefer.
This code example demonstrates how to use three Material UI icons such as CloudIcon, PersonIcon, and BugReportIcon. We will update the default color and render them on the screen.
import * as React from "react";
import BugReportIcon from "@mui/icons-material/BugReport";
import PersonIcon from "@mui/icons-material/Person";
import CloudIcon from "@mui/icons-material/Cloud";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
export default function IconCard() {
return (
<Card sx={{ maxWidth: 645, margin: 15 }}>
<CardContent>
<Typography variant="h5" component="div">
Featured Icons
</Typography>
<BugReportIcon sx={{ fontSize: 50, padding: 5, color: "red" }} />
<PersonIcon sx={{ fontSize: 50, padding: 5, color: "brown" }} />
<CloudIcon sx={{ fontSize: 50, padding: 5, color: "blue" }} />
</CardContent>
</Card>
);
}
Output:
Using custom SVG Icons
Sometimes you may need custom icons that may not be readily available in Material UI icons. To our aid, we can use the SvgIcon wrapper available in Material UI to create custom icons.
MUI offers built-in accessibility for the SVG icons, and it can be easily used with other MUI components. SVG elements should be scaled so that they fit in a 24x24px viewport, and the viewBox attribute can be changed to fit your needs. The icon's default colour is inherited, but you can set a specific theme colour using the color prop.
Syntax:
import SvgIcon from "@mui/material/SvgIcon";
import { red } from "@mui/material/colors";
function CustomSvgIcon(props) {
return (
<SvgIcon {...props}>
{/* SVG content goes here */}
</SvgIcon>
);
}
Using Icon component
The Icon component allows you to have vector icons for your application. It acts like a wrapper for any icon font that supports ligatures, meaning you can use it with various fonts, including the popular Material Icons font. Before using the Icon component, you need to include an icon font in your project, such as the Material Icons font.
The following example shows how to use Font Awesome with Material UI. For this, you first install its package @fortawesome/react-fontawesomeusing npm or yarn, whichever one you prefer.
Cards are one of the most commonly used UI elements that you can use to display information with a boundary. They are self-contained boxes with specific information, such as text, and images. You can see cards being used on the pricing page, in blog previews, when featuring a product, etc.
Here is an example of working with the Card component to feature a product. We use the CardMedia component to render an image here inside the card.
import React from "react";
import {
Card,
CardMedia,
CardContent,
Typography,
CardActions,
Button,
} from "@mui/material";
const App = () => {
return (
<div
className=""
style={{
display: "grid",
placeItems: "center",
height: "100vh",
width: "100vw",
}}
>
<Card sx={{ maxWidth: 400 }}>
<CardContent>
<CardMedia
component="img"
height="200"
sx={{ objectFit: "cover" }}
image="https://ph-files.imgix.net/8e58f8ba-f842-4f27-b343-ee78e35115ee.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&fit=max&dpr=1"
/>
<Typography gutterBottom variant="h5" component="div">
Save revenue, customers, and sleepless nights with Zipy Plug & Play
</Typography>
<Typography variant="body2" color="text.secondary">
Zipy Plug & Play is a powerful tool powered by ChatGPT that helps you record and replay browser sessions. It allows you to fix network failures, JS exceptions, and console errors, and can be used by Support, Product, Growth, and Development teams.
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</div>
);
};
export default App;
Output:
Typography
The Typography component allows developers to effectively display text in various styles, sizes, and weights. It helps create a visual hierarchy and communicates essential information to the user, and search engine.
The common typography heading types are:
h1: Used as page title. It should only be used once in a page.
h6: Use for captions or labels within a section or sub-section.
<Typography variant="h6">Caption or Label</Typography>
Appbar
AppBar is a core component in Material-UI that is used to create a top navigation bar for web applications. The top app bar displays content and actions that are relevant to the current screen. It's used for branding, screen titles, navigation, and actions.
I'm sharing a piece of code, to demonstrate the use of Material UI's styled components to create a custom AppBar component that includes a logo, links, and a search bar. The code uses useState to handle search input and styled components to set custom styles for the AppBar, Toolbar, Logo, Search, SearchIcon, LinkItems, and InputBase components.
Material UI provides easy-to-use and visually appealing form components. We can customize the size, color, and styling of the form elements. Additionally, Material UI provides form-specific components, such as FormLabel, FormControl, and FormHelperText, to make forms more accessible and user-friendly.
Let’s now talk about some of the form elements and see how you can use them in your project.
TextField: As we mentioned earlier, the TextField component provides an input field that can be used for text, numbers, and passwords. It supports various types of input, such as email, phone number, and date, and comes with customization options.
Material UI also makes it easy to validate user input in forms and provide feedback for any errors. There are built-in validation functions that can be used with form elements like TextField. These validation functions include checking for required fields, valid email
addresses, numbers, and character limits. By using these functions, you can ensure that users enter valid input and provide clear feedback when errors occur.
Checkbox: Checkboxes are a common UI element in forms and are mostly used when we want the user to select multiple options or toggle on or off a single option.
The following code demonstrates how to use Material UI’s Radio and RadioGroup components. Each radio button is wrapped in a FormControlLabel component that provides the label for the radio button.
import * as React from "react";
import {
FormControl,
FormControlLabel,
FormLabel,
Radio,
Card,
RadioGroup,
Typography,
} from "@mui/material";
const label = { inputProps: { "aria-label": "Checkbox demo" } };
export default function Checkboxes() {
return (
<div style={{ display: "flex", justifyContent: "center", width: "100vw" }}>
<Card>
<FormControl component="fieldset" sx={{ margin: 16 }}>
<FormLabel component="legend">
<Typography variant="h4" marginBottom="2rem">
What kind of debugging do you want to do?
</Typography>
</FormLabel>
<RadioGroup aria-label="gender" name="clg">
<FormControlLabel
value="female"
control={<Radio />}
label="Console & Network log"
/>
<FormControlLabel
value="Male"
control={<Radio />}
label="Stack trace"
/>
<FormControlLabel
value="new gender"
control={<Radio />}
label="All of the above"
/>
</RadioGroup>
</FormControl>
</Card>
</div>
);
}
Output:
Select: The Select component in MUI allows you to have one or more options selected from a drop-down list. It supports various customization options such as search, filtering, and grouping.
Switch: The Switch component provides a simple yes or no type of selection option, allowing users to toggle between two states like on/off or true/false.
The following code demonstrates the implementation of Material UI's Switch component. Here we created a set of four switches from which the user can toggle between one or more options.
import * as React from "react";
import Switch from "@mui/material/Switch";
import { Card, Typography } from "@mui/material";
const label = { inputProps: { "aria-label": " updates" } };
export default function RegistrationForm() {
return (
<div style={{ width: "100vw" }}>
<Card sx={{ width: "50vw", margin: "auto", padding: 5 }}>
<Typography variant="h4" sx={{ marginBottom: "2rem" }}>
Select Zipy features that you have used
</Typography>
{[
"Session replay",
"Stack trace",
"Console and Network logs ",
"AI Resolve",
].map(function (value) {
return (
<>
{" "}
<Switch
key={value}
name={value}
value={value}
color="primary"
inputProps={label}
></Switch>
<label>{value}</label>
<br />
</>
);
})}
</Card>
</div>
);
}
Output:
Slider: This Slider component provides a slider that allows users to drag and select a value from a range. It is a horizontal bar with a thumb or marker that users can drag along the bar to select a value.
This following code demonstrates how to use Material UI's Slider component to create a slider with customizable values.
import * as React from "react";
import Slider from "@mui/material/Slider";
import { Paper, Typography } from "@mui/material";
function value(value) {
return `${value}%`;
}
export default function App() {
return (
<div style={{ width: "100vw",height:"100vh", margin: "auto", display: "grid", placeItems: "center",background:"rgb(255,255,255)" }}>
<div style={{ paddingBottom: "1rem" }}>
<Paper sx={{ padding: 5 }} elevation={1}>
<Typography variant="h6" sx={{marginBottom:5}}>
How satisfied are you with our Product?
</Typography>
<Slider
aria-label="Satisfaction Level"
defaultValue={50}
getAriaValueText={value}
valueLabelDisplay="on"
step={10}
marks
min={0}
max={100}
/>
</Paper>
</div>
</div>
);
}
Output:
You can create full fledged responsive forms with Material UI that can be used in your web application. The forms and their components, such as inputs, selects, checkboxes, and radio buttons, can automatically adjust their sizes and layouts based on the available screen space.
Layouts in Material UI
One of the notable features of Material UI is its powerful layout system. It allows us to easily create responsive and adaptable layouts that look clean on any viewport. In this section, we will look at all the aspects of layouts using Material UI.
Grid system for creating responsive layouts
Grid systems are fundamental components of layout systems, and Material UI's grid system is no exception. Developers can easily create responsive layouts that adjust to different screen sizes using Material UI's 12-column grid system.
The grid is based on the Flexbox layout, which allows for flexible and dynamic content placement. To make a layout responsive, you can define how many columns each grid item should span at different screen sizes using the xs, sm, md, lg, and xl props.
You'll need to import the Grid component from Material UI to use the grid system. The following example shows how to create a basic grid layout in Material UI.
File name: Basicgrid.jsx
import * as React from "react";
import { styled } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import Grid from "@mui/material/Unstable_Grid2";
import { Typography } from "@mui/material";
const products = [
{ name: " Filter errors " },
{ name: "Live User Sessions " },
{ name: "Real user monitoring tool " },
{ name: "Work seamlessly with you stack" },
{ name: "Debug at affordable prices with Zipy" },
];
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === "light" ? "#1A2027" : "#fff",
...theme.typography.body2,
padding: theme.spacing(2),
textAlign: "center",
color: "white",
}));
export default function App() {
return (
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
}}
>
<Paper sx={{ padding: 5 }} elavation={1}>
<Typography
variant="h3"
component="div"
sx={{ textAlign: "center", margin: 8 }}
>
Features of Zipy.ai
</Typography>
<Grid
container
spacing={2}
justifyContent={"center"}
alignItems={"center"}
>
{products.map((product) => (
<Grid item xs={9} sm={6} md={4} key={product.name}>
<Item>{product.name}</Item>
</Grid>
))}
</Grid>
</Paper>
</div>
);
}
Output:
Container component in Material UI
The Container component offered by Material UI serves as a versatile tool for wrapping and centering content, making it ideal for designing responsive layouts that accommodate various screen sizes.
The Container component in Material UI provides two types of styling and adjustment properties:
Fixed: If you prefer designing for a fixed set of sizes instead of accommodating a fully fluid viewport, you can use the Fixed property. With this property, the max-width matches the min-width of the current breakpoint.
The following code snippet shows how to use the fluid prop inside the container component:
Here are the sample values for the maxWidth values of the Material UI Container component with the fixed prop:
sm (600-899px): The maxWidth will be 600px
md (900-1279px): The maxWidth will be 900px
lg (1200-1536px): The maxWidth will be 1200px
xl (1536px and above): The maxWidth will be 1536px
Fluid: The Fluid component functions as a container that envelops its content with a maxWidth value specified as a prop. This value serves as the default width of the container and determines the targeted screen width.
Using the Fluid component in your Material UI design allows for a more flexible layout that can adapt to different screen sizes and devices.
By utilizing the Fluid component and setting the appropriate maxWidth value, you can ensure that your content is displayed optimally across various devices and screen sizes.
Syntax
import Container from "@mui/material/Container";
export default function App() {
return (
<Container maxWidth="sm | md | lg | xl |">
{/* Content goes here */}
</Container>
);
}
Box component for adding spacing and borders
Material UI provides a Box component that you can use to add spacing and borders to your elements. The Box component is a versatile and adaptable component that allows you to easily customise your elements' spacing and borders.
The Box component acts as a wrapper component for the majority of the CSS utility requirements. You can think of it as a <div> wrapper around your code.
The following code demonstrates how to use Material UI's Box component to create a section and you can notice in the code that we have done a good amount of styling to Box component.
import * as React from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { Container } from "@mui/material";
export default function BoxComponent() {
return (
<Container
maxWidth="lg"
style={{
display: "flex",
justifyContent: "center",
alignItems: "center"
}}
>
<Box
bgcolor="white"
color="black"
width="100%"
height="400px"
maxWidth="400px"
borderRadius="8px"
boxShadow={2}
p={2}
textAlign="left"
justifyContent="center"
>
<img
src="https://ph-files.imgix.net/e2223dee-2584-4bff-b368-f903112529e3.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&fit=max&dpr=1"
alt="zipy"
width="100%"
style={{ borderRadius: "8px", marginBottom: "15px" }}
/>
<Typography variant="body1" style={{ padding: "0 15px" }}>
Zipy combines session replays with advanced devtools like stack trace,
console log, and network log, providing a powerful debugging
experience. It even integrates with ChatGPT for quick code
suggestions.
</Typography>
</Box>
</Container>
);
}
Output:
Material UI Theming
Material UI is a developer friendly framework, as we can easily customize MUI with our own theme. Material UI theme is essentially a collection of settings that define the look and feel of your app’s components. Some of the key theme properties include:
Palette: Palette is the colors that are used throughout the app. The MUI palette also includes a variety of color types, such as primary, secondary, and error, each with their own shades.
import { createTheme } from '@mui/material/styles';
import blue from '@mui/material/colors/blue';
import red from '@mui/material/colors/red';
const theme = createTheme({
palette: {
primary: red,
secondary: blue,
},
});
Typography: Typography includes the font families, sizes, and weights which allows you to have consistent typography styles to your UI components.
Breakpoints: Breakpoints are used for responsive design settings. You can also override the existing breakpoints in Material-UI to define your own custom breakpoints that better suit the specific requirements of your application.
Overrides: You can apply custom styles to specific components and this allows you to customize the appearance of Material UI components without modifying the default styles.
Props: You can use default properties for Material UI components to configure their behavior and appearance without needing to define custom styles or override default styles. Some of the examples of props include color, variant, disabled etc.
Just like using CSS variables, you can create custom variables to the theme so you can use them everywhere.
In the following code, we will use the createTheme function in Material UI, to create a custom theme object for your application. Here, we added the status object to an error property that is assigned the value of red[500], just like this you can add your own custom rules.
Although Material UI provides almost all the components that we need, sometimes we need to customize it to match our design system. Material UI offers multiple options for customizing the styles of its components. The ideal approach for you will depend on the situation in hand. Some of the ways include:
1. One-off customization
You can adjust the styling for a single component instance, rather than applying changes to all instances of that component or creating a global theme. You can achieve it by using 'sx' prop, class name overrides, or state classes.
For example, you can use the sx prop to change the background colour of the Button component, as shown below:
2.Reusable Component
Reusable component that can be utilized in multiple places within an application, rather than being limited to a single location or page. These components can be customized using the styled function, which allows for overriding the default styles for a specific component.
3. Global Theme Overrides
With Material UI, you can change the way your components look using the createTheme function. This function helps you make a new theme object that you can tweak to suit your website's design system. Once created, the theme can be passed to the 'ThemeProvider' component.
4. Global CSS Override
You can override the CSS rules of a Material UI component by using Global CSS overrider
In order to accomplish this you can pass the styles to the GlobalStyles component which will do the rest for you.
Advanced Material UI components
When you are using Material UI for building a basic React application, you can simply achieve that by using the basic UI component. But there may be times when you need to make the most out of Material UI. Now it's time to get familiar with some advanced MUI components.
Material UI seems like a simple component library, but it can help you build advanced UI components like dashboards, tables, etc. Most websites will have some kind of dynamic data and in order to render the data, we might need components like tabs, pagination, modals, drawers, etc. We will look into some of the most commonly used advanced components as well in the later section.
You can see from the above dashboard that we can create engaging user interfaces with the help of these UI components. Sometimes you may need to install some external libraries but for most of the time, Material UI got you covered.
Now let’s look at some of the advanced MUI components:
Modal
The Modal component in Material UI is like a foundation that you can build upon to create all kinds of modal windows. Whether you need a dialogue box, a popover, or a lightbox, the Modal component has got you covered.
The following code demonstrates how to create a basic modal using the Modal component in Material UI. Clicking the button opens the modal, which is handled by the handleonOpen function.
import React, { useState } from "react";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Modal from "@mui/material/Modal";
import Container from "@mui/material/Container";
import { Image } from "@mui/icons-material";
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 600,
bgcolor: "background.paper",
boxShadow: 24,
p: 4,
};
const Zipy = () => {
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<div>
<Button
onClick={handleOpen}
variant="contained"
color="primary"
sx={{ top: "300px", left: "600px" }}
>
<Typography variant="h5">Learn more about Zipy</Typography>
</Button>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-title"
aria-describedby="modal-description"
>
<Container sx={style}>
<Typography variant="h4" id="modal-title" mb={2}>
What is Zipy?
</Typography>
<Typography variant="h6" id="modal-description" mb={2}>
Zipy is a one spot solutions for digital experience. It combines
session replays with devtools like stack trace, console log, and
network log. It helps product, marketing, and QA teams identify
issues and engineers with error tracking, and debugging.
</Typography>
</Container>
</Modal>
</div>
);
};
export default Zipy;
Output:
Table
Material UI provides several table related elements to display tabular data and they can be fully customize. It’s commonly used to show the pricing table, and analytics dashboards..
You can refer to this code to create a table. For now, we have taken an example of error information that a debugging tool can capture. Our table shows categories and remarks for different types of errors.
Navigation Drawers are a user interface component commonly used in both web and mobile applications. They provide users access to different app pages by displaying a list of links or buttons.
The following code creates a Material-UI drawer that is left aligned. Clicking the hamburger menu opens a drawer with a list of items rendered using MUI components. It is often used in mobile devices to create a responsive layout.
On mobile devices, the drawer will look like this:
Image List
The Image List component allows you to display a collection of images in an organised grid.
The following code displays an image list using Material-UI's ImageList and ImageListItem components. The images are rendered from an array of data containing URLs and titles for each image.
Congratulations on reaching this far! You are a fantastic reader!
We know that user experience is the deal breaker in the current market, creating a demand for beautiful and functional products. Material UI with its powerful and modern framework can be a lifesaver. So try it out and craft visually appealing, user-friendly, and responsive applications faster.
Material-UI, licensed under MIT, allows freedom to use, modify, and distribute without sharing source code or modifications. In today's market, user experience is crucial, and Material UI's modern framework helps create visually appealing, user-friendly, and responsive applications quickly. Give it a try!
Happy Materializing!
Call to Action
Feel free to comment or write to us in case you have any further questions at support@zipy.ai. We would be happy to help you. In case you want to explore for your app, you can sign up or book a demo.
.svg)
.webp)
.webp)
.svg){kind=small}
