# Materialui

> Material UI React component library. Use for React UI. Use when this capability is needed.

- Skill: `tomevault-io/materialui` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/materialui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/materialui/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/materialui

---


# Material UI (MUI)

MUI Core (v6) is the gold standard for React UI. v6 introduces **Pigment CSS** (Zero-runtime CSS-in-JS) for compatibility with React Server Components (Next.js App Router).

## When to Use

- **Enterprise**: Consistent, rigorous design system.
- **Complex Data**: `MUI X` (DataGrid) is the most powerful table library for React.
- **Accessibility**: First-class a11y support.

## Core Concepts

### The `sx` prop

Superset of CSS. `sx={{ mt: 2, color: 'primary.main' }}`.

### Theme Provider

Global design tokens (`palette`, `typography`, `breakpoints`).

### Slots / SlotProps

Deep customization of internal sub-components.

## Best Practices (2025)

**Do**:

- **Use Pigment CSS**: For RSC compatibility.
- **Use `Box`**: Instead of `div` for layout.
- **Use `MUI X`**: For Data Grids and Date Pickers.

**Don't**:

- **Don't use `makeStyles`**: It is deprecated. Use `styled()` or `sx`.

## References

- [Material UI Documentation](https://mui.com/)

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/g1joshi) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-15 -->