materialui

Material UI (MUI)

MUI Core (v6) is the gold standard for React UI. v6 introduces Pigment CSS (Zero-runtime CSS-in-JS) for compatibility with React Server Components (Next.js App Router).

When to Use

• Enterprise React Design Systems: Implementing Google's Material Design guidelines with battle-tested React components.
• Complex Administrative Portals: Utilizing advanced Data Grid, Date Pickers, and Tree View components.
• Custom Theming & Design Tokens: Building accessible, branded design systems via createTheme and CSS variables.
• Rapid Dashboard Prototyping: Developing polished responsive dashboards with minimal custom CSS.

Quick Start

import * as React from "react";
import {
  Button,
  Container,
  Typography,
  Card,
  CardContent,
} from "@mui/material";

export default function MuiDemo() {
  return (
    <Container maxWidth="sm" sx={{ py: 4 }}>
      <Card elevation={3}>
        <CardContent>
          <Typography variant="h5" component="div" gutterBottom>
            Material UI Card
          </Typography>
          <Typography color="text.secondary" paragraph>
            Pre-styled component adhering to Material Design 3.
          </Typography>
          <Button variant="contained" color="primary">
            Primary Action
          </Button>
        </CardContent>
      </Card>
    </Container>
  );
}

Core Concepts

Theme Customization & CSS Theme Variables

Configuring design tokens and light/dark color schemes with MUI:

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

const theme = createTheme({
  cssVariables: true, // Enables native CSS variables
  colorSchemes: {
    light: {
      palette: {
        primary: { main: "#2563eb" },
        secondary: { main: "#475569" },
      },
    },
    dark: {
      palette: {
        primary: { main: "#60a5fa" },
        secondary: { main: "#94a3b8" },
      },
    },
  },
  typography: {
    fontFamily: '"Inter", "Roboto", "Helvetica", sans-serif',
  },
});

export function AppThemeProvider({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
}