mui

import { Box, Typography, Button, Paper } from '@mui/material';
import type { SxProps, Theme } from '@mui/material';
 
const styles: Record<string, SxProps<Theme>> = {
  container: {
    p: 2,
    display: 'flex'

import type { SxProps, Theme } from '@mui/material';
 
const componentStyles: Record<string, SxProps<Theme>> = {
  container: {
    p: 2,
    display: 'flex',
    flexDirection: 'column',
  },

// UserProfile.styles.ts
import type { SxProps, Theme } from '@mui/material';
 
export const userProfileStyles: Record<string, SxProps<Theme>> = {
  container: {
    p: 3,
    maxWidth: 800,
    mx: 'auto'

// Box - Generic container
<Box sx={{ p: 2, bgcolor: 'background.paper' }}>
  Content
</Box>
 
// Paper - Elevated surface
<Paper elevation={2} sx={{ p: 3 }}>
  Content

import { Grid } from '@mui/material';
 
// 12-column grid
<Grid container spacing={2}>
  <Grid item xs={12} md={6}>
    Left half
  </Grid>
  <Grid item xs={12} md

<Typography variant="h1">Heading 1</Typography>
<Typography variant="h2">Heading 2</Typography>
<Typography variant="body1">Body text</Typography>
<Typography variant="caption">Small text

// Variants
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="text">Text</Button>
 
// Colors
<Button variant=

import { useTheme } from '@mui/material';
 
function Component() {
  const theme = useTheme();
 
  return (
    <Box
      sx={{
        p: 2,
        bgcolor: theme.palette.primary.main,
        color: theme.palette.primary.contrastText,
        borderRadius: theme.shape.borderRadius,

<Box
  sx={{
    // Access theme in sx
    color: 'primary.main',          // theme.palette.primary.main
    bgcolor: 'background.paper',     // theme.palette.background.paper
    p: 2,                            // theme.spacing(2)
    borderRadius: 1,                 // theme.shape.borderRadius
  }}
>

// Mobile-first responsive values
<Box
  sx={{
    width: {
      xs: '100%',    // 0-600px
      sm: '80%',     // 600-900px
      md: '60%',     // 900-1200px
      lg: '40%',     // 1200-1536px
      xl: '30%'

<Typography
  sx={{
    fontSize: {
      xs: '1rem',
      md: '1.5rem',
      lg: '2rem',
    },
    lineHeight: {
      xs: 1.5,
      md: 1.75,
    },
  }}
>
  Responsive text

import { TextField, Stack, Button } from '@mui/material';
 
<Box component="form" onSubmit={handleSubmit}>
  <Stack spacing={2}>
    <TextField
      label="Email"
      type="email"
      value={email}

import { Card, CardContent, CardActions, Typography, Button } from '@mui/material';
 
<Card>
  <CardContent>
    <Typography variant="h5" component="div">
      Title
    </Typography>
    <Typography variant="body2" color="text.secondary">
      Description

import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
 
<Dialog open={open} onClose={handleClose}>
  <DialogTitle>Confirm Action</DialogTitle>
  <DialogContent>
    Are you sure you want to proceed?
  </DialogContent>
  <DialogActions>
    <

import { CircularProgress, Skeleton } from '@mui/material';
 
// Spinner
<Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>
  <CircularProgress />
</Box>
 
// Skeleton
<Stack spacing=

import { useMuiSnackbar } from '@/hooks/useMuiSnackbar';
 
function Component() {
  const { showSuccess, showError, showInfo } = useMuiSnackbar();
 
  const handleSave = async () => {
    try {
      await saveData();
      showSuccess

import { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
import { Button, IconButton } from '@mui/material';
 
<Button startIcon={<AddIcon />}>Add</Button>
<IconButton onClick={handleDelete}><DeleteIcon /></IconButton>

import type { SxProps, Theme } from '@mui/material';
 
// ✅ Good
const styles: Record<string, SxProps<Theme>> = {
  container: { p: 2 },
};
 
// ❌ Avoid
const styles = {
  container: { p: 2 }, // No type safety
};

// ✅ Good: Use theme tokens
<Box sx={{ color: 'primary.main', p: 2 }} />
 
// ❌ Avoid: Hardcoded values
<Box sx={{ color: '#1976d2', padding: '16px' }} />

// ✅ Good: Use spacing scale
<Box sx={{ p: 2, mb: 3, mt: 1 }} />
 
// ❌ Avoid: Random pixel values
<Box sx={{ padding: '17px', marginBottom: '25px' }} />