ericbsantana Mantine UI
React-only component library (120+ components, 70+ hooks). Use for forms, overlays, dates, charts, notifications, and theming. Docs: mantine.dev. Pre-built examples: ui.mantine.dev.
Quick setup (new or existing app)
Install core packages
- Required:
@mantine/coreand@mantine/hooks - Optional by feature:
@mantine/form,@mantine/dates,@mantine/notifications, etc. (see reference.md)
- Required:
PostCSS (required for Mantine styles)
- Install:
postcss,postcss-preset-mantine,postcss-simple-vars(as devDependencies) - Add
postcss.config.cjsat project root:
module.exports = { plugins: { 'postcss-preset-mantine': {}, 'postcss-simple-vars': { variables: { 'mantine-breakpoint-xs': '36em', 'mantine-breakpoint-sm': '48em', 'mantine-breakpoint-md': '62em', 'mantine-breakpoint-lg': '75em', 'mantine-breakpoint-xl': '88em', }, }, }, };- Install:
Import styles once (e.g. in
_app.tsx,main.tsx, or root layout)import '@mantine/core/styles.css'; // Add per-package only if used: '@mantine/dates/styles.css', etc.Wrap app with MantineProvider
import { createTheme, MantineProvider } from '@mantine/core'; const theme = createTheme({ /* optional overrides */ }); export default function App() { return ( <MantineProvider theme={theme}> {/* app */} </MantineProvider> ); }SSR (Next.js app router, etc.) – avoid hydration flash: add
ColorSchemeScriptin<head>and spreadmantineHtmlPropson<html>:import { ColorSchemeScript, mantineHtmlProps } from '@mantine/core'; <html lang="en" {...mantineHtmlProps}> <head> <ColorSchemeScript /> {/* ... */} </head> <body>...</body> </html>
Conventions
- Single MantineProvider at the root; do not nest another MantineProvider unless intentionally overriding theme.
- Component styling: Prefer theme/settings (e.g.
createTheme, component props). Use Styles API for targeting internal parts; use responsive styles for breakpoints. - Polymorphic components: Many components accept a root element via props (e.g.
component,renderRoot) – see Polymorphic components. - Forms: Use
@mantine/formwith Mantine inputs for validation and state; see Form documentation. - Extra packages: Install only the packages you use; each may need its own CSS import (e.g.
@mantine/dates/styles.css).
Framework notes
- Next.js: Prefer the Next.js guide (app or pages router). Use templates from getting started when starting from scratch.
- Vite: See Vite guide. Do not use Create React App for new projects; Mantine recommends Vite or Next.js.
When in doubt
- Check the component’s page on mantine.dev (e.g. Button, TextInput, Modal).
- For full examples and copy-paste snippets: ui.mantine.dev.
- For package list and CSS imports: reference.md.