MUI (Material-UI) References
Detailed guides for components, theming, customization, data display, and forms
Overview
This directory contains detailed guides for Material-UI component usage and customization. Main SKILL.md provides critical patterns and decision tree. These references offer deep-dives into component patterns, theme configuration, styling strategies, data display, and form handling.
Quick Navigation
Core Concepts
| Reference File | Topics Covered | When to Read |
|---|---|---|
| components.md | Button, TextField, Typography, layout components | Using MUI components with proper variants and props |
| theming.md | createTheme, ThemeProvider, palette, typography, breakpoints | Setting up design system and theme customization |
| customization.md | sx prop, styled API, component variants, overrides | Customizing component styles and creating reusable patterns |
| data-display.md | Table, DataGrid, List, Card patterns | Displaying collections, tables, and structured data |
| forms.md | Form handling, validation, TextField patterns, Autocomplete | Building forms with MUI components and validation |
| mui-x-charts.md | LineChart, BarChart, PieChart, ScatterChart, accessibility | Data visualization with MUI X Charts (when charts required) |
Reading Strategy
For New Projects (Setup)
- Read main SKILL.md
- MUST read: theming.md for ThemeProvider and design system setup
- MUST read: components.md for basic component usage
- CHECK: customization.md for styling patterns
For Existing Projects (Adding Features)
- Adding forms? → Read forms.md
- Displaying data tables? → Read data-display.md
- Customizing components? → Read customization.md
- Changing theme? → Read theming.md
For Advanced Customization
- Custom variants? → Read customization.md for component overrides
- Dark mode? → Read theming.md for theme toggling
- Responsive layout? → Read components.md for Grid and Container
File Descriptions
components.md
Core MUI component usage patterns
- Button variants and states
- TextField types and validation
- Typography hierarchy
- Layout components (Box, Container, Grid, Stack)
- Navigation (AppBar, Drawer, Tabs)
- Feedback (Alert, Snackbar, Dialog)
theming.md
Theme configuration and customization
- createTheme and ThemeProvider setup
- Palette (primary, secondary, error, custom colors)
- Typography (font families, sizes, weights)
- Spacing and breakpoints
- Dark mode implementation
- Component default props
customization.md
Styling and component customization
- sx prop patterns
- styled API for reusable components
- Component variants (theme.components)
- Global overrides
- Responsive styling
- Performance considerations
data-display.md
Displaying collections and structured data
- Table with sorting and pagination
- DataGrid (MUI X) patterns
- List and ListItem patterns
- Card layouts
- Accordion and expansion panels
- Chip arrays
forms.md
Form handling with MUI components
- TextField validation patterns
- Select and Autocomplete
- Checkbox, Radio, Switch
- Form layout with Grid
- Integration with Formik/React Hook Form
- Error handling and feedback
mui-x-charts.md
Data visualization with MUI X Charts (use only when task requires charts)
- Context verification before using charts
- Accessible charts with axis labels and legends
- Responsive container sizing
- Chart type selection (Line, Bar, Pie, Scatter)
Common Patterns Summary
- Simple component: Use MUI component with default variant
- Theme customization: Configure in createTheme(), apply via ThemeProvider
- One-off styling: Use sx prop with theme values
- Reusable styled component: Use styled() API
- Forms: Combine TextField, validation, and layout components
- Data tables: Use Table or DataGrid (MUI X) with proper accessibility
Cross-Reference Map
- components.md → Extends SKILL.md’s component usage patterns; pairs with theming.md for themed usage
- theming.md → Extends SKILL.md’s theme configuration patterns; foundational for all other references
- customization.md → Extends SKILL.md’s styling patterns; builds on theming.md’s foundation
- data-display.md → Extends SKILL.md’s data display patterns; pairs with forms.md for data-entry/display workflows
- forms.md → Extends SKILL.md’s form patterns; pairs with form-validation for schema validation
- mui-x-charts.md → Extends SKILL.md with data visualization; used alongside data-display.md for data-heavy UIs
- Related skills: react, form-validation, interface-design, typescript