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/core and @mantine/hooks
- Optional by feature: @mantine/form, @mantine/dates, @mantine/notifications, etc. (see reference.md)

PostCSS (required for Mantine styles)

Install: postcss, postcss-preset-mantine, postcss-simple-vars (as devDependencies)
Add postcss.config.cjs at 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',
      },
    },
  },
};

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 ColorSchemeScript in <head> and spread mantineHtmlProps on <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/form with 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.

mantine-ui

Mantine UI

Quick setup (new or existing app)

Conventions

Framework notes

When in doubt