mantinedev/mantine
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·August 1, 2026
More findings
Verdict
Solid app-shell discipline undercut by three infrastructure shortcuts hiding in plain sight. The any-cast on emotionCache is the scariest one, it silently disables type safety exactly where SSR styles could break.
Files Rams reviewed
apps/help.mantine.dev/src/components/MdxLayout/MdxLayout.tsx
apps/mantine.dev/src/components/HomePage/HomePage.tsx
apps/help.mantine.dev/src/pages/_app.tsx
apps/mantine.dev/src/components/MdxLayout/MdxLayout.tsx
apps/mantine.dev/src/components/MdxPage/MdxPage.tsx
apps/mantine.dev/src/pages/_app.tsx
apps/mantine.dev/src/pages/_document.tsx
apps/help.mantine.dev/src/components/MdxElements/MdxElements.tsx
apps/help.mantine.dev/src/components/MdxElements/MdxInfo/MdxInfo.module.css
apps/help.mantine.dev/src/components/MdxElements/MdxNpmScript/MdxNpmScript.tsx
apps/help.mantine.dev/src/components/MdxLayout/TableOfContents/TableOfContents.module.css
apps/help.mantine.dev/src/components/MdxLayout/TableOfContents/TableOfContents.tsx
apps/help.mantine.dev/src/components/QuestionsList/QuestionsList.tsx
apps/help.mantine.dev/src/components/QuestionsList/QuestionsListGroup/QuestionsListGroup.tsx
apps/help.mantine.dev/src/components/QuestionsList/QuestionsListHeader/QuestionsListHeader.tsx
apps/help.mantine.dev/src/components/Shell/Shell.tsx
apps/help.mantine.dev/src/components/SocialCards/SocialCards.module.css
apps/help.mantine.dev/src/components/SocialCards/SocialCards.tsx
apps/help.mantine.dev/src/pages/index.tsx
apps/mantine.dev/src/components/Banner/Banner.module.css
apps/mantine.dev/src/components/Banner/Banner.tsx
apps/mantine.dev/src/components/ColorsGenerator/ColorsGenerator.tsx
apps/mantine.dev/src/components/ColorsGenerator/ColorsInput/ColorsInput.tsx
apps/mantine.dev/src/components/ColorsGenerator/ColorsList/ColorsList.module.css
apps/mantine.dev/src/components/ColorsGenerator/ColorsList/ColorsList.tsx
apps/mantine.dev/src/components/ColorsGenerator/ColorsOutput/ColorsOutput.tsx
apps/mantine.dev/src/components/ColorsGenerator/ComponentsPreview/ComponentsPreview.tsx
apps/mantine.dev/src/components/CssFilesList/CssFilesList.tsx
apps/mantine.dev/src/components/CssVariablesGroup/CssVariablesGroup.tsx
apps/mantine.dev/src/components/CssVariablesList/CssVariablesList.tsx
Accessibility
apps/mantine.dev/src/pages/_app.tsx:69
Viewport meta tag disables pinch-to-zoom site-wide
The viewport meta tag in _app.tsx sets user-scalable=no alongside minimum-scale=1, initial-scale=1. This applies to every page in the app, not just one component.
Why it matters
Low-vision users who rely on pinch-to-zoom to read body copy or code samples lose that ability everywhere on the site, which is a hard lockout rather than a minor friction point.
Fix
Remove user-scalable=no and any maximum-scale restriction so browsers can honor native pinch-to-zoom.
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
/><meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width"
/>Typography
apps/mantine.dev/src/pages/_document.tsx:11
Outfit font loads from Google CDN instead of self-hosted files
The Document head links to https://fonts.googleapis.com/css2?family=Outfit for the Outfit typeface, backed by preconnect hints to fonts.googleapis.com and fonts.gstatic.com.
Why it matters
Every page load depends on a third-party DNS lookup, connection, and stylesheet fetch before the intended font paints, adding latency that self-hosting removes entirely.
Fix
Self-host the Outfit font files via next/font/google or a local woff2 and drop the external stylesheet link and its preconnects.
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link
href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
rel="stylesheet"
/>import { Outfit } from 'next/font/google';
const outfit = Outfit({ subsets: ['latin'], weight: ['100','200','300','400','500','600','700','800','900'] });
// apply outfit.className to <Html> or <body> instead of the external <link> tagsGet this score on every PR.
Rams reviews each pull request on your repo and posts inline one-click fixes — about a minute per review.
Install Rams freeCraft
apps/mantine.dev/src/pages/_document.tsx:27
emotionCache cast to any hides SSR style extraction type errors
createEmotionServer(emotionCache as any) casts emotionCache away from its real type before passing it into createEmotionServer.
Why it matters
A future refactor of the emotion cache type won't surface a compile error here, so a broken SSR style extraction ships silently and shows up as flashing unstyled content in production.
Fix
Remove the any cast and align emotionCache's exported type with what createEmotionServer expects, or add a narrow typed wrapper instead of a blanket cast.
const stylesServer = createEmotionServer(emotionCache as any);const stylesServer = createEmotionServer(emotionCache);Color
Spacing
Components
Motion
UX
Working well
- DirectionProvider and MantineEmotionProvider are composed once at the root in _app.tsx rather than scattered per-page, keeping RTL and styling concerns in one place and easier to reason about as the app grows.
- MdxLink reuses the shared Anchor component and the .link class instead of a bespoke anchor tag, so hover states and focus styling stay consistent with the rest of the design system automatically.
- ColorSchemeScript is set with defaultColorScheme="light" in _document.tsx, which prevents the flash-of-wrong-theme problem on first paint, a common miss in apps that toggle themes client-side.
Scored August 1, 2026 with Rams Engine v0.0.3 · Engine changelog
First scored July 14, 2026: 98/100. This rescore on v0.0.3: 94/100.
This page is an automated design review of mantinedev/mantine’s UI code: 30 files read against 291 versioned rules covering accessibility, color, typography, spacing, components, UX, motion, and craft. The score is out of 100; confirmed criticals cap it — one at 59, two at 49, three or more at 39.
More design scores
Score your own repo.
Free on public repos, no account. The same engine that scored this page reads your UI code and mints a score page like this one.
Public repos only. The full engine reviews the UI code and mints a public score page — we email you the link too. Already-scored repos open instantly.
