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

Safety Notice

Copy this and send it to your AI assistant to learn

Mantine UI

Quick setup (new or existing app)

Conventions

Framework notes

When in doubt

Source Transparency

Related Skills

lgpd-brasil

home-assistant

ollama

Todoist CLI Skill