mantinedev/mantine 4.2.0

on GitHub

View changelog with demos on Mantine docs website

primaryShade on theme

New theme.primaryShade property is used to determine which shade will be used for the components that have color prop,
it defaults to 6. Note that for some variants with dark color scheme primaryShade will not be used as it will cause contrast issues.

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

function Demo() {
  return (
    <MantineProvider theme={{ primaryShade: 6 }}>
      <App />
    </MantineProvider>
  );
}

primaryShade can also be customized for dark and light color scheme separately:

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

function Demo() {
  return (
    <MantineProvider theme={{ primaryShade: { light: 6, dark: 8 } }}>
      <App />
    </MantineProvider>
  );
}

New features

• New use-focus-within hook detects if any element within has focus,
  it works the same way as :focus-within CSS selector
• New use-network hook returns current connection status
• New Indicator component
• SegmentedControl component now supports disabled items
• Calendar component now supports multiple selected dates
• Modal and Drawer components now support setting overlay blur
• Calendar, Month and DatePicker components now support custom day renderer with renderDay function:
• use-window-event hook now supports custom events
• use-local-storage hook now supports value sync in the same tab
• RichTextEditor now supports placeholder