Mantine UI Library

Mantine is a fully-featured React components library with TypeScript support. It provides 100+ hooks and components with native dark mode, CSS-in-JS via CSS modules, and excellent accessibility.

v9.7 Highlights

• New components: Tour (step-by-step onboarding with a spotlight overlay, guided and beacon modes), Toolbar (roving-tabindex container with toggle groups and dividers), Toggle (button with active/onActiveChange state), and JsonViewer (@mantine/code-highlight: expandable JSON tree with type indicators and copy buttons).
• @mantine/schedule: DayView/WeekView gain slotLabelInterval (time labels more often than once per hour, must be a multiple of intervalMinutes); businessHours accepts HH:mm times and, in WeekView, a per-day record; business-hour colors are customizable with --day-view-business-hours-bg / --week-view-business-hours-bg; MobileMonthView gains withWeekendDays.
• @mantine/schedule: DayView/WeekView gain eventOverlapMode ('columns' or 'cascade') and drop validation (preventEventOverlap, canDropEvent, canResizeEventTo, canDropExternalEvent, onEventPlacementRejected).
• @mantine/core: ScrollArea gains the --scrollarea-offset-size CSS variable (offset gap independent of scrollbarSize); Tooltip gains hideDetached; TreeSelect gains renderPill; Notifications gains withAutoCloseProgress; Checkbox and Radio gain variant="light".
• @mantine/core fixes: Radio, Chip and Switch readOnly now prevents value changes; the Select onChange option argument is typed as nullable; Cascader mirrors ArrowLeft/ArrowRight in RTL; searchable inputs accept typing when rendered in another window or an iframe.
• @mantine/hooks fixes: use-scroller no longer ignores the click after a drag that ended outside the container; use-event-listener keeps the listener when the options object is passed inline; use-throttled-callback handles reentrant calls; use-focus-trap traps focus with macOS Full Keyboard Access off.
• @mantine/charts fixes the rendering of the right Y axis children; @mantine/tiptap RichTextEditor supports image upload through getUploadImageExtension.

v9.6 Highlights

• New @mantine/lightbox package: full-screen media lightbox with carousel navigation, zoom, thumbnails, video and custom slides, and a store-based API (mount once, open from anywhere, same pattern as Spotlight and Notifications).
• New ActionBar component: a floating selection-action bar that hosts bulk actions for selected items (for example, selected table rows).
• @mantine/charts adds GaugeChart, WaffleChart, MatrixChart, and CandlestickChart; area/bar/line/composite/scatter charts gain referenceAreas and referenceDots; AreaChart gains type="stream"; ScatterChart gains a right Y axis.
• @mantine/tiptap RichTextEditor gains table controls, a collapsible Details control, and an InvisibleCharacters formatting-marks control (register the matching Tiptap extensions); Typography now styles details/summary elements.
• Notifications gains renderNotification to replace the default notification with fully custom content while keeping enter/exit/drag-dismiss animations.
• @mantine/schedule: ResourcesMonthView supports event resizing, time-grid views support configurable drag/resize snap intervals, background events can be interactive, and YearView gains renderDay and withWeekendDays.
• Dropzone upgrades to react-dropzone 20 (partial-accept maxFiles behavior, stricter FileWithPath). Node.js 22 or later is now required (Node 20 reached end of life in April 2026).

v9.5 Highlights

• New Cascader component: select a value from hierarchical data by drilling down through cascading columns, with changeOnSelect, hover-to-expand, search, and a flat-list layout for mobile.
• @mantine/charts gains SunburstChart (hierarchical data as concentric rings) and BulletChart (a value against a target and qualitative ranges); the area/bar/line/composite charts add withBrush for a draggable range-selector, and every chart component now ships accessibilityLayer (arrow-key navigation, Enter for tooltips) enabled by default.
• Calendar-based date components gain withNativeLevelSelect, replacing the calendar header's level button with native <select> elements, paired with yearsSelectRange.
• Timeline.Item gains opposite (content on the other side of the line, switching to a centered two-sided layout) and alternate (flips sides per item); FloatingWindow gains a ResizeHandle compound component with a dimensions prop and keyboard resizing; Modal/Drawer gain keepMountedMode ('activity' or 'display-none'); Accordion gains disableCollapse to keep one item always open.
• @mantine/schedule ResourcesDayView/ResourcesWeekView accept intervalMinutes greater than 60 for multi-hour slot columns.
• 9.5.0 fixes an autoClose timer leak in the notifications container.
• The official Vite template replaced ESLint/Prettier/eslint-config-mantine with oxlint/oxfmt via the new oxc-config-mantine package (internal tooling migration); eslint-config-mantine remains available for projects that keep ESLint.

v9.4 Highlights

• New components: ComboboxPopover (low-level popover built on the Combobox engine), DataList (key/value description lists), EmptyState (empty/placeholder screens), and Menubar (desktop-style application menu bar).
• @mantine/schedule gains ResourcesDayView and ResourcesWeekView for resource-grouped scheduling layouts.
• 9.4.1 patch fixes: @mantine/form compatibility with the React compiler, Heatmap rendering, and assorted component fixes.

v9.3 Highlights

• New Splitter component (with use-splitter hook): declarative resizable split-pane layout with horizontal/vertical orientation, collapsible panes, and keyboard navigation. Splitter.Pane must be a direct child of Splitter.
• New component props: Pagination gains layout="responsive" (CSS container queries), Text/Blockquote gain textWrap, CodeHighlight gains withLineNumbers, OverflowList gains collapseFrom ("start"/"end"), Textarea gains bottomSection (character counters), and the Combobox family (Select, MultiSelect, Autocomplete, TagsInput) supports floatingHeight="viewport".
• DateInput gains presets for quick value selection; Menu.Sub supports controlled open state.
• 9.3.1 patch fixes: notification DOM cleanup on close, Collapse keepMounted, SegmentedControl indicator radius, PinInput placeholder centering, Tree arrow-key navigation skipping hidden nodes, MaskInput with uncontrolled use-form, and stable use-id under an Activity wrapper.

v9.2.2 Highlights

• Accessibility fixes landed across selection controls and sliders: Checkbox, Radio, and Switch now wire error ids into aria-describedby, while Slider and RangeSlider support aria-valuetext.
• Overlay/input behavior was refined with submenu safe polygon support, duplicate modal-id fixes, PinInput keyboard fixes, and ScrollArea/TreeSelect interaction fixes.
• Patch fixes in 9.2.2 cover Pill overflow, Input sections under local dir overrides, Select clear buttons for falsy primitive values, Modal/Drawer/Spotlight attribute types, and safer Menu.Sub safe-area polygon option forwarding.
• @mantine/hooks use-mask now preserves undo and cursor position across paste/cut flows, and @mantine/tiptap controls avoid errors after the editor is destroyed or not initialized.
• Forms and theming were hardened: @mantine/form handlers are more stable, default validators no longer force async results unexpectedly, and mergeMantineTheme no longer mutates DEFAULT_THEME.headings.
• @mantine/schedule continues to mature with better multi-day overlap rendering and corrected positioning for intervalMinutes={60}.

v9.0 Breaking Changes

• React 19.2+ required for all @mantine/* packages
• Tiptap 3+ required for @mantine/tiptap
• Recharts 3+ required for @mantine/charts (no migration needed)
• Follow the official 8.x → 9.x migration guide for full details

Focus

This skill focuses on:

• Vite + TypeScript setup (not Next.js or CRA)
• CSS modules with PostCSS preset
• Vitest for testing
• Oxlint/Oxfmt (oxc-config-mantine) for linting and formatting, matching the current official Vite template; ESLint (eslint-config-mantine) remains a supported alternative

Installation

See references/getting-started.md for Vite template setup, manual installation, and optional packages.

PostCSS Configuration

Create postcss.config.cjs:

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",
      },
    },
  },
};

App Setup

// src/App.tsx
import "@mantine/core/styles.css";
// Other style imports as needed:
// import '@mantine/dates/styles.css';
// import '@mantine/notifications/styles.css';

import { MantineProvider, createTheme } from "@mantine/core";

const theme = createTheme({
  // Theme customization here
});

function App() {
  return <MantineProvider theme={theme}>{/* Your app */}</MantineProvider>;
}

Critical Prohibitions

• Do NOT skip MantineProvider wrapper — all components require it
• Do NOT forget to import @mantine/core/styles.css — components won't style without it
• Do NOT mix Mantine with other UI libraries (e.g., Chakra, MUI) in same project
• Do NOT use inline styles for theme values — use CSS variables or theme object
• Do NOT skip PostCSS setup — responsive mixins won't work
• Do NOT forget key={form.key('path')} when using uncontrolled forms

Core Concepts

1. MantineProvider

Wraps your app, provides theme context and color scheme management.

2. Theme Object

Customize colors, typography, spacing, component default props.

3. Style Props

All components accept style props like mt, p, c, bg, etc.

4. CSS Variables

All theme values exposed as CSS variables (e.g., --mantine-color-blue-6).

5. Polymorphic Components

Many components support component prop to render as different elements.

Definition of Done

• MantineProvider wraps the app
• Styles imported (@mantine/core/styles.css)
• PostCSS configured with mantine-preset
• Theme customization in createTheme
• Color scheme (light/dark) handled
• TypeScript types working
• Tests pass with Vitest + custom render

References (Detailed Guides)

Setup & Configuration

• getting-started.md — Installation, Vite setup, project structure
• styling.md — MantineProvider, theme, CSS modules, style props, dark mode

Core Features

• components.md — Core UI components patterns
• hooks.md — @mantine/hooks utility hooks
• forms.md — @mantine/form, useForm, validation
• schedule.md — @mantine/schedule calendar scheduling

Development

• testing.md — Vitest setup, custom render, mocking
• eslint.md — Oxlint/Oxfmt (oxc-config-mantine) setup, plus legacy eslint-config-mantine option

Links

• Documentation
• Releases
• GitHub
• npm
• Vite template
• LLM docs