MUI Guide

The Material UI template provides a production-ready component system built on MUI v5 with @emotion for styling. It includes 14 CustomField types, 19 UI primitives, and 4 common components — all pre-styled with the Material Design spec.

Components follow the same directory structure as other templates, using Material UI components under the hood:

src/components/
├── common/
│   ├── button/
│   ├── dialog/
│   ├── DynamicTable/
│   ├── fields/
│   │   └── assets/
│   │       ├── components/    # 14 individual fields
│   │       └── interface/
│   └── pagination/
└── ui/                         # 19 MUI primitives
    ├── button, card, dialog...
    ├── textfield, select, switch...
    └── tooltip, popover, tabs...

MUI fields use react-hook-form's useFormContext and Controller for form integration. Each field wraps the equivalent MUI component (TextField, Select, Switch, etc.).

import { CustomField } from '@/components/common/fields/cusInputField.component';

<CustomField.Text
  form={form}
  name="email"
  labelName="Email"
  placeholder="your@email.com"
  required
/>

14 field components available via CustomField.*:

Four shared components adapted for MUI:

The MUI template uses @emotion/react and @emotion/styled for styling. Theme configuration is managed via MUI's ThemeProvider in src/providers/mui.provider.tsx.

// src/lib/theme.util.ts
import { createTheme } from '@mui/material/styles';

export const theme = createTheme({
  palette: {
    primary: { main: '#2563eb' },
    secondary: { main: '#7c3aed' },
  },
  shape: { borderRadius: 8 },
});

Dark mode is handled by next-themes, toggling the MUI theme mode between light and dark.

The template includes @mui/icons-material which provides 2,000+ Material Design icons as React components:

import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import MenuIcon from '@mui/icons-material/Menu';
import CloseIcon from '@mui/icons-material/Close';

<Button endIcon={<ArrowForwardIcon />}>Next</Button>

The MUI template generates MuiProvider wrapping the app with MUI's ThemeProvider and CssBaseline for consistent styling.

// src/providers/mui.provider.tsx
'use client';
import { ThemeProvider, CssBaseline } from '@mui/material';
import { theme } from '@/lib/theme.util';

export function MuiProvider({ children }) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
}