Update all non-major dependencies by renovate[bot] · Pull Request #149 · mantinedev/ui.mantine.dev

renovate · 2026-07-26T00:07:24Z

ℹ️ Note

This PR body was truncated due to platform limits.

This PR contains the following updates:

Package	Change	Type	Update
@babel/core (source)	`8.0.1` → `8.0.6`	devDependencies	patch
@mantine/carousel (source)	`9.0.0-alpha.7` → `9.6.3`	dependencies	minor
@mantine/code-highlight (source)	`9.0.0-alpha.7` → `9.6.3`	dependencies	minor
@mantine/core (source)	`9.0.0-alpha.7` → `9.6.3`	dependencies	minor
@mantine/dropzone (source)	`9.0.0-alpha.7` → `9.6.3`	dependencies	minor
@mantine/form (source)	`9.0.0-alpha.7` → `9.6.3`	dependencies	minor
@mantine/hooks (source)	`9.0.0-alpha.7` → `9.6.3`	dependencies	minor
@mantine/spotlight (source)	`9.0.0-alpha.7` → `9.6.3`	dependencies	minor
@next/bundle-analyzer (source)	`16.1.7` → `16.3.8`	dependencies	minor
@storybook/addon-themes (source)	`10.2.19` → `10.6.1`	devDependencies	minor
@storybook/nextjs (source)	`10.2.19` → `10.6.1`	devDependencies	minor
@storybook/react (source)	`10.2.19` → `10.6.1`	devDependencies	minor
@tabler/icons-react (source)	`3.40.0` → `3.48.0`	dependencies	minor
@testing-library/dom	`10.4.1` → `10.4.2`	devDependencies	patch
@testing-library/jest-dom	`7.0.0` → `7.0.1`	devDependencies	patch
@testing-library/react	`16.3.2` → `16.3.3`	devDependencies	patch
@types/node (source)	`26.1.1` → `26.6.4`	devDependencies	minor
@types/react (source)	`19.2.14` → `19.3.0`	devDependencies	minor
dayjs (source)	`1.11.20` → `1.11.23`	dependencies	patch
jest (source)	`30.3.0` → `30.5.2`	devDependencies	minor
jest-environment-jsdom (source)	`30.3.0` → `30.5.2`	devDependencies	minor
node (source)	`24.14.0` → `24.21.0`		minor
oxfmt (source)	`^0.64.0` → `^0.71.0`	devDependencies	minor
oxlint (source)	`1.85.0` → `1.86.0`	devDependencies	minor
postcss (source)	`8.5.23` → `8.5.28`	devDependencies	patch
react (source)	`19.2.4` → `19.3.0`	dependencies	minor
react-dom (source)	`19.2.4` → `19.3.0`	dependencies	minor
shiki (source)	`4.0.2` → `4.5.0`	dependencies	minor
storybook (source)	`10.2.19` → `10.6.1`	devDependencies	minor
typescript (source)	`6.0.2` → `6.0.3`	devDependencies	patch
yarn (source)	`4.18.0` → `4.18.1`	packageManager	patch

Release Notes

babel/babel (@babel/core)

`v8.0.6`

Compare Source

👓 Spec Compliance

babel-helper-validator-identifier, babel-parser
- #18237 Update identifier definition to Unicode 18 (@JLHwung)

🐛 Bug Fix

babel-parser
- #18240 Fix parsing of arrow function params inside ternaries with Flow (@robhogan)
babel-helper-string-parser, babel-parser
- #18239 fix: polish error message for invalid binary 0b19 (@JLHwung)

🏠 Internal

babel-code-frame, babel-core, babel-generator, babel-helper-create-class-features-plugin, babel-helper-module-transforms, babel-parser, babel-plugin-bugfix-safari-rest-destructuring-rhs-array, babel-plugin-proposal-destructuring-private, babel-plugin-proposal-discard-binding, babel-plugin-transform-regenerator, babel-plugin-transform-typescript, babel-preset-env, babel-traverse, babel-types
- #18235 Remove unused internal exports (@nicolo-ribaudo)
babel-parser
- #18245 test: test with ts-eslint 8.70.0 (@JLHwung)
babel-core
- #18231 build: do not emit sourcemap in production build (@JLHwung)
babel-build-external-helpers, babel-cli, babel-code-frame, babel-core, babel-generator, babel-helper-compilation-targets, babel-helper-create-class-features-plugin, babel-helper-globals, babel-helper-string-parser, babel-helper-transform-fixture-test-runner, babel-helper-validator-identifier, babel-node, babel-parser, babel-plugin-transform-async-generator-functions, babel-plugin-transform-runtime, babel-register, babel-runtime-corejs3, babel-traverse
- #18236 Enforce usage of Yarn catalog for reused dependencies (@nicolo-ribaudo)

🏃‍♀️ Performance

babel-helper-compilation-targets, babel-helper-transform-fixture-test-runner
- #18232 Replace lru-cache with flru (@nicolo-ribaudo)

`v8.0.5`

Compare Source

👓 Spec Compliance

babel-parser
- #18218 fix(parser): do not form html entity for invalid codepoint (@JLHwung)

🐛 Bug Fix

babel-parser
- #18215 fix(parser): remove non-decimal prefix from bigint (@JLHwung)
- #18063 Disallow new import prop access (@JLHwung)
babel-plugin-transform-destructuring
- #18214 fix: only collapse the empty-object check when it targets the declared binding (@Kjubikstronk)
babel-plugin-transform-typescript
- #18190 fix(ts): improve variable handling in namespace (@JLHwung)
- #18207 [ts] Allow merging enum into a namespace (@nicolo-ribaudo)
babel-node
- #18217 Fix import path for babel-node.js (@drubetti)
babel-plugin-bugfix-safari-rest-destructuring-rhs-array
- #18213 fix(bugfix): bound check before array access (@JLHwung)
babel-traverse
- #18183 fix(remove): unwrap single sequence expression (@JLHwung)
- #18153 Handle null in getAll{Prev,Next}Siblings (@JLHwung)
babel-plugin-transform-block-scoping
- #18194 fix: improve for loop closure environment check (@JLHwung)
- #18193 fix: assign closure body after handling return (@JLHwung)
- #18088 Fix initialization of nested for loop head declarations (@journey-ad)
babel-generator
- #18202 fix(generator): keep parens for ?. chain in tag (@JLHwung)
babel-register
- #18137 fix(babel-register): preserve app-managed graceful shutdown (@jibin7jose)
Other
- #18140 chore: fix @babel/eslint-plugin peer deps (@JLHwung)
babel-cli, babel-helper-transform-fixture-test-runner, babel-register
- #18131 fix(register): do not inherit parent execArgv (@JLHwung)
babel-standalone
- #18095 Add types for @babel/standalone (@liuxingbaoyu)

📝 Documentation

#18187 Add AI policy (@nicolo-ribaudo)

🏠 Internal

babel-cli, babel-core, babel-helper-compilation-targets, babel-helper-create-class-features-plugin, babel-helper-create-regexp-features-plugin, babel-helper-fixtures, babel-preset-env
- #18145 refactor: replace semver with verkit (@sxzz)
babel-node
- #18177 Update node flags list (@nicolo-ribaudo)
babel-types
- #18103 Simplify AST validators (@fisker)

🏃‍♀️ Performance

babel-parser
- #18176 perf: Improve @babel/parser (@liuxingbaoyu)

mantinedev/mantine (@mantine/carousel)

`v9.6.3`

Compare Source

[@mantine/hooks] use-click-outside: Add capture phase support (#9213)
[@mantine/core] Select: Fix dropdown not closing on blur when searchable is not set (#9215)
[@mantine/core] PasswordInput: Fix aria-describedby not being taken from InputWrapperContext (#9216)
[@mantine/core] Fix aria-labelledby referencing a missing label element in Checkbox.Group, Radio.Group, Switch.Group (#9217)
[@mantine/core] Slider: Fix thumbProps not being passed to the thumb element (#9218)
[@mantine/core] Table: Fix memoized rows rerendering when Table rerenders with the same props (#6422)
[@mantine/hooks] use-intersection: Use the last entry from a batched observer callback (#9019)
[@mantine/hooks] use-media-query: Catch matchMedia errors when reading the initial value synchronously (#9020)
[@mantine/core] Portal: Cache shared portal node lookup (#9101)
[@mantine/schedule] MobileMonthView: Fix multi-day events not showing when they start in the previous month (#9153)
[@mantine/form] Fix removeListItem not clearing non-nested item errors (#9180)
[@mantine/core] Rating: Fix value being changed by scroll gestures on touch devices (#9159)
[@mantine/notifications] Fix uneven spacing in expanded stacks (#9176)
[@mantine/charts] Fix textColor and gridColor props being passed as attributes to the DOM node (#9181)
[@mantine/hooks] use-hotkeys: Fix preventDefault not being applied when other hotkey options are set (#9164)
[@mantine/hooks] use-throttled-callback: Fix callback becoming unresponsive after clearTimeout (#9146)
[@mantine/hooks] use-roving-index: Fix disabled items not being skipped by ArrowLeft/ArrowRight in grid mode (#9169)
[@mantine/hooks] use-mask: Fix transform not being applied to the initial input value (#9170)

`v9.6.2`

Compare Source

[@mantine/core] Combobox: Fix incorrect aria-selected setting on up/down arrows press (#9205)
[@mantine/core] NumberInput: Fix min and max boundaries not being respected when trimLeadingZeroesOnBlur is false (#9192)
[@mantine/hooks] use-mask: Fix incorrect handling of input with mixed static values (#9196)
[@mantine/schedule] Add option to resize bacground events (#9190)
[@mantine/schedule] MobileMonthView: Fix missing localization for all day events label (#9191)
[@mantine/hooks] use-scroll-spy: Fix stale nodes being used when element cannot be resolved by the given selector
[@mantine/core] ComboboxPopover: Fix incorrect focus management
[@mantine/charts] GaugeChart: Fix incorrect roundCaps handling with multiple sections (#9189)
[@mantine/core] NumberInput: Fix incorrect thousands separator handling on paste (#9102)

`v9.6.1`

Compare Source

[@mantine/ligtbox] Add option to render custom thumbnails for video
[@mantine/core] OverflowList: Fix ResizeObserver console warning (#9177)
[@mantine/core] Fix incorrect escape handling in Modal and Drawer stacks (#9188)
[@mantine/core] SegmentedControl: Fix indicator disappearing when data list is replaced with a list with the same length (#9175)
[@mantine/lightbox] Fix circular esm dependency (#9166)
[@mantine/core] Accordion: Fix incorrect border radius being applied to the contained items
[@mantine/schedule] Add event overlap mode support to WeekView and DayView
[@mantine/core] Menu: Fix incorrect withinPortal prop being available
[@mantine/core] Popover: Fix position not being updated when prop changes when the dropdown is opened (#9156)
[@mantine/schedule] Fix same-day events ending at exclusive midnight being dropped in WeekView and DayView components (#9157)
[@mantine/hooks] use-interval: Fix timer restarting when fn changes (#9158)
[@mantine/core] Textarea: Fix ResizeObserver loop error when autosize textarea width changes (#9162)
[@mantine/hooks] use-collapse: Fix incorrect transition state switching when used with Activity (#9160)

`v9.6.0`

Compare Source

View changelog with demos on mantine.dev website

Support Mantine development

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

@mantine/lightbox package

New @mantine/lightbox package – a full-screen media lightbox with carousel navigation,
zoom, thumbnails, toolbar customization, and store-based API. Supports image, video, and custom slides:

import '@mantine/lightbox/styles.css';
import { useState } from 'react';
import { Image, SimpleGrid } from '@mantine/core';
import { Lightbox, LightboxSlideData } from '@mantine/lightbox';

const images = [
  'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png',
  'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-2.png',
  'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-3.png',
  'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-4.png',
  'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-5.png',
];

const slides: LightboxSlideData[] = images.map((src) => ({ src }));

function Demo() {
  const [opened, setOpened] = useState(false);
  const [index, setIndex] = useState(0);

  return (
    <>
      <Lightbox
        opened={opened}
        onClose={() => setOpened(false)}
        slides={slides}
        currentIndex={index}
        onIndexChange={setIndex}
      />

      <SimpleGrid cols={3}>
        {images.map((src, i) => (
          <Image
            key={src}
            src={src}
            radius="md"
            style={{ cursor: 'pointer' }}
            onClick={() => {
              setIndex(i);
              setOpened(true);
            }}
          />
        ))}
      </SimpleGrid>
    </>
  );
}

Key features:

Zoom – click to zoom on desktop, double-tap on mobile, scroll wheel and pinch gestures
Thumbnails – bottom thumbnail strip with active indicator
Store API – mount once, open from anywhere (same pattern as Spotlight and Notifications)
Video slides – native video player with auto-pause on navigation
Custom slides – render anything with custom thumbnails
Transitions – animated open and close with configurable transitionProps (same API as Modal)
Keyboard shortcuts – Escape, arrows, F/T/Z for fullscreen/thumbnails/zoom
Localization – every string is defined in the labels prop

Notifications custom rendering

Notifications now support renderNotification prop that allows you to completely
replace the default notification with custom content. All animations (enter, exit, drag dismiss)
are preserved for custom notifications:

import { Avatar, Button, Group, rem, Text } from '@mantine/core';
import { notifications } from '@mantine/notifications';

function Demo() {
  return (
    <Group justify="center">
      <Button
        onClick={() =>
          notifications.show({
            autoClose: false,
            renderNotification: (notification) => (
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: rem(12),
                  padding: rem(16),
                  borderRadius: rem(8),
                  backgroundColor: 'var(--mantine-color-body)',
                  border: '1px solid var(--mantine-color-default-border)',
                  boxShadow: 'var(--mantine-shadow-lg)',
                  userSelect: 'none',
                }}
              >
                <Avatar src={null} radius="xl" color="blue">
                  DM
                </Avatar>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <Text size="sm" fw={600}>
                    Dan sent you a message
                  </Text>
                  <Text size="xs" c="dimmed" lineClamp={1}>
                    Hey, are you free for a quick call?
                  </Text>
                  <Group gap="xs" mt={8}>
                    <Button
                      size="compact-xs"
                      variant="filled"
                      onClick={() =>
                        notifications.hide(notification.id!)
                      }
                    >
                      Reply
                    </Button>
                    <Button
                      size="compact-xs"
                      variant="default"
                      onClick={() =>
                        notifications.hide(notification.id!)
                      }
                    >
                      Dismiss
                    </Button>
                  </Group>
                </div>
              </div>
            ),
            message: '',
          })
        }
      >
        Show custom notification
      </Button>
    </Group>
  );
}

Notifications stacked layout

Notifications now support layout="stacked" prop that displays notifications in a stacked
layout where only the latest notification is fully visible, and older notifications peek out behind it:

import { Button, Group } from '@mantine/core';
import { Notifications, notifications } from '@mantine/notifications';

function Demo() {
  return (
    <>
      {/* Replace your existing Notifications with layout="stacked" */}
      <Notifications layout="stacked" />
      <Group justify="center">
        <Button
          onClick={() => {
            notifications.show({
              title: 'New notification',
              message: 'This notification is part of a stacked layout',
            });
          }}
        >
          Show stacked notification
        </Button>
      </Group>
    </>
  );
}

ActionBar component

New ActionBar component – a fixed-position bottom bar
for bulk selection actions. Designed to be controlled by table or checkbox
selections, it provides a set of actions that can be performed on selected items.

import { useState } from 'react';
import { ActionBar, Button, Checkbox, Table, Text } from '@mantine/core';

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 [selection, setSelection] = useState<number[]>([]);

  const toggleRow = (position: number) =>
    setSelection((current) =>
      current.includes(position)
        ? current.filter((item) => item !== position)
        : [...current, position]
    );

  const toggleAll = () =>
    setSelection((current) =>
      current.length === elements.length ? [] : elements.map((element) => element.position)
    );

  const rows = elements.map((element) => (
    <Table.Tr
      key={element.position}
      bg={selection.includes(element.position) ? 'var(--mantine-color-blue-light)' : undefined}
    >
      <Table.Td>
        <Checkbox
          aria-label="Select row"
          checked={selection.includes(element.position)}
          onChange={() => toggleRow(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 all"
                checked={selection.length === elements.length}
                indeterminate={selection.length > 0 && selection.length !== elements.length}
                onChange={toggleAll}
              />
            </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>

      <ActionBar opened={selection.length > 0} onClose={() => setSelection([])} shadow="md">
        <Text size="sm">{selection.length} selected</Text>
        <ActionBar.Divider />
        <Button variant="default" size="compact-sm">
          Delete
        </Button>
        <Button variant="default" size="compact-sm">
          Move
        </Button>
        <Button variant="default" size="compact-sm">
          Archive
        </Button>
        <ActionBar.CloseButton />
      </ActionBar>
    </>
  );
}

RichTextEditor table controls

RichTextEditor now includes a set of controls for editing tables. Install and register the
Tiptap table extension (TableKit), then add
the controls to the toolbar. RichTextEditor.TableInsert opens a grid to pick the table size, and the
other controls add/remove rows and columns, toggle header row/column and merge/split cells. All table
controls are automatically disabled when the cursor is not inside a table:

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

function Demo() {
  const editor = useEditor({
    extensions: [StarterKit, TableKit],
    content: `
      <table>
        <tbody>
          <tr><th><p>Framework</p></th><th><p>Language</p></th></tr>
          <tr><td><p>Mantine</p></td><td><p>TypeScript</p></td></tr>
          <tr><td><p>Tiptap</p></td><td><p>TypeScript</p></td></tr>
        </tbody>
      </table>
      <p></p>
`,
  });

  return (
    <RichTextEditor editor={editor}>
      <RichTextEditor.Toolbar sticky>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.TableInsert />
          <RichTextEditor.TableDelete />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.TableColumnBefore />
          <RichTextEditor.TableColumnAfter />
          <RichTextEditor.TableColumnDelete />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.TableRowBefore />
          <RichTextEditor.TableRowAfter />
          <RichTextEditor.TableRowDelete />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.TableToggleHeaderRow />
          <RichTextEditor.TableToggleHeaderColumn />
          <RichTextEditor.TableMergeCells />
          <RichTextEditor.TableSplitCell />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>

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

RichTextEditor Details control

RichTextEditor now supports collapsible sections. Install and register the
Tiptap details extension (Details,
DetailsSummary and DetailsContent), then add RichTextEditor.Details to the toolbar. The control
wraps the current block in a collapsible details node, or removes it when the cursor is already inside
one:

import { Details, DetailsSummary, DetailsContent } from '@tiptap/extension-details';
import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { RichTextEditor } from '@mantine/tiptap';

function Demo() {
  const editor = useEditor({
    extensions: [StarterKit, Details, DetailsSummary, DetailsContent],
    content: `
      <details>
        <summary>Shipping and delivery</summary>
        <p>Orders are processed within 1–2 business days and delivered in 3–5 business days.</p>
      </details>
      <details>
        <summary>Returns and refunds</summary>
        <p>You can return any item within 30 days of delivery for a full refund.</p>
      </details>
      <p></p>
`,
  });

  return (
    <RichTextEditor editor={editor}>
      <RichTextEditor.Toolbar sticky>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Bold />
          <RichTextEditor.Italic />
          <RichTextEditor.Underline />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Details />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>

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

To support the control, Typography now styles details and summary elements –
a border, padding and a custom disclosure triangle. This applies to all details elements inside
Typography, not just those created by the editor. All of the new selectors have zero specificity
(:where()), so they can be overridden without !important.

RichTextEditor InvisibleCharacters control

RichTextEditor can now display formatting marks. Install and register the
Tiptap invisible characters extension,
then add RichTextEditor.InvisibleCharacters to the toolbar. The control toggles the visibility of
spaces, paragraph breaks and hard breaks, and reflects the current visibility as its active state:

import InvisibleCharacters from '@tiptap/extension-invisible-characters';
import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { RichTextEditor } from '@mantine/tiptap';

function Demo() {
  const editor = useEditor({
    extensions: [StarterKit, InvisibleCharacters.configure({ visible: false })],
    content: `
      <p>Toggle the control to reveal spaces and paragraph breaks.</p>
      <p>Each space becomes a dot and every paragraph ends with a pilcrow.</p>
`,
  });

  return (
    <RichTextEditor editor={editor}>
      <RichTextEditor.Toolbar sticky>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Bold />
          <RichTextEditor.Italic />
          <RichTextEditor.Underline />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.InvisibleCharacters />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>

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

GaugeChart component

New GaugeChart component – a radial gauge chart for KPI and status display.
Supports threshold sections, target marker, custom labels, and configurable arc angles.

import { GaugeChart } from '@mantine/charts';

function Demo() {
  return <GaugeChart value={72} size={200} thickness={12} />;
}

WaffleChart component

New WaffleChart component – a part-to-whole grid chart with colored cells.
Simpler and more compact alternative to pie/donut charts for displaying percentages and proportions.

// Demo.tsx
import { WaffleChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <WaffleChart data={data} />;
}

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

export const data: WaffleChartCell[] = [
  { name: 'Chrome', value: 65, color: 'blue' },
  { name: 'Safari', value: 19, color: 'teal' },
  { name: 'Firefox', value: 10, color: 'orange' },
  { name: 'Other', value: 6, color: 'gray' },
];

MatrixChart component

New MatrixChart component – a generic x/y heatmap with categorical axes.
Each cell is colored based on a value, useful for visualizing patterns in two-dimensional categorical data.

// Demo.tsx
import { MatrixChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <MatrixChart
      data={data}
      yLabels={['James', 'Mary', 'Robert', 'Linda', 'Michael', 'Sarah', 'David', 'Emma']}
      withYLabels
      withTooltip
      getTooltipLabel={({ x, y, value }) =>
        `${y}, Mar ${x}: ${value === null ? 'No contributions' : `${value} contribution${value > 1 ? 's' : ''}`}`
      }
    />
  );
}

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

export const data: MatrixChartCell[] = [
  { x: '1', y: 'James', value: 7 },
  { x: '2', y: 'James', value: 10 },
  { x: '3', y: 'James', value: 2 },
  { x: '4', y: 'James', value: 10 },
  { x: '5', y: 'James', value: 8 },
  { x: '6', y: 'James', value: null },
  { x: '7', y: 'James', value: null },
  { x: '8', y: 'James', value: 6 },
  { x: '9', y: 'James', value: 2 },
  { x: '10', y: 'James', value: 8 },
  { x: '11', y: 'James', value: 1 },
  { x: '12', y: 'James', value: 3 },
  { x: '13', y: 'James', value: 7 },
  { x: '14', y: 'James', value: null },
  { x: '15', y: 'James', value: 9 },
  { x: '16', y: 'James', value: 10 },
  { x: '17', y: 'James', value: null },
  { x: '18', y: 'James', value: 1 },
  { x: '19', y: 'James', value: 8 },
  { x: '20', y: 'James', value: null },
  { x: '21', y: 'James', value: null },
  { x: '22', y: 'James', value: 5 },
  { x: '23', y: 'James', value: 8 },
  { x: '24', y: 'James', value: 2 },
  { x: '25', y: 'James', value: 5 },
  { x: '26', y: 'James', value: 6 },
  { x: '27', y: 'James', value: null },
  { x: '28', y: 'James', value: null },
  { x: '29', y: 'James', value: 7 },
  { x: '30', y: 'James', value: 7 },
  { x: '31', y: 'James', value: 6 },
  { x: '1', y: 'Mary', value: 3 },
  { x: '2', y: 'Mary', value: 1 },
  // ... remaining data
];

CandlestickChart component

New CandlestickChart component – a financial OHLC chart that displays
open, high, low and close values as candles. Candles are colored based on their direction, the wick
shows the high–low range and the body shows the open–close range. Supports custom colors, data keys,
reference lines, axis labels, tooltip labels and value formatting.

// Demo.tsx
import { CandlestickChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <CandlestickChart h={300} data={data} dataKey="date"  tickLine="y" gridAxis="x" withXAxis={true} withYAxis={true} withTooltip={true} />;
}

// data.ts
export const data = [
  { date: 'Mar 01', open: 136, high: 142, low: 133, close: 140 },
  { date: 'Mar 02', open: 140, high: 145, low: 138, close: 139 },
  { date: 'Mar 03', open: 139, high: 141, low: 129, close: 131 },
  { date: 'Mar 04', open: 131, high: 134, low: 124, close: 125 },
  { date: 'Mar 05', open: 125, high: 133, low: 124, close: 132 },
  { date: 'Mar 06', open: 132, high: 138, low: 131, close: 137 },
  { date: 'Mar 07', open: 137, high: 137, low: 128, close: 129 },
  { date: 'Mar 08', open: 129, high: 135, low: 127, close: 134 },
  { date: 'Mar 09', open: 134, high: 148, low: 133, close: 146 },
  { date: 'Mar 10', open: 146, high: 152, low: 144, close: 151 },
  { date: 'Mar 11', open: 151, high: 154, low: 143, close: 145 },
  { date: 'Mar 12', open: 145, high: 149, low: 142, close: 148 },
  { date: 'Mar 13', open: 148, high: 156, low: 147, close: 155 },
  { date: 'Mar 14', open: 155, high: 158, low: 150, close: 152 },
  { date: 'Mar 15', open: 152, high: 153, low: 141, close: 143 },
  { date: 'Mar 16', open: 143, high: 147, low: 139, close: 146 },
  { date: 'Mar 17', open: 146, high: 160, low: 145, close: 159 },
  { date: 'Mar 18', open: 159, high: 164, low: 156, close: 157 },
  { date: 'Mar 19', open: 157, high: 162, low: 153, close: 161 },
  { date: 'Mar 20', open: 161, high: 168, low: 160, close: 166 },
];

Charts reference areas

AreaChart, BarChart, LineChart,
CompositeChart and ScatterChart now support the
referenceAreas prop that highlights a rectangular region of the plot – a weekend band, a target
range, a threshold zone and similar annotations. Each area is bounded by x1/x2 and/or y1/y2
data values (omit one pair to span the full opposite axis) and supports a theme color and a label.

// Demo.tsx
import { AreaChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <AreaChart
      h={300}
      data={data}
      dataKey="date"
      type="stacked"
      series={[
        { name: 'Apples', color: 'indigo.6' },
        { name: 'Oranges', color: 'blue.6' },
   

> ❗ **Important**
> 
> ✂ PR body was truncated to here.


</details>

---

### Configuration

📅 **Schedule**: (UTC)

- Branch creation
  - "before 5am on sunday"
- Automerge
  - At any time (no schedule defined)

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://redirect.github.com/renovatebot/renovate/discussions) if that's undesired.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/mantinedev/ui.mantine.dev).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0My4yODAuMCIsInVwZGF0ZWRJblZlciI6IjQ0LjEyNS4xIiwidGFyZ2V0QnJhbmNoIjoibWFzdGVyIiwibGFiZWxzIjpbXX0=-->

renovate Bot force-pushed the renovate/all-non-major-dependencies branch 3 times, most recently from 9ab066d to 76935c5 Compare July 26, 2026 09:35

Update all non-major dependencies

15ab089

renovate Bot force-pushed the renovate/all-non-major-dependencies branch from 76935c5 to 15ab089 Compare October 3, 2026 23:04

rtivital mentioned this pull request Oct 4, 2026

Update dependencies, migrate to TypeScript 7 #158

Merged

rtivital closed this in #158 Oct 4, 2026

Navigation Menu

Update all non-major dependencies - #149

Update all non-major dependencies#149
renovate[bot] wants to merge 1 commit into
masterfrom
renovate/all-non-major-dependencies

renovate Bot commented Jul 26, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

0 participants

Conversation

renovate Bot commented Jul 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release Notes

v8.0.6

👓 Spec Compliance

🐛 Bug Fix

🏠 Internal

🏃‍♀️ Performance

v8.0.5

👓 Spec Compliance

🐛 Bug Fix

📝 Documentation

🏠 Internal

🏃‍♀️ Performance

v9.6.3

v9.6.2

v9.6.1

v9.6.0

Support Mantine development

@​mantine/lightbox package

Notifications custom rendering

Notifications stacked layout

ActionBar component

RichTextEditor table controls

RichTextEditor Details control

RichTextEditor InvisibleCharacters control

GaugeChart component

WaffleChart component

MatrixChart component

CandlestickChart component

Charts reference areas

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

0 participants

renovate Bot commented Jul 26, 2026 •

edited

Loading

`v8.0.6`

`v8.0.5`

`v9.6.3`

`v9.6.2`

`v9.6.1`

`v9.6.0`

@mantine/lightbox package