8.3.0

mantinedev/mantine8.3.0Sep 8, 2025by rtivital

AI Summary

Major release introducing MiniCalendar, vertical Progress, Heatmap splitMonths, and Tiptap 3 support.

Key Highlights

New MiniCalendar component for dates
Progress now supports vertical orientation
Heatmap supports `splitMonths` prop
Tiptap 3 support with migration guide

New Features

MiniCalendar component
Vertical Progress orientation
Heatmap splitMonths
clearSearchOnChange prop
reverseTimeControlsList prop
llms.txt support

Full Release Notes

[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/8-3-0)

## MiniCalendar component

New [MiniCalendar](https://mantine.dev/dates/mini-calendar) component:

```tsx
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](https://mantine.dev/core/progress) now supports vertical orientation:

```tsx
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](https://mantine.dev/charts/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.

```tsx
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](https://mantine.dev/core/select), [MultiSelect](https://mantine.dev/core/multi-select), and other components with
`clearable` prop now allow displaying the clear button next to the right section:

```tsx
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](https://mantine.dev/x/tiptap) now supports [Tiptap 3](https://tiptap.dev/docs). 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](https://mantine.dev/guides/tiptap-3-migration).

## LLMs.txt

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](https://mantine.dev/llms.txt)
and further documentation [here](https://mantine.dev/guides/llms).

## Other changes

- [MultiSelect](https://mantine.dev/core/multi-select) now supports `clearSearchOnChange` prop to clear search input when an item is selected.
- [Reordering list items example](https://mantine.dev/form/recipes/#list-items-reordering) now uses [dnd-kit](https://dndkit.com/) instead of `@hello-pangea/dnd`
- [TimePicker](https://mantine.dev/dates/time-picker) 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](https://mantine.dev/styles/rtl) now automatically subscribes to the `dir` attribute mutations of the root element (usually `<html />`)  and updates internal state automatically.
- [Select](https://mantine.dev/core/select) and [MultiSelect](https://mantine.dev/core/multi-select) now retain references to selected options that are no longer present in `data` prop.
- Active color swatch now has check icon in [ColorPicker](https://mantine.dev/core/color-picker) and [ColorInput](https://mantine.dev/core/color-input) components.