• Fix binfile import accepting library relations outside the package and self-relations #12895 (PR: #12862)

View changelog with demos on mantine.dev website

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

New @mantine/emoji package provides emoji picker components. It works with any emoji data source through adapters, emoji-mart and emojibase-data adapters are included.

EmojiPicker displays a searchable emoji grid with category navigation, skin tone selector, and emoji preview.

import data from '@emoji-mart/data';
import { emojiMartAdapter, EmojiPicker } from '@mantine/emoji';

const emojiData = emojiMartAdapter(data);

function Demo() {
  return (
    <EmojiPicker
      data={emojiData}
      onEmojiSelect={(emoji) => console.log(emoji)}
    />
  );
}

EmojiPickerInput is an input with an emoji picker dropdown. It supports all standard input features like labels, descriptions, error messages, and sizes.

import data from '@emoji-mart/data';
import { emojiMartAdapter, EmojiPickerInput } from '@mantine/emoji';

const emojiData = emojiMartAdapter(data);

function Demo() {
  return <EmojiPickerInput data={emojiData} variant="default" size="sm" radius="md" label="Input label" withAsterisk={false} description="Input description" error="" placeholder="Select emoji" />;
}

EmojiPickerPopover renders an emoji picker inside a popover dropdown. Use it to build custom emoji picker triggers.

import { useState } from 'react';
import { ActionIcon } from '@mantine/core';
import data from '@emoji-mart/data';
import { emojiMartAdapter, EmojiPickerPopover } from '@mantine/emoji';

const emojiData = emojiMartAdapter(data);

function Demo() {
  const [emoji, setEmoji] = useState<string | null>(null);

  return (
    <EmojiPickerPopover
      data={emojiData}
      onEmojiSelect={(e) => setEmoji(e.emoji)}
    >
      <ActionIcon variant="default" size="lg">
        {emoji || '☺'}
      </ActionIcon>
    </EmojiPickerPopover>
  );
}

New Diff component highlights differences between two strings. It supports unified and split (side-by-side) display modes, configurable diff granularity (characters, words, or lines), and context line collapsing.

// Demo.tsx
import { Diff } from '@mantine/code-highlight';
import { currentCode, previousCode } from './data';

function Demo() {
  return <Diff previousValue={previousCode} currentValue={currentCode} />;
}

// data.ts
export const previousCode = \`import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}\

New PhoneInput component provides an international phone number input with country selector, auto-detection, and formatting masks.

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

function Demo() {
  return (
    <PhoneInput
      label="Phone number"
      placeholder="Your phone number"
      defaultCountry="us"
      renderFlag={(country) => (
        <img
          src={`https://hatscripts.github.io/circle-flags/flags/${country?.iso2 ?? 'xx'}.svg`}
          alt={country?.name ?? 'Select country'}
          style={{ width: 20, height: 20, borderRadius: 20 }}
        />
      )}
    />
  );
}

New MaskedDateInput component provides a date input with individual masked fields for day, month, and year. It supports configurable field order, custom separators, optional time fields, and a calendar dropdown for date selection.

import { MaskedDateInput } from '@mantine/dates';

function Demo() {
  return <MaskedDateInput label="Date of birth" />;
}

New QuarterPicker and QuarterPickerInput components allow picking quarters, multiple quarters and quarters ranges. They work the same way as MonthPicker and MonthPickerInput; the value is the first day of the selected quarter in YYYY-MM-DD format.

New WeekPicker and WeekPickerInput components allow picking weeks, multiple weeks and weeks ranges. Clicking any day selects the whole week, the value is the first day of the week according to firstDayOfWeek in YYYY-MM-DD format.

New use-active-element hook tracks the element that currently has focus. Use it to build focus-aware UI or to disable global keyboard shortcuts while the user is typing:

import { Code, Group, Text, Textarea, TextInput } from '@mantine/core';
import { useActiveElement } from '@mantine/hooks';

function describe(element: Element | null) {
  if (!element) {
    return 'null';
  }

  return element.id ? `${element.tagName.toLowerCase()}#${element.id}` : element.tagName.toLowerCase();
}

function Demo() {
  const activeElement = useActiveElement();

  return (
    <>
      <Text>
        Focused element: <Code>{describe(activeElement)}</Code>
      </Text>

      <Group grow mt="md">
        <TextInput id="first-name" label="First name" placeholder="First name" />
        <TextInput id="last-name" label="Last name" placeholder="Last name" />
      </Group>

      <Textarea id="message" mt="md" label="Message" placeholder="Your message" />
    </>
  );
}

New use-browser-language hook returns the browser language and updates when the user changes it. Use it to pick a default locale for formatting or translations:

import { Code, Text } from '@mantine/core';
import { useBrowserLanguage } from '@mantine/hooks';

function Demo() {
  const language = useBrowserLanguage();

  return (
    <Text>
      Your browser language: <Code>{language ?? 'unknown'}</Code>
    </Text>
  );
}

New Mentions component is a textarea that opens a suggestions dropdown when the user types @ or any other trigger. Picked mentions are stored in the value as @[Display](id) markup, the user sees only the display text:

import { useState } from 'react';
import { Mentions } from '@mantine/core';

const users = [
  { id: 'walter', display: 'Walter White' },
  { id: 'jesse', display: 'Jesse Pinkman' },
  { id: 'saul', display: 'Saul Goodman' },
  { id: 'gus', display: 'Gustavo Fring' },
];

function Demo() {
  const [value, setValue] = useState('Hey @[Walter White](walter), are you ready?');

  return (
    <Mentions
      label="Comment"
      placeholder="Type @ to mention someone"
      value={value}
      onChange={(payload) => setValue(payload.value)}
      minRows={3}
    >
      <Mentions.Mention trigger="@" data={users} />
    </Mentions>
  );
}

• DayView and WeekView support slotLabelInterval prop to display time labels more often than once per hour
• DayView and WeekView businessHours prop accepts exact minutes, business hours colors can be changed with CSS variables
• MobileMonthView supports withWeekendDays prop to hide weekend days
• ScrollArea supports --scrollarea-offset-size CSS variable to change the gap reserved by offsetScrollbars
• Popover and components based on it support clickOutsideCapture prop to close the dropdown when the click target stops event propagation
• getUploadImageExtension in @mantine/tiptap uploads images embedded in pasted HTML, use shouldUploadPastedImage option to control which images are uploaded
• Keyboard navigation in DatePicker and other @mantine/dates pickers has been improved: arrow keys move focus across months and focus returns to the input when the dropdown closes
• @mantine/form exports UseContextForm type
• Notifications support autoCloseProgressPosition prop to display the auto close progress line at the top of the notification

2026-11-09

• Improve namespace object generation in cyclic imports (#6644)
• Warn about deleting or reassigning namespace members but make those operations catchable runtime errors (#6645)
• Do not generate invalid code for non-esm output when exporting destructing declarations with defaults (#6648)

• #6638: docs: add missing options to the config file example (@Aryapatel-007, @lukastaegert)
• #6639: List --interop modes in CLI help instead of --no-interop (@ZainnQureshii, @lukastaegert)
• #6643: docs: update the ES modules sentence in the introduction (@vigohan95)
• #6644: Defer namespace bindings initialized later in a cycle (@mayankdhingra02)
• #6645: Preserve namespace property references in delete expressions (@mayankdhingra02, @lukastaegert)
• #6648: Fix invalid output for exported destructuring declarations with defaults (@trleo, @lukastaegert)

更新 Vditor 4.0.2 预发布版本，包含 alpha.7 之后的开发分支改动。

• 修复撤销后的通知回调清空重做记录、目录目标 ID 不一致及目录点击后的焦点与全选问题
• 改进 Markdown 粘贴、跨单元格复制粘贴、图片拖拽与外链图片转存
• 改进桌面和移动端的任务列表导航、链接操作、配对符号编辑、大纲和提示交互
• 更新内置 Lute 至 3e78715b，改进链接、空行级代码和数学公式、混合强调、TODO 注释及键盘标签的往返转换
• 添加 ESM 入口，更新 Graphviz 运行时，并改进图表和代码渲染

Graphviz 渲染需要浏览器支持 WebAssembly 和 Worker。此版本为预发布版本，npm 分发标签为 alpha。

• deduplicate polyfill locale data (#7897) (fc49531)

• The following workspace dependencies were updated
  • optionalDependencies
    • @formatjs/cli-native-darwin-arm64 bumped to 1.1.34
    • @formatjs/cli-native-darwin-x64 bumped to 1.1.2
    • @formatjs/cli-native-linux-arm64 bumped to 1.2.34
    • @formatjs/cli-native-linux-arm64-musl bumped to 1.0.32
    • @formatjs/cli-native-linux-x64 bumped to 1.1.34
    • @formatjs/cli-native-linux-x64-musl bumped to 1.0.32
    • @formatjs/cli-native-win32-arm64 bumped to 1.1.2
    • @formatjs/cli-native-win32-x64 bumped to 1.1.35

• deduplicate polyfill locale data (#7897) (fc49531)

• deduplicate polyfill locale data (#7897) (fc49531)