# MUI Component Library
## Layout Components
### Box
The fundamental building block:
```typescript
Section Title
Content goes here
```
### Container
Centers content with max-width:
```typescript
{/* Content automatically centered and constrained */}
```
### Grid (v2)
Responsive grid layout:
```typescript
import Grid from '@mui/material/Grid2';
Item 1
Item 2
Item 3
```
### Stack
One-dimensional layout with spacing:
```typescript
{user.name}
```
## Data Display
### Typography
Text with theme variants:
```typescript
Main Heading
Body text with secondary color
Bold caption
```
### Card
Content container:
```typescript
Card Title
Card description text
```
### List
Structured content lists:
```typescript
```
### Table
Data tables:
```typescript
Name
Email
Actions
{rows.map((row) => (
{row.name}
{row.email}
))}
```
## Input Components
### TextField
Text input with validation:
```typescript
setEmail(e.target.value)}
error={!!emailError}
helperText={emailError}
fullWidth
required
/>
```
### Select
Dropdown selection:
```typescript
Country
setCountry(e.target.value)}
label="Country"
>
United States
United Kingdom
Canada
```
### Checkbox & Switch
Boolean inputs:
```typescript
<FormControlLabel
control={}
label="I agree to the terms"
/>
<FormControlLabel
control={}
label="Enable notifications"
/>
```
### Radio Group
Single selection:
```typescript
Payment Method
setPayment(e.target.value)}>
<FormControlLabel value="card" control={} label="Credit Card" />
<FormControlLabel value="paypal" control={} label="PayPal" />
<FormControlLabel value="crypto" control={} label="Cryptocurrency" />
```
### Autocomplete
Searchable select:
```typescript
option.label}
value={value}
onChange={(event, newValue) => setValue(newValue)}
renderInput={(params) => (
)}
/>
```
## Buttons
### Button Variants
```typescript
```
### Button with Icons
```typescript
<Button
variant="contained"
startIcon={}
onClick={handleSave}
>
Save Changes
```
## Feedback Components
### Alert
Status messages:
```typescript
Operation completed successfully!
<Alert severity="error" icon={}>
An error occurred. Please try again.
```
### Snackbar
Toast notifications:
```typescript
Changes saved!
```
### Dialog
Modal dialogs:
```typescript
```
### CircularProgress & LinearProgress
Loading indicators:
```typescript
```
### Skeleton
Content placeholders:
```typescript
```
## Navigation
### AppBar & Toolbar
Application header:
```typescript
App Title
```
### Drawer
Side navigation:
```typescript
navigate('/dashboard')}>
navigate('/settings')}>
```
### Tabs
Tabbed navigation:
```typescript
Overview content
```
### Breadcrumbs
Navigation trail:
```typescript
Home
Products
Electronics
```
## Utility Components
### Tooltip
Helpful hints:
```typescript
```
### Popover
Floating content:
```typescript
Popover content
```
### Menu
Context menus:
```typescript
```
### Chip
Compact information:
```typescript
<Chip
label="Admin"
onDelete={handleDelete}
deleteIcon={}
/>
```
### Badge
Notification indicators:
```typescript
```
### Avatar
User images:
```typescript
JD
```
## Form Example
Complete form with validation:
```typescript
Role
setRole(e.target.value)}>
User
Admin
<FormControlLabel
control={ setAgreed(e.target.checked)} />}
label="I agree to the terms and conditions"
/>
```
Source: claude-code-templates (MIT). See About Us for full credits.