Mui

by davila78da17d671b6fNo license32K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated today

Material-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI components, styling with sx prop, theme customization, or MUI utilities.

Instructions onlySoftware Development

AI-generated overview

Reference patterns for using Material-UI v7 components, sx prop styling, theming and responsive design.

What it does: Provides guidance and code examples for building interfaces with Material-UI v7, covering the sx prop, theme integration, responsive breakpoints, common components, forms, dialogs and loading states. It also documents v7 breaking changes from v6 and MUI-specific hooks, and points to bundled resource files on styling, components and theme customization. It produces reference material and example snippets rather than running anything.
When to use it: Use it when writing or reviewing code that uses MUI components, styles with the sx prop, customizes a MUI theme, or needs MUI responsive breakpoints and utilities. It is also useful when migrating from MUI v6 to v7 and checking breaking changes.
Requirements: No scripts or runtime are included; it is instructions and markdown resources only. The referenced code assumes a project with @mui/material, @mui/icons-material and TypeScript types installed.

MUI v7 Patterns

Purpose

Material-UI v7 (released March 2025) patterns for component usage, styling with sx prop, theme integration, and responsive design.

Note: MUI v7 breaking changes from v6:

Deep imports no longer work - use package exports field
onBackdropClick removed from Modal - use onClose instead
All components now use standardized slots and slotProps pattern
CSS layers support via enableCssLayer config (works with Tailwind v4)

When to Use This Skill

Styling components with MUI sx prop
Using MUI components (Box, Grid, Paper, Typography, etc.)
Theme customization and usage
Responsive design with MUI breakpoints
MUI-specific utilities and hooks

Quick Start

Basic MUI Component

typescript

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',    flexDirection: 'column',    gap: 2,  },  header: {    mb: 3,    fontSize: '1.5rem',    fontWeight: 600,  },};
function MyComponent() {  return (    <Paper sx={styles.container}>      <Typography sx={styles.header}>        Title      </Typography>      <Button variant="contained">        Action      </Button>    </Paper>  );}

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',    flexDirection: 'column',    gap: 2,  },  header: {    mb: 3,    fontSize: '1.5rem',    fontWeight: 600,  },};
function MyComponent() {  return (    <Paper sx={styles.container}>      <Typography sx={styles.header}>        Title      </Typography>      <Button variant="contained">        Action      </Button>    </Paper>  );}

Styling Patterns

Inline Styles (< 100 lines)

For components with simple styling, define styles at the top:

typescript

import type { SxProps, Theme } from '@mui/material';
const componentStyles: Record<string, SxProps<Theme>> = {  container: {    p: 2,    display: 'flex',    flexDirection: 'column',  },  header: {    mb: 2,    color: 'primary.main',  },  button: {    mt: 'auto',    alignSelf: 'flex-end',  },};
function Component() {  return (    <Box sx={componentStyles.container}>      <Typography sx={componentStyles.header}>Header</Typography>      <Button sx={componentStyles.button}>Action</Button>    </Box>  );}

import type { SxProps, Theme } from '@mui/material';
const componentStyles: Record<string, SxProps<Theme>> = {  container: {    p: 2,    display: 'flex',    flexDirection: 'column',  },  header: {    mb: 2,    color: 'primary.main',  },  button: {    mt: 'auto',    alignSelf: 'flex-end',  },};
function Component() {  return (    <Box sx={componentStyles.container}>      <Typography sx={componentStyles.header}>Header</Typography>      <Button sx={componentStyles.button}>Action</Button>    </Box>  );}

Separate Styles File (>= 100 lines)

For complex components, create separate style file:

typescript

// UserProfile.styles.tsimport type { SxProps, Theme } from '@mui/material';
export const userProfileStyles: Record<string, SxProps<Theme>> = {  container: {    p: 3,    maxWidth: 800,    mx: 'auto',  },  header: {    display: 'flex',    justifyContent: 'space-between',    alignItems: 'center',    mb: 3,  },  // ... many more styles};
// UserProfile.tsximport { userProfileStyles as styles } from './UserProfile.styles';
function UserProfile() {  return <Box sx={styles.container}>...</Box>;}

// UserProfile.styles.tsimport type { SxProps, Theme } from '@mui/material';
export const userProfileStyles: Record<string, SxProps<Theme>> = {  container: {    p: 3,    maxWidth: 800,    mx: 'auto',  },  header: {    display: 'flex',    justifyContent: 'space-between',    alignItems: 'center',    mb: 3,  },  // ... many more styles};
// UserProfile.tsximport { userProfileStyles as styles } from './UserProfile.styles';
function UserProfile() {  return <Box sx={styles.container}>...</Box>;}

Common Components

Layout Components

typescript

// Box - Generic container<Box sx={{ p: 2, bgcolor: 'background.paper' }}>  Content</Box>
// Paper - Elevated surface<Paper elevation={2} sx={{ p: 3 }}>  Content</Paper>
// Container - Centered content with max-width<Container maxWidth="lg">  Content</Container>
// Stack - Flex container with spacing<Stack spacing={2} direction="row">  <Item />  <Item /></Stack>

// Box - Generic container<Box sx={{ p: 2, bgcolor: 'background.paper' }}>  Content</Box>
// Paper - Elevated surface<Paper elevation={2} sx={{ p: 3 }}>  Content</Paper>
// Container - Centered content with max-width<Container maxWidth="lg">  Content</Container>
// Stack - Flex container with spacing<Stack spacing={2} direction="row">  <Item />  <Item /></Stack>

Grid System

typescript

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={6}>    Right half  </Grid></Grid>
// Responsive grid<Grid container spacing={3}>  <Grid item xs={12} sm={6} md={4} lg={3}>    Card  </Grid>  {/* Repeat for more cards */}</Grid>

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={6}>    Right half  </Grid></Grid>
// Responsive grid<Grid container spacing={3}>  <Grid item xs={12} sm={6} md={4} lg={3}>    Card  </Grid>  {/* Repeat for more cards */}</Grid>

Typography

typescript

<Typography variant="h1">Heading 1</Typography><Typography variant="h2">Heading 2</Typography><Typography variant="body1">Body text</Typography><Typography variant="caption">Small text</Typography>
// With custom styling<Typography  variant="h4"  sx={{    color: 'primary.main',    fontWeight: 600,    mb: 2,  }}>  Custom Heading</Typography>

<Typography variant="h1">Heading 1</Typography><Typography variant="h2">Heading 2</Typography><Typography variant="body1">Body text</Typography><Typography variant="caption">Small text</Typography>
// With custom styling<Typography  variant="h4"  sx={{    color: 'primary.main',    fontWeight: 600,    mb: 2,  }}>  Custom Heading</Typography>

Buttons

typescript

// Variants<Button variant="contained">Contained</Button><Button variant="outlined">Outlined</Button><Button variant="text">Text</Button>
// Colors<Button variant="contained" color="primary">Primary</Button><Button variant="contained" color="secondary">Secondary</Button><Button variant="contained" color="error">Error</Button>
// With iconsimport { Add as AddIcon } from '@mui/icons-material';
<Button startIcon={<AddIcon />}>Add Item</Button>

// Variants<Button variant="contained">Contained</Button><Button variant="outlined">Outlined</Button><Button variant="text">Text</Button>
// Colors<Button variant="contained" color="primary">Primary</Button><Button variant="contained" color="secondary">Secondary</Button><Button variant="contained" color="error">Error</Button>
// With iconsimport { Add as AddIcon } from '@mui/icons-material';
<Button startIcon={<AddIcon />}>Add Item</Button>

Theme Integration

Using Theme Values

typescript

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,      }}    >      Themed box    </Box>  );}

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,      }}    >      Themed box    </Box>  );}

Theme in sx Prop

typescript

<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  }}>  Content</Box>
// Callback for advanced usage<Box  sx={(theme) => ({    color: theme.palette.primary.main,    '&:hover': {      color: theme.palette.primary.dark,    },  })}>  Hover me</Box>

<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  }}>  Content</Box>
// Callback for advanced usage<Box  sx={(theme) => ({    color: theme.palette.primary.main,    '&:hover': {      color: theme.palette.primary.dark,    },  })}>  Hover me</Box>

Responsive Design

Breakpoints

typescript

// 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%',     // 1536px+    },  }}>  Responsive width</Box>
// Responsive display<Box  sx={{    display: {      xs: 'none',    // Hidden on mobile      md: 'block',   // Visible on desktop    },  }}>  Desktop only</Box>

// 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%',     // 1536px+    },  }}>  Responsive width</Box>
// Responsive display<Box  sx={{    display: {      xs: 'none',    // Hidden on mobile      md: 'block',   // Visible on desktop    },  }}>  Desktop only</Box>

Responsive Typography

typescript

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

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

Forms

typescript

import { TextField, Stack, Button } from '@mui/material';
<Box component="form" onSubmit={handleSubmit}>  <Stack spacing={2}>    <TextField      label="Email"      type="email"      value={email}      onChange={(e) => setEmail(e.target.value)}      fullWidth      required      error={!!errors.email}      helperText={errors.email}    />    <Button type="submit" variant="contained">Submit</Button>  </Stack></Box>

import { TextField, Stack, Button } from '@mui/material';
<Box component="form" onSubmit={handleSubmit}>  <Stack spacing={2}>    <TextField      label="Email"      type="email"      value={email}      onChange={(e) => setEmail(e.target.value)}      fullWidth      required      error={!!errors.email}      helperText={errors.email}    />    <Button type="submit" variant="contained">Submit</Button>  </Stack></Box>

Common Patterns

Card Component

typescript

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    </Typography>  </CardContent>  <CardActions>    <Button size="small">Learn More</Button>  </CardActions></Card>

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    </Typography>  </CardContent>  <CardActions>    <Button size="small">Learn More</Button>  </CardActions></Card>

Dialog/Modal

typescript

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>    <Button onClick={handleClose}>Cancel</Button>    <Button onClick={handleConfirm} variant="contained">      Confirm    </Button>  </DialogActions></Dialog>

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>    <Button onClick={handleClose}>Cancel</Button>    <Button onClick={handleConfirm} variant="contained">      Confirm    </Button>  </DialogActions></Dialog>

Loading States

typescript

import { CircularProgress, Skeleton } from '@mui/material';
// Spinner<Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>  <CircularProgress /></Box>
// Skeleton<Stack spacing={1}>  <Skeleton variant="text" width="60%" />  <Skeleton variant="rectangular" height={200} />  <Skeleton variant="text" width="40%" /></Stack>

import { CircularProgress, Skeleton } from '@mui/material';
// Spinner<Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>  <CircularProgress /></Box>
// Skeleton<Stack spacing={1}>  <Skeleton variant="text" width="60%" />  <Skeleton variant="rectangular" height={200} />  <Skeleton variant="text" width="40%" /></Stack>

MUI-Specific Hooks

useMuiSnackbar

typescript

import { useMuiSnackbar } from '@/hooks/useMuiSnackbar';
function Component() {  const { showSuccess, showError, showInfo } = useMuiSnackbar();
  const handleSave = async () => {    try {      await saveData();      showSuccess('Saved successfully');    } catch (error) {      showError('Failed to save');    }  };
  return <Button onClick={handleSave}>Save</Button>;}

import { useMuiSnackbar } from '@/hooks/useMuiSnackbar';
function Component() {  const { showSuccess, showError, showInfo } = useMuiSnackbar();
  const handleSave = async () => {    try {      await saveData();      showSuccess('Saved successfully');    } catch (error) {      showError('Failed to save');    }  };
  return <Button onClick={handleSave}>Save</Button>;}

Icons

typescript

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 { 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>

Best Practices

1. Type Your sx Props

typescript

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

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

2. Use Theme Tokens

typescript

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

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

3. Consistent Spacing

typescript

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

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

Additional Resources

For more detailed patterns, see:

styling-guide.md [blocked] - Advanced styling patterns
component-library.md [blocked] - Component examples
theme-customization.md [blocked] - Theme setup

Source and attribution

Source:davila7/claude-code-templatesincli-tool/components/skills/development/muiat commit8da17d6

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Mui

MUI v7 Patterns

Purpose

When to Use This Skill

Quick Start

Basic MUI Component

Styling Patterns

Inline Styles (< 100 lines)

Separate Styles File (>= 100 lines)

Common Components

Layout Components

Grid System

Typography

Buttons

Theme Integration

Using Theme Values

Theme in sx Prop

Responsive Design

Breakpoints

Responsive Typography

Forms

Common Patterns

Card Component

Dialog/Modal

Loading States

MUI-Specific Hooks

useMuiSnackbar

Icons

Best Practices

1. Type Your sx Props

2. Use Theme Tokens

3. Consistent Spacing

Additional Resources

Source and attribution

More from davila7/claude-code-templates

React Best Practices

Web Performance Optimization

Find Bugs

Browser Automation

Code Review

Commit

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices