How To Use Material UI In Next.js [2025]

follow these cmd to install mui in your project

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

create a folder MUI then create 2 files

1. theme.js
2. ThemeProvider.js

   

theme.js code

here i use custom font, font size , theme colors

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

// Gradient generator
function createGradient(color1, color2) {
  return `linear-gradient(to bottom, ${color1}, ${color2})`;
}

// Color definitions
const GREY = {
  0: "#FFFFFF",
  50: "#FAFAFA",
  100: "#F9FAFB",
  200: "#F4F6F8",
  300: "#DFE3E8",
  400: "#C4CDD5",
  500: "#919EAB",
  600: "#637381",
  700: "#454F5B",
  800: "#212B36",
  900: "#161C24",
  1000: "#FBFBFB",
  500_8: alpha("#919EAB", 0.08),
  500_12: alpha("#919EAB", 0.12),
  500_16: alpha("#919EAB", 0.16),
  500_24: alpha("#919EAB", 0.24),
  500_32: alpha("#919EAB", 0.32),
  500_48: alpha("#919EAB", 0.48),
  500_56: alpha("#919EAB", 0.56),
  500_80: alpha("#919EAB", 0.8),
};

const PRIMARY = {
  lighter: "#C8FAD6",
  light: "#5BE49B",
  main: "#00A76F",
  dark: "#007867",
  darker: "#004B50",
};

const SECONDARY = {
  lighter: "#EFD6FF",
  light: "#C684FF",
  main: "#8E33FF",
  dark: "#5119B7",
  darker: "#27097A",
};

const SUCCESS = {
  lighter: "#E9FCD4",
  light: "#AAF27F",
  main: "#69D548",
  dark: "#229A16",
  darker: "#08660D",
};

const ERROR = {
  lighter: "#FFE9D5",
  light: "#FFAC82",
  main: "#FF5630",
  dark: "#B72136",
  darker: "#7A0916",
};

const GRADIENTS = {
  primary: createGradient(PRIMARY.light, PRIMARY.main),
  secondary: createGradient(SECONDARY.light, SECONDARY.main),
  success: createGradient(SUCCESS.light, SUCCESS.main),
  error: createGradient(ERROR.light, ERROR.main),
};

const COMMON = {
  primary: { ...PRIMARY, contrastText: GREY[800] },
  secondary: { ...SECONDARY, contrastText: GREY[800] },
  success: { ...SUCCESS, contrastText: GREY[800] },
  error: { ...ERROR, contrastText: GREY[800] },
  grey: GREY,
  gradients: GRADIENTS,
  divider: GREY[500_24],
  action: {
    hover: GREY[500_8],
    selected: GREY[500_16],
    disabled: GREY[500_80],
    disabledBackground: GREY[500_24],
    focus: GREY[500_24],
    hoverOpacity: 0.08,
    disabledOpacity: 0.48,
    activatedOpacity: 0.12,
  },
};

// Typography
const TYPOGRAPHY = {
  fontFamily: ["Ambit", "sans-serif"].join(","),
  fontSize: 14,
  h1: { fontSize: "64px", fontWeight: 800 },
  h2: { fontSize: "48px", fontWeight: 700 },
  h3: { fontSize: "32px", fontWeight: 700 },
  h4: { fontSize: "24px", fontWeight: 700 },
  h5: { fontSize: "20px", fontWeight: 700 },
  h6: { fontSize: "18px", fontWeight: 600 },
  subtitle1: { fontSize: "16px", fontWeight: 600 },
  subtitle2: { fontSize: "14px", fontWeight: 600 },
  body1: { fontSize: "16px", fontWeight: 400 },
  body2: { fontSize: "14px", fontWeight: 400 },
  button: {
    fontSize: "15px",
    fontWeight: 700,
    textTransform: "none",
    color: "#fff!important",
  },
  caption: { fontSize: "12px", fontWeight: 400 },
  overline: { fontSize: "12px", fontWeight: 700, textTransform: "uppercase" },
};

const BREAKPOINTS = {
  values: {
    xs: 0,
    sm: 600,
    md: 900,
    lg: 1200,
    xl: 1312,
  },
};

const palette = {
  light: {
    ...COMMON,
    mode: "light",
    text: { primary: GREY[900], secondary: GREY[700] },
    background: { paper: GREY[100], default: GREY[50] },
  },
  dark: {
    ...COMMON,
    mode: "dark",
    text: { primary: "#fff", secondary: "#919EAB" },
    background: { paper: "#1C252E", default: "#1C252E" },
  },
};
const createAppTheme = (mode, direction = "ltr") =>
  createTheme({
    direction: direction,
    palette: palette[mode],
    typography: TYPOGRAPHY,
    breakpoints: BREAKPOINTS,
  });

export default createAppTheme;

"use client";
import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
import createAppTheme from "../mui/theme";
import { useEffect } from "react";
import { CssBaseline, useTheme } from "@mui/material";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";

export default function ThemeProvider({ children }) {
  const theme = createAppTheme("dark", "ltr");

  // Create cache for RTL support if needed
  const cache = createCache({
    key: theme.direction === "rtl" ? "muirtl" : "mui",
    prepend: true,
  });

  useEffect(() => {
    document.body.dir = theme.direction;
  }, [theme.direction]);

  return (
    <CacheProvider value={cache}>
      <MUIThemeProvider theme={theme}>
        <CssBaseline enableColorScheme />
        {children}
      </MUIThemeProvider>
    </CacheProvider>
  );
}

now inside layout.js use MUIThemeProvider

import localFont from "next/font/local";
import "./globals.scss";
import "../../public/font/stylesheet.css";
import ClientBodyWrapper from "./components/ClientBodyWrapper";
import ThemeProvider from "./mui/ThemeProvider";

const ambit = localFont({
  src: [
    {
      path: "../../public/font/Ambit-Regular.woff2",
      weight: "400",
      style: "normal",
    },
    {
      path: "../../public/font/Ambit-SemiBold.woff2",
      weight: "500",
      style: "normal",
    },
    {
      path: "../../public/font/Ambit-Bold.woff2",
      weight: "700",
      style: "normal",
    },
  ],
  variable: "--font-ambit",
});

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
  viewport: "width=device-width, initial-scale=1",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={ambit.variable}>
        <ThemeProvider>
          <ClientBodyWrapper>{children}</ClientBodyWrapper>
        </ThemeProvider>
      </body>
    </html>
  );
}

now you can use it

"use client";
import { Box, Typography, Button } from "@mui/material";
import { useTheme } from "@mui/material/styles";

export default function Test() {
  const theme = useTheme();

  return (
    <>
      <Box      
        sx={{
          border: "1px dashed rgba(145, 158, 171, 0.2)",
          borderRadius: theme.spacing(2),
          padding: theme.spacing(4),
          textAlign: "center",
          
        }}
      >
    
        <Typography color="text.secondary" variant="h6" sx={{ mb: 1 }}>
          Hey its demo text here
        </Typography>
       
      </Box>
     
    </>
  );
}