Skip to content

Releases: mantinedev/mantine

8.3.1

10 Sep 09:24
@rtivital rtivital
8.3.1
ece602c
Compare
Choose a tag to compare
8.3.1 Latest
Latest

What's new

  • [@mantine/hooks] use-scroll-spy: Fix scroll events not being reassigned when scrollHost changes (#8251)
  • [@mantine/modals] Update updateModal to include types for confirm modal
  • [@mantine/core] Tabs: Allow overriding aria attributes with ...others
  • [@mantine/core] Select: Fix clear button overlaying selected option (#8249)
  • [@mantine/core] Combobox: Update focusTarget handler to correctly handle missing DOM node (#8185)
  • [@mantine/core] ColorPicker: Fix unexpected margin-top (#8247)
  • [@mantine/core] Allow specifying generic component in default props in the theme object (#8188)
  • [@mantine/form] Fix incorrect type of matchesField validator (#8201)
  • [@mantine/modals] Fix data-* attributes triggering type error (#8217)
  • [@mantine/dates] DateInput: Fix allowDeselect prop not working (#8229)
  • [@mantine/charts] Fix long tooltip names overflowing on the series color swatch in the tooltip (#8230)
Assets 2
Loading

8.3.0 🔥

08 Sep 11:00
@rtivital rtivital
8.3.0
081c992
Compare
Choose a tag to compare
8.3.0 🔥

View changelog with demos on mantine.dev website

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:

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

8.2.8

31 Aug 11:47
@rtivital rtivital
8.2.8
fea9a8a
Compare
Choose a tag to compare
8.2.8

What's Changed

  • [@mantine/charts] LineChart: Fix gridColor prop being passed down to the root DOM node
  • [@mantine/carousel] Add data-type="next" and data-type="previous" to controls
  • [@mantine/hooks] use-scroll-spy: Add offset prop support (#8209)
  • [@mantine/core] ScrollArea: Fix incorrect horizontal size calculations in ScrollArea.Autosize (#8199)
  • [@mantine/core] JsonInput: Fix font-size not scaling with size prop (#8206)
  • [@mantine/hooks] Fix incorrect ESM exports for nodenext module resolution (#8211)
  • [@mantine/hooks] use-document-visibility: Fix initial document visibility state not being set (#8215)
  • [@mantine/dates] DateTimePicker: Fix onDropdownClose not working (#8212)

New Contributors

Full Changelog: 8.2.7...8.2.8

Contributors

sky0014, k-utsumi, and 3 other contributors
Loading

8.2.7

22 Aug 12:16
@rtivital rtivital
8.2.7
b196edb
Compare
Choose a tag to compare
8.2.7
  • [@mantine/hooks] use-media-query: Fix hook crashing inside iframe in Safari (#8189)
  • [@mantine/hooks] use-debounced-value: Make cancel a stable reference (#8181)
  • [@mantine/core] Combobox: Fix incorrect flipping logic (#8179, #8194)
  • [@mantine/core] InputBase: Fix broken padding in multiline inputs (#8177)
Loading

8.2.5

16 Aug 13:51
@rtivital rtivital
8.2.5
083e9cc
Compare
Choose a tag to compare
8.2.5

What's Changed

  • [@mantine/core] ScrollArea: Fix ScrollArea.Autosize not resizing when width of children changes (#8160)
  • [@mantine/core] ScrollArea: Fix scrollbars not resizing correctly with dynamic content (#8162)
  • [@mantine/core] TagsInput: Fix backspace key removing values with readOnly prop set (#8066)
  • [@mantine/core] NumberInput: Fix incorrect trailing zeros handling for decimal values (#8089)
  • [@mantine/core] Fix incorrect padding of multiline inputs (#8156)
  • [@mantine/hooks] use-list-state: Update types to allow state function initializer (#8157)

New Contributors

Full Changelog: 8.2.4...8.2.5

Contributors

brofar, mrdjohnson, and 4 other contributors
Loading

8.2.4

07 Aug 09:34
@rtivital rtivital
8.2.4
6266536
Compare
Choose a tag to compare
8.2.4

What's Changed

  • [@mantine/dates] DateInput: Fix disabled and clearable props collision (#8098)
  • [@mantine/modals] Fix incorrect confirmProps and cancelProps types (#8099)
  • [@mantine/dates] TimePicker: Fix controlled incorrect controlled value updates handling (#8108)
  • [@mantine/core] NumberInput: Fix incorrect value sanitization in onBlur for max value clamping (#8114)
  • [@mantine/core] Fix MultiSelect and TagsInput pills not being centered (#8145)
  • [@mantine/core] Table: Fix 1px gap on thead with sticky + withTableBorder combination (#8109)
  • [@mantine/core] Fix caret being invisible in some inputs (#8149)
  • [@mantine/tiptap] Fix controls props being overridden by default props (#8148)
  • [@mantine/code-highlight] Fix aria-label not being set on the copy button (#8130)
  • [@mantine/code-highlight] Fix incorrect overscroll behavior

New Contributors

Full Changelog: 8.2.3...8.2.4

Contributors

vicke4, EdwardEB, and 2 other contributors
Loading

8.2.3

05 Aug 10:01
@rtivital rtivital
8.2.3
18b4658
Compare
Choose a tag to compare
8.2.3

What's Changed

  • [@mantine/dates] DatePickerInput: Fix incorrect handling of multiline values (#8116)
  • [@mantine/code-highlight] Fix gradient of expand button not being visible on mobile Safari
  • [@mantine/core] Combobox: Fix Combobox.Group not having aria-labelledby attribute
  • [@mantine/core] Switch: Fix tap highlight color not being disabled on touch devices
  • [@mantine/core] Remove transition with loader in ActionIcon and Button components if loading prop is not set to improve performance
  • [@mantine/core] Combobox: Fix unexpected closed dropdown position calculation reducing performance
  • [@mantine/charts] Fix tooltip not being aligned for some fonts
  • [@mantine/dates] DatePickerInput: Fix incorrect Styles API selectors
  • [@mantine/core] Table: Fix missing border when rowspan is set (#8137)
  • [@mantine/hooks] use-move: Fix error dsiplayed in console for touch devices (#8065)
  • [@mantine/dates] Fix incorrect props assigned to CalendarAriaLables props

New Contributors

Full Changelog: 8.2.2...8.2.3

Contributors

sublimemm and TheMineWay
Loading

8.2.2

30 Jul 12:38
@rtivital rtivital
8.2.2
da0fbca
Compare
Choose a tag to compare
8.2.2

What's Changed

  • [@mantine/core] Menu: Fix incorrect overflow handling of submenu (#8123)
  • [@mantine/hooks] use-merged-ref: Fix incorrect handling of React 19 cleanup ref callback (#8118)
  • [@mantine/dates] TimePicker: Fix incorrect leading zero handling in 12h format (#8120)
  • [@mantine/dates] TimePicker: Fix min/max values not being enforced for 12h time format (#8107)
  • [@mantine/core] HoverCard: Improve outside clicks handling (#8097)
  • [@mantine/dates] Add month and year switching with keyboard to Calendar-based components (#7959)
  • [@mantine/core] ScrollArea: Add onOverflowChange prop support to ScrollArea.Autosize (#7972)
  • [@mantine/core] MultiSelect: Add clearSearchOnChange prop support (#8068)
  • [@mantine/core] Select: Fix caret being visible in Firefox when the component is read only (#8063)

New Contributors

Full Changelog: 8.2.0...8.2.2

Contributors

MidnightDesign, idealconceptz, and 4 other contributors
Loading

8.2.0 🔥

21 Jul 13:17
@rtivital rtivital
8.2.0
6545583
Compare
Choose a tag to compare
8.2.0 🔥

View changelog with demos on mantine.dev website

Styles API attributes

You now can pass attributes to inner elements of all components that support Styles API with attributes prop.
For example, it can be used to add data attributes for testing purposes:

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

function Demo() {
  return (
    <Button
      attributes={{
        root: { 'data-test-id': 'root' },
        label: { 'data-test-id': 'label' },
        inner: { 'data-test-id': 'inner' },
      }}
    >
      Button
    </Button>
  );
}

Container grid strategy

Container now supports strategy="grid" prop which enables more
features.

Differences from the default strategy="block":

  • Uses display: grid instead of display: block
  • Does not include default inline padding
  • Does not set max-width on the root element (uses grid template columns instead)

Features supported by strategy="grid":

  • Everything that is supported by strategy="block"
  • Children with data-breakout attribute take the entire width of the container's parent element
  • Children with data-container inside data-breakout have the same width as the main grid column

Example of using breakout feature:

import { Box, Container } from '@mantine/core';

function Demo() {
  return (
    <Container strategy="grid" size={500}>
      <Box bg="var(--mantine-color-indigo-light)" h={50}>
        Main content
      </Box>

      <Box data-breakout bg="var(--mantine-color-indigo-light)" mt="xs">
        <div>Breakout</div>

        <Box data-container bg="indigo" c="white" h={50}>
          <div>Container inside breakout</div>
        </Box>
      </Box>
    </Container>
  );
}

Tooltip target

New Tooltip target prop is an alternative to children. It accepts a string (selector),
an HTML element or a ref object with HTML element. Use target prop when you do
not render tooltip target as JSX element.

Example of using target prop with a string selector:

import { Button, Tooltip } from '@mantine/core';

function Demo() {
  return (
    <>
      <Tooltip target="#hover-me" label="Tooltip over button" />
      <Button id="hover-me">Hover me to see tooltip</Button>
    </>
  );
}

HoverCard.Group

HoverCard now supports delay synchronization between multiple instances using HoverCard.Group component:

import { HoverCard, Button, Text, Group } from '@mantine/core';

function Demo() {
  return (
    <HoverCard.Group openDelay={500} closeDelay={100}>
      <Group justify="center">
        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>First</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">First hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>

        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>Second</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">Second hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>

        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>Third</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">Third hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>
      </Group>
    </HoverCard.Group>
  );
}

use-selection hook

New use-selection hook:

import { Checkbox, Table } from '@mantine/core';
import { useSelection } from '@mantine/hooks';

const elements = [
  { position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
  { position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
  { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
  { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
  { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
];

function Demo() {
  const positions = useMemo(() => elements.map((element) => element.position), [elements]);

  const [selection, handlers] = useSelection({
    data: positions,
    defaultSelection: [39, 56],
  });

  const rows = elements.map((element) => {
    const isSelected = selection.includes(element.position);
    return (
      <Table.Tr key={element.name} bg={isSelected ? 'var(--mantine-color-blue-light)' : undefined}>
        <Table.Td>
          <Checkbox
            aria-label="Select row"
            checked={isSelected}
            onChange={(event) => {
              if (event.target.checked) {
                handlers.select(element.position);
              } else {
                handlers.deselect(element.position);
              }
            }}
          />
        </Table.Td>
        <Table.Td>{element.position}</Table.Td>
        <Table.Td>{element.name}</Table.Td>
        <Table.Td>{element.symbol}</Table.Td>
        <Table.Td>{element.mass}</Table.Td>
      </Table.Tr>
    );
  });

  return (
    <Table>
      <Table.Thead>
        <Table.Tr>
          <Table.Th>
            <Checkbox
              aria-label="Select deselect all rows"
              indeterminate={handlers.isSomeSelected()}
              checked={handlers.isAllSelected()}
              onChange={() => {
                if (handlers.isAllSelected()) {
                  handlers.resetSelection();
                } else {
                  handlers.setSelection(elements.map((el) => el.position));
                }
              }}
            />
          </Table.Th>
          <Table.Th>Element position</Table.Th>
          <Table.Th>Element name</Table.Th>
          <Table.Th>Symbol</Table.Th>
          <Table.Th>Atomic mass</Table.Th>
        </Table.Tr>
      </Table.Thead>
      <Table.Tbody>{rows}</Table.Tbody>
    </Table>
  );
}

autoSelectOnBlur prop

Select and Autocomplete components now support autoSelectOnBlur prop.
Use it to automatically select the highlighted option when the input loses focus.
To see this feature in action: select an option with up/down arrows, then click outside the input:

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

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

Source edit mode in RichTextEditor

RichTextEditor now supports source edit mode:

import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { RichTextEditor } from '@mantine/tiptap';
import { useState } from 'react';

function Demo() {
  const [isSourceCodeModeActive, onSourceCodeTextSwitch] = useState(false)

  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>Source code control example</p><p>New line with <strong>bold text</strong></p><p>New line with <em>italic</em> <em>text</em></p>',
  });

  return (
    <RichTextEditor editor={editor} onSourceCodeTextSwitch={onSourceCodeTextSwitch}>
      <RichTextEditor.Toolbar>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.SourceCode icon={BoldIcon} />
        </RichTextEditor.ControlsGroup>
        {!isSourceCodeModeActive && (
          <RichTextEditor.ControlsGroup>
            <RichTextEditor.Blockquote />
            <RichTextEditor.Bold />
            <RichTextEditor.Italic />
            <RichTextEditor.Underline />
            <RichTextEditor.Strikethrough />
            <RichTextEditor.ClearFormatting />
            <RichTextEditor.Highlight />
          </RichTextEditor.ControlsGroup>
        )}
      </RichTextEditor.Toolbar>

      <RichTextEditor.Content />
    </RichTextEditor>
  );
}

Recharts 3 support

You can now use the latest Recharts 3 version with Mantine charts.
@mantine/charts package was validated to work with both Recharts 2 and Recharts 3 versions.
Note that, there might still be some minor issues with Recharts 3, you are welcome to report issues on GitHub.

Other changes

  • Accordion default chevronSize prop value was changed to auto to allow using dynamic icon sizes
  • Accordion now supports chevronIconSize prop to configure size of the default chevron icon
  • AffixPosition type is now exported from @mantine/core package
  • errorProps, labelProps and descriptionProps props of all inputs now have stricter types and better IDE autocomplete
  • TypographyStylesProvider was renamed to just Typography to simplify usage. TypographyStylesProvider name is still available but marked as deprecated – it will be removed in 9.0.0 release.
  • Slider and RangeSlider components now have separate documentation pages
Loading

8.1.3

07 Jul 13:18
@rtivital rtivital
8.1.3
c2a603d
Compare
Choose a tag to compare
8.1.3

What's Changed

  • [@mantine/core] Container: Fix base responsive props value not being handled correctly (#8054)
  • [@mantine/form] Fix type errors with read only array types (#7950)
  • [@mantine/core] Fix incorrect disabled border color of Checkbox, Radio and Slider (#8053)
  • [@mantine/core] Combobox: Fix aria-expanded attribute not being assigned correctly to combobox target
  • [@mantine/core] Menu: Fix SubMenu having visual arrow offset when default props are set for Popover on theme (#8027)
  • [@mantine/form] Fix form.resetField not updating DOM with mode: 'uncontrolled' (#8050)
  • [@mantine/form] Add option to trigger watch callbacks when nested field value changes (#8026)
  • [@mantine/hooks] use-move: Fix React 18 compatibility (#8018)
  • [@mantine/dates] DateTimePicker: Add defaultDate prop support (#8023)
  • [@mantine/dates] DatePickerInput: Fix size="xs being slightly different from other inputs
  • [@mantine/dates] TimePicker: Fix dropdown being visible even when withDropdown={false} is set
  • [@mantine/core] Popover: Fix onClick not firing on the child of Popover.Target
  • [@mantine/spotlight] Fix incorrect query prop with empty string handling
  • [@mantine/core] Text: Fix autocomplete not working for size prop
  • [@mantine/hooks] use-debounced-callback: Fix incorrect leading behavior (#8021)
  • [@mantine/core] Collapse: Add keepMounted prop support (#8013)
  • [@mantine/date] TimePicker: Fix disabled and readOnly props not working (#8011)

New Contributors

Full Changelog: 8.1.2...8.1.3

Contributors

evantrimboli, crehard, and 2 other contributors
Loading