apps/mantine.dev/src/pages/changelog/7-0-0.mdx
import { Button } from '@mantine/core'; import { CarouselDemos, CodeHighlightDemos, ComboboxDemos, FieldsetDemos, GridDemos, GroupDemos, ImageDemos, InputDemos, LoaderDemos, NumberInputDemos, ProgressDemos, SimpleGridDemos, SpotlightDemos, StylesDemos, TableDemos, TagsInputDemos, ThemingDemos, } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';
export default Layout(MDX_DATA.Changelog700);
Mantine no longer depends on Emotion for styles generation. All @mantine/*
packages are now shipped with native CSS files which can be imported from @mantine/{package}/styles.css,
for example:
import '@mantine/core/styles.css';
This change improves performance, reduces bundle size of the library and allows using Mantine in environments where CSS-in-JS is not supported (or supported with limitations), for example, Next.js app directory.
Important breaking changes:
createStyles function is no longer available, use CSS modules or any other styling solution of your choice insteadsx prop. You can use className or style props instead.styles prop no longer supports nested selectorsIt is now recommended to use CSS modules to style Mantine components. To update your project to CSS modules, follow the 6.x → 7.x migration guide.
If you prefer CSS-in-JS syntax for styling, you can use Vanilla extract as a TypeScript CSS preprocessor. You will be able to use most of Mantine styling features with Vanilla extract.
All components now support system color scheme – when colorScheme value is auto,
components will use prefers-color-scheme media query to determine if the user prefers light or dark color scheme.
Note that auto is not the default value. You need to set it manually to enable system color scheme support
both on MantineProvider and in ColorSchemeScript:
import { ColorSchemeScript, MantineProvider } from '@mantine/core';
function Demo() {
return (
<>
<ColorSchemeScript defaultColorScheme="auto" />
<MantineProvider defaultColorScheme="auto">
</MantineProvider>
</>
);
}
MantineProvider now comes with a built-in color scheme manager. It is no longer required to use any other components to set up color scheme logic. Color scheme can be changed with useMantineColorScheme hook:
<Demo data={ThemingDemos.colorScheme} />CSS modules is now the recommended way to style Mantine components, although it is not required – you can choose any other styling solution of your choice.
It is also recommended to use postcss-preset-mantine. It includes mixins and functions to simplify styling of Mantine components. postcss-preset-mantine is included in all templates.
Mantine no longer includes normalize.css. Instead, it uses a bare minimum set of global styles.
These styles are part of the @mantine/core package and are applied automatically when you import
@mantine/core/styles.css in your application. Note that these styles cannot be decoupled from the
rest of the library.
You can now use Mantine as a headless library. To achieve that, just do not import
@mantine/*/styles.css in your application. Then you will be able to apply styles with
Styles API.
createTheme function is a replacement for MantineThemeOverride type. Use it to create a theme
override, it will give you autocomplete for all theme properties:
import { createTheme, MantineProvider } from '@mantine/core';
const theme = createTheme({
fontFamily: 'sans-serif',
primaryColor: 'orange',
});
function Demo() {
return (
<MantineProvider theme={theme}>
</MantineProvider>
);
}
All components that support default props or Styles API now have a static extend function which allows getting autocomplete when customizing
defaultProps, classNames and styles of the component
on theme:
import {
createTheme,
MantineProvider,
TextInput,
} from '@mantine/core';
import classes from './Demo.module.css';
const theme = createTheme({
components: {
TextInput: TextInput.extend({
styles: (t, props) => ({
input: {
fontSize:
props.size === 'compact' ? t.fontSizes.sm : undefined,
},
}),
classNames: {
root: classes.root,
input: classes.input,
label: classes.label,
},
defaultProps: {
size: 'compact',
},
}),
},
});
function Demo() {
return (
<MantineProvider theme={theme}>
</MantineProvider>
);
}
You can now get component props in classNames and styles to conditionally apply styles. This feature is a more powerful replacement for styles params.
<Demo data={StylesDemos.classNamesProps} />You can now customize components CSS variables to change component styles based on its props. For example, it can be used to add new sizes:
<Demo data={StylesDemos.vars} />All components now have data-variant attribute on the root element, even if the component does not have any predefined variants.
You can use it to apply styles to all components of the same type on theme:
There are multiple ways to customize component sizes:
data-size attributeExample of customizing Button size with data-size attribute:
Button, Badge, ActionIcon, ThemeIcon and other components now support custom variants with variantColorResolver – it supports both changing colors of existing variants and adding new variants.
<Demo data={ThemingDemos.variantColorsResolver} />It is now possible to scale rem units. It is useful when you want to change
font-size of html/:root element and preserve Mantine components sizes. For example, if you would like to set html font-size to 10px and scale Mantine components accordingly, you need
to set scale to 1 / (10 / 16) (16 – default font-size) = 1 / 0.625 = 1.6:
:root {
font-size: 10px;
}
import { createTheme, MantineProvider } from '@mantine/core';
const theme = createTheme({
scale: 1.6,
});
function Demo() {
return (
<MantineProvider theme={theme}>
</MantineProvider>
);
}
All components that support color prop now support the following color values:
theme.colors, for example, bluetheme.colors index reference, for example, blue.5#fff, rgba(0, 0, 0, 0.5), hsl(0, 0%, 100%)Classes of each component are now available in Component.classes object. For example, you can
find Button classes in Button.classes:
<DataTable head={['Key', 'Class']} data={Object.keys(Button.classes).map((key) => [ key, Button.classes[key], ])} />
You can use these classes to create components with the same styles as Mantine components:
import { Button } from '@mantine/core';
function Demo() {
return <button type="button" className={Button.classes.root} />;
}
theme.lineHeight is now theme.lineHeights – it is now possible to specify multiple line heights. theme.lineHeights values are used in the Text component.theme.colorScheme is no longer available, use useMantineColorScheme to get color scheme valuetheme.dir is no longer needed, direction is now managed by DirectionProvidertheme.loader was removed, you can now configure default loader with default props of Loader componenttheme.transitionTimingFunction was removedtheme.focusRingStyles was replaced with theme.focusClassNametheme.activeStyles was replaced with theme.activeClassNametheme.globalStyles was removedtheme.fn functions were removed, some of the functions are available as standalone utilitiestheme.fontSmoothing property determines whether font smoothing styles should be applied to the body elementNew @mantine/colors-generator package is now available to generate color palettes based on single color value. It is also available as online tool. Note that it is usually better to generate colors in advance to avoid contrast issues.
import { generateColors } from '@mantine/colors-generator';
import { createTheme, MantineProvider } from '@mantine/core';
const theme = createTheme({
colors: {
'pale-blue': generateColors('#375EAC'),
},
});
function Demo() {
return (
<MantineProvider theme={theme}>
</MantineProvider>
);
}
@mantine/core package now exports DirectionProvider component, which should be used to configure the direction of the application.
useDirection hook can be used to toggle direction. All components now include RTL styles by default, it is no
longer required to set up additional plugins. See RTL documentation to learn more.
Starting from version 7.0 Mantine no longer supports older React versions. The minimum supported version is now React 18. It is required because Mantine components now use useId and useSyncExternalStore hooks, which are available only in React 18.
Components that previously had rightSection and icon props, now use leftSection instead of icon.
Example of Button sections:
import { Button } from '@mantine/core';
function Demo() {
return (
<Button leftSection="left" rightSection="right">
Label
</Button>
);
}
NumberInput was migrated to react-number-format. It now supports more features and has improvements in cursor position management. Due to migration, some of the props were renamed – follow the documentation to learn about the changes.
<Demo data={NumberInputDemos.prefixSuffix} />Loader component is now built with CSS only. This change improves performance and reduces HTML output of the component.
<Demo data={LoaderDemos.configurator} />Theme object no longer supports theme.loader property –
it is also now possible to add custom loaders on theme with default props.
Specified Loader will be used in all components that use it under the hood (LoadingOverlay, Button, ActionIcon, Stepper, etc.).
Progress component now supports compound components pattern. Advanced features that were previously implemented in Progress are now supposed to be implemented with compound components instead.
<Demo data={ProgressDemos.compound} />Table component changes:
Table.Tr, Table.Td, etc.borderColor, withRowBorders, stripedColor, highlightOnHoverColorwithBorder prop was renamed to withTableBorderfontSize prop was removed, use fz style prop insteadTable.ScrollContainer component to create scrollable tableGroup component changes:
position prop was renamed to justify – it now supports all justify-content valuesnoWrap prop was replaced with wrap="nowrap", wrap prop now supports all flex-wrap valuesspacing prop was replaced with gapGroup now supports new preventGrowOverflow prop which allows customizing how group items will behave when they grow larger than their dedicated spacetabsList renamed to listTabProps type was renamed to TabsTabPropsonTabChange prop was renamed to onChangeTabs.List position prop was renamed to justify, it now supports all justify-content valuescompact prop was removed, use size="compact-XXX" insteadleftIcon and rightIcon props were renamed to leftSection and rightSectionuppercase prop was removed, use tt style prop insteadloaderPosition prop was removed, Loader is now always rendered in the center to prevent layout shiftsAppShell component was completely rewritten, it now supports more features:
AppShell now uses compound components pattern: Navbar, Aside, Header and Footer are no longer exported from @mantine/core package. Instead, use AppShell.Navbar, AppShell.Aside, etc.AppShell now supports animations when navbar/aside are opened/closedAppShell no longer supports fixed prop – all components have position: fixed styles, static positioning is no longer supportedSimpleGrid now uses object format to define grid breakpoints and spacing, it works the same way as style props.
<Demo data={SimpleGridDemos.responsive} />Grid now uses object format in gutter, offset, span and order props,
all props now work the same way as style props.
Image component changes:
Image component no longer includes figure and other associated elementscaption prop is no longer availablewidth and height props are replaced with w and h style propsSpotlight changes:
SpotlightProvider was renamed to SpotlightuseSpotlight hook was removed, use spotlight object insteadactions prop now uses a different data formatSpotlight component now uses compound components pattern for advanced customizationCarousel now uses object format for responsive values in
slideSize and slideGap props instead of breakpoints prop:
@mantine/prism package was deprecated in favor of @mantine/code-highlight package. The new package uses highlight.js instead of Prism.
New Fieldset component:
<Demo data={FieldsetDemos.usage} />The new Combobox component allows building custom select, autocomplete, tags input, multiselect and other similar components. It is used as a base for updated Autocomplete, Select, TagsInput and MultiSelect components.
Combobox is very flexible and allows you to have full control over the component rendering and logic. Advanced features that were previously implemented in Autocomplete, Select and MultiSelect are now supposed to be implemented with Combobox instead.
You can find 50+ Combobox examples on this page.
New TagsInput component based on Combobox component. The component is similar to MultiSelect but allows entering custom values.
<Demo data={TagsInputDemos.data} />All inputs now support withErrorStyles prop, which allows removing error styles from the input.
It can be used to apply custom error styles without override, or use other techniques to
indicate error state. For example, it can be used to render an icon in the right section:
All Mantine components now support hiddenFrom and visibleFrom props.
These props accept breakpoint (xs, sm, md, lg, xl) and hide the component when
viewport width is less than or greater than the specified breakpoint:
theme.respectReducedMotion is now set to false by default – it caused a lot of confusion for users who did not know about itnotifications.updateState function to update notifications state with a given callbackseparatorMargin propmainAxis and crossAxis offset configurationradius prop now affects thumb as well as trackchildren and options groupsunderline prop which lets you configure how link will be underlined: hover (default), always or nevertarget prop, use portalProps insteadtarget prop, use portalProps instead: portalProps={{ target: '.your-selector' }}sizes prop, use CSS variables to customize sizes on theme insteaduseComponentDefaultProps hook was renamed to usePropswithinPortal prop is now true by default in all overlay components (Popover, HoverCard, Tooltip, etc.)AlphaSlider and HueSlider components are no longer available, they can be used only as a part of ColorPicker<p />MediaQuery component was removed – use CSS modules to apply responsive styleshighlightColor was renamed to colorwidth prop, use w style prop insteadspacing prop was renamed to gapInput based components icon prop was renamed to leftSectionvariant prop was renamed to type@mantine/core package no longer depends on Radix UI ScrollArea, ScrollArea component is now a native Mantine component – it reduces bundle size, allows setting CSP for styles and improves performance (all styles are now applied with classes instead of inline <style /> tags)opacity prop was renamed to backgroundOpacity to avoid collision with opacity style propunderline, color, strikethrough, italic, transform, align and weight prop – use style props insteadinnerRef prop was renamed to refx and y values in offsetScrollbars propTransferList component is no longer available as a part of @mantine/core package, instead you can implement it with Combobox component (example)visibilityToggleLabel and toggleTabIndex props, use visibilityToggleButtonProps prop insteadbreakpoint prop, you can apply responsive styles with Styles APIdropdownZIndex, transitionProps, withinPortal, portalProps and shadow props, you can now pass these props with popoverProps propoverlayProps, loaderProps and transitionProps now replace props that were previously passed to LoadingOverlay directlypadding prop, use p style prop insteadtransitionDuration, transition and other transition related props were replaced with transitionPropsrootRef prop which allows using them with Tooltip and other similar componentsoverflow: hidden styles by default, you can enable it by setting overflow prop to hidden