frontend-style-guide

Upgrading React components from Mantine v6 to v8 involves applying v8-compliant styling rules, migrating excess inline props to CSS modules, and updating theme token usage in TSX files to ensure consistency.

You should use CSS modules instead of inline props in React components when inline props exceed a small threshold, as this approach enforces Mantine-ready styling, prevents styling drift, and maintains cleaner TSX component structures.

You enforce consistent Mantine styling across TSX files by applying frontend style guide rules that mandate the use of theme tokens and CSS modules, ensuring adherence to Mantine v8 standards and reducing styling drift during edits and migrations.

The best way to apply theme tokens in Mantine v8 is by adhering to a frontend style guide that enforces token usage within TSX components, ensuring UI theme consistency and reducing styling drift across the React application.

This frontend style guide specifically targets Mantine v8-ready styling for React components, so it is not designed for React projects using other UI frameworks, as its rules enforce Mantine-specific theme tokens and CSS module patterns.