Mantine v7 Component Patterns

Quick Guide: Mantine v7 is a full-featured React component library using CSS Modules (not CSS-in-JS). Wrap your app in MantineProvider with a createTheme object. Style with CSS Modules + PostCSS preset mixins, the Styles API (classNames/styles props), or style props (p, m, bg, etc.). Use @mantine/form for form management, @mantine/hooks for utility hooks, and @mantine/notifications for toasts. PostCSS preset with postcss-preset-mantine is required for responsive mixins and light-dark().

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST wrap your app in MantineProvider and import @mantine/core/styles.css at the root)

(You MUST install and configure postcss-preset-mantine for CSS Modules mixins and responsive utilities)

(You MUST use CSS Modules (.module.css) for custom component styles - createStyles was removed in v7)

(You MUST provide 10-shade color tuples when adding custom colors to the theme)