@mantine/core 8.3.0 on Node.js NPM

View changelog with demos on mantine.dev website

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:

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:

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.

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
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.

@mantine/core 8.3.0 8.3.0 🔥 on Node.js NPM