Version v8.3.0

Release date

September 8th, 2025

Source code

Support Mantine development

You can now sponsor Mantine development with OpenCollective. All funds are used to improve Mantine and create new features and components.

Sponsor Mantine

MiniCalendar component

New MiniCalendar component:

import { useState } from 'react';
import { MiniCalendar } from '@mantine/dates';

function Demo() {
  const [value, onChange] = useState<string | null>('2025-04-15');
  return <MiniCalendar value={value} onChange={onChange} numberOfDays={6} />;
}

Progress vertical orientation

Progress now supports vertical orientation:

Documents

Apps

Other

import { Progress } from '@mantine/core';

function Demo() {
  return (
    <Group>
      <Progress value={80} orientation="vertical" h={200} />
      <Progress value={60} color="orange" size="xl" orientation="vertical" h={200} animated />

      <Progress.Root size="xl" autoContrast orientation="vertical" h={200}>
        <Progress.Section value={40} color="lime.4">
          <Progress.Label>Documents</Progress.Label>
        </Progress.Section>
        <Progress.Section value={20} color="yellow.4">
          <Progress.Label>Apps</Progress.Label>
        </Progress.Section>
        <Progress.Section value={20} color="cyan.7">
          <Progress.Label>Other</Progress.Label>
        </Progress.Section>
      </Progress.Root>
    </Group>
  );
}

Heatmap splitMonths

Heatmap now supports splitMonths prop to visually separate months with a spacer column and render only days that belong to each month in its columns.

import { Heatmap } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <Heatmap
      data={data}
      startDate="2024-02-16"
      endDate="2025-02-16"
      withMonthLabels
      splitMonths
    />
  );
}

Improved clearable prop handling

Select, MultiSelect, and other components with clearable prop now allow displaying the clear button next to the right section:

Your favorite library

import { Select } from '@mantine/core';

function Demo() {
  return (
    <Select
      label="Your favorite library"
      placeholder="Pick value"
      data={['React', 'Angular', 'Vue', 'Svelte']}
      defaultValue="React"
      clearable
    />
  );
}

Tiptap 3 support

@mantine/tiptap now supports Tiptap 3. It is recommended to update all @tiptap/* packages to version 3.2.0 or later.

Your application might require some modifications related to Tiptap 3. If you want to update your application to TipTap 3, follow migration guide.

You can now use LLMs.txt file with Cursor and other IDEs. The file is automatically updated with each release and includes every demo and documentation page from mantine.dev. It is about 1.8mb. You can find the latest version of LLMs.txt here and further documentation here.

Other changes

MultiSelect now supports clearSearchOnChange prop to clear search input when an item is selected.
Reordering list items example now uses dnd-kit instead of @hello-pangea/dnd
TimePicker now supports reverseTimeControlsList prop to reverse the order of time controls in the dropdown. Use this option if you want the order of controls to match keyboard controls (up and down arrow) direction.
DirectionProvider now automatically subscribes to the dir attribute mutations of the root element (usually <html />) and updates internal state automatically.
Select and MultiSelect now retain references to selected options that are no longer present in data prop.
Active color swatch now has check icon in ColorPicker and ColorInput components.

LLMs.txt

Version v8.2.0