Mantine v7 Component Patterns

Quick Guide: Mantine is a batteries-included React component library whose v7 rewrite replaced Emotion with CSS Modules, so there is no CSS-in-JS runtime. Wrap the app in MantineProvider with a createTheme object, install postcss-preset-mantine for the mixins and light-dark(), and style through one of four routes: style props for one-offs, the Styles API (classNames / styles) for inner elements, CSS Modules for custom components, and theme.components for app-wide defaults. @mantine/form, @mantine/hooks, @mantine/notifications and @mantine/dates are separate packages, each with its own stylesheet.

Detailed Resources:

• examples/core.md — provider and PostCSS setup, SSR, CSS Modules, Styles API, style props, AppShell, loading states
• examples/components.md — Modal, Drawer, Menu, Tabs, Accordion, notifications, dates
• examples/theming.md — custom colours, virtualColor, component defaults, auto-contrast, theme merging
• examples/forms.md — useForm validation, cross-field rules, nested fields, dynamic lists, schema resolvers
• reference.md — component selection tree, style-prop and mixin tables, Styles API selectors, package list, anti-patterns