Anandi Sheladiya
Contact
  • About Anandi
  • SKILLS & EXPERIENCE
    • Frontend
      • ReactJS
      • Next.js – The React Framework for Production
      • ChartJS / D3.JS / Fabric JS
      • Three.JS: The JavaScript Library for 3D Graphics
      • HTML/CSS/JS/Tailwind CSS/Bootstrap
      • Material UI – The Ultimate React UI Framework
      • ShadCN/UI – The Modern UI Library for React
    • Backend
      • NodeJS & ExpressJS
      • Web3.JS
      • Python & Django
      • GoLang
      • TypeScript
    • Database
      • PostgreSQL
      • MongoDB - NOSQL Database
      • MySQL
    • API
      • REST API
      • GraphQL API
      • RPC (Remote Procedure Call)
      • WebSocket
    • Solidity
    • Layer 1 Blockchain
      • Ethereum
      • Solana
      • Bitcoin
      • Hyperledger
      • Binance
      • Avalanche
      • Cardano
      • Polkadot
      • Near Protocol
      • Algorand
      • TON (Telegram Open Network)
    • Optimistic Rollups (L2 on Ethereum)
      • Arbitrum
      • Base
      • Mantle
    • ZK-Rollups (L2 on Ethereum)
      • zkSync Era
      • Polygon zkEVM
    • Wallet Integration
      • Reown Appkit
      • Rainbow Walletkit
      • Web3 Modal
      • WalletConnect
      • Wagmi
      • Metamask & Safewallet SDKs
    • Web3 SDKs & API Providers
      • Alchemy
      • Moralis
      • QuickNode
      • BitQuery API & Stream
      • ThirdWeb
      • Infura
      • Li.Fi
      • 1Inch API
      • Uniswap API
      • OpenZeppelin
    • Web3 Middleware/ UX Infrastructure Platform
      • Biconomy
      • Pimlico
      • Alchemy AA
      • Safe (formerly Gnosis Safe)
      • ZeroDev
    • On Chain Trading Platform & Telegram Bot
      • Bullx
      • Wave Bot
      • GMGN
      • Shuriken
      • Magnum Trade
      • Trojan
  • PROTOCOLS
    • ERCs & EIPs
      • ERC-20: The Standard for Fungible Tokens
      • ERC-721: The Standard for Non-Fungible Tokens (NFTs)
      • ERC 4337
      • ERC 6551: Token Bound Accounts (TBA)
      • ERC 7702
      • EIP 4844 (Proto-Danksharding)
      • Ethereum Pectra
  • ARTICLES
    • Medium
Powered by GitBook
On this page
  • Introduction
  • Why Use Material UI?
  • Installation
  • Basic Usage in a React Project
  • Core Components in Material UI
  • Theming & Customization
  • Responsive Design with Grid System
  • Icons in Material UI
  • Advanced Features in Material UI

Was this helpful?

  1. SKILLS & EXPERIENCE
  2. Frontend

Material UI – The Ultimate React UI Framework

Introduction

Material UI (MUI) is a popular React UI library that provides ready-to-use, customizable components based on Google’s Material Design principles. It helps developers build beautiful, responsive, and accessible web applications quickly.

Why Use Material UI?

  • Pre-designed Components – Buttons, Modals, Tables, Forms, etc.

  • Customizable with Theme Support – Easily change colors, typography, and styles.

  • Fully Responsive – Works on all screen sizes.

  • Performance Optimized – Uses JSS (CSS-in-JS) for efficient styling.

  • Built-in Dark Mode – Easy theming for dark/light mode.

  • Accessibility (a11y) Ready – Compliant with WCAG standards.

Installation

Install Material UI core library & icons:

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material

Basic Usage in a React Project

Using a Material UI Button

import React from "react";
import { Button } from "@mui/material";

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

export default App;

Core Components in Material UI

Button

Styled buttons with different variants

<Button variant="contained">Click</Button>

Typography

Pre-styled text elements

<Typography variant="h4">Heading</Typography>

Grid

Responsive layout system

<Grid container spacing={2}>...</Grid>

Card

Material Design card component

<Card><CardContent>Content</CardContent></Card>

AppBar

Navigation bar/header

<AppBar position="static">...</AppBar>

Drawer

Sidebar navigation menu

<Drawer open={true}>...</Drawer>

Table

Display tabular data

<Table><TableRow><TableCell>Data</TableCell></TableRow></Table>

Dialog

Pop-up modal for interactions

<Dialog open={true}>...</Dialog>

Theming & Customization

Applying a Custom Theme

import { createTheme, ThemeProvider } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    primary: {
      main: "#1976d2",
    },
    secondary: {
      main: "#ff4081",
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary" variant="contained">Themed Button</Button>
    </ThemeProvider>
  );
}

Responsive Design with Grid System

Material UI uses a flexbox-based grid system.

import { Grid, Paper } from "@mui/material";

function GridExample() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} sm={6} md={4}>
        <Paper>Item 1</Paper>
      </Grid>
      <Grid item xs={12} sm={6} md={4}>
        <Paper>Item 2</Paper>
      </Grid>
    </Grid>
  );
}

Breakpoints:

  • xs → Extra small (mobile)

  • sm → Small (tablet)

  • md → Medium (laptops)

  • lg → Large (desktops)

  • xl → Extra-large screens

Icons in Material UI

Import and Use Icons

import { Home, Delete } from "@mui/icons-material";

function IconExample() {
  return <Home fontSize="large" color="primary" />;
}

Common Icons:

  • Home → <Home />

  • Delete → <Delete />

  • Mail → <Mail />

  • Search → <Search />

  • Folder → <Folder />

Advanced Features in Material UI

1. Dark Mode

const darkTheme = createTheme({
  palette: {
    mode: "dark",
  },
});
  1. Data Tables

import { Table, TableRow, TableCell } from "@mui/material";

function DataTable() {
  return (
    <Table>
      <TableRow>
        <TableCell>Name</TableCell>
        <TableCell>Age</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Alice</TableCell>
        <TableCell>25</TableCell>
      </TableRow>
    </Table>
  );
}
  1. Snackbar Notifications

import { Snackbar } from "@mui/material";

function Notification() {
  return (
    <Snackbar open={true} message="This is a notification!" />
  );
}
PreviousHTML/CSS/JS/Tailwind CSS/BootstrapNextShadCN/UI – The Modern UI Library for React

Last updated 3 months ago

Was this helpful?