mui-patterns

# Material-UI Patterns Skill

Patterns for using Material-UI (MUI) components effectively.

## Setup

### Installation

```bash
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material  # Optional: icons
```

### Basic Configuration

```tsx
// App.tsx
import { ThemeProvider, createTheme, CssBaseline } from '@mui/material'

const theme = createTheme()

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {/* Your app */}
    </ThemeProvider>
  )
}
```

## Core Components

### Buttons

```tsx
import { Button, IconButton, ButtonGroup } from '@mui/material'
import { Add, Delete, Edit } from '@mui/icons-material'

// Button variants
<Button variant="contained">Primary</Button>
<Button variant="outlined">Secondary</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>
<Button variant="contained" color="success">Success</Button>

// Sizes
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>

// With icons
<Button startIcon={<Add />}>Add Item</Button>
<Button endIcon={<Delete />}>Delete</Button>

// Icon buttons
<IconButton color="primary">
  <Edit />
</IconButton>

// Button group
<ButtonGroup variant="contained">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
```

### Typography

```tsx
import { Typography } from '@mui/material'

<Typography variant="h1">Heading 1</Typography>
<Typography variant="h2">Heading 2</Typography>
<Typography variant="h3">Heading 3</Typography>
<Typography variant="h4">Heading 4</Typography>
<Typography variant="h5">Heading 5</Typography>
<Typography variant="h6">Heading 6</Typography>
<Typography variant="subtitle1">Subtitle 1</Typography>
<Typography variant="subtitle2">Subtitle 2</Typography>
<Typog