Releases: mantinedev/mantine
7.1.0 β
CSS layers
Starting from 7.1.0 it is possible to import all @mantine/*
packages styles with rules
defined in mantine
CSS layer.
CSS rules within a layer are grouped together and applied before rules without a layer. This means that
even if you do not have control over styles import order, you can still override Mantine styles with
regular styles.
// If your styles are not wrapped in @layer directive,
// they will be applied after Mantine styles.
// Import order does not affect styles in this case
import classes from './Demo.module.css';
import '@mantine/core/styles.layer.css';
You can import styles within a layer by importing @mantine/*/styles.layer.css
files.
Note that these files are a full replacement for @mantine/*/styles.css
files β
you should not import both of them.
import '@mantine/core/styles.layer.css';
import '@mantine/dates/styles.layer.css';
// ... other styles
CSS layers are also useful if you want to combine Mantine components with other libraries which also
provide styles. You can use @layer
directive to control the order of styles:
@layer base, mantine, components;
In this example, Mantine styles will take precedence over other library base
styles, but other library
components
styles will take precedence over Mantine component styles.
As of September 2023, CSS layers are supported in all modern browsers and have 90% browser support.
renderRoot prop
All polymorphic components now support renderRoot
prop, which
is an alternative to component
prop. renderRoot
prop allows changing the root element
to any other component or HTML tag with a callback function. It can be used in cases when
component
prop is not flexible enough:
- Target component props are incompatible with Mantine component. For example, Button component expects
className
to be a string, but react-router-dom NavLink expects
className
to be a function. - Target component is a generic β it either accepts type as a parameter or its type changes depending
on its props. Examples: typed Next.js Link, TanStack router Link
renderRoot
example with react-router-dom NavLink:
import cx from 'clsx';
import { Button } from '@mantine/core';
import { NavLink } from 'react-router-dom';
function Demo() {
return (
<Button
renderRoot={({ className, ...others }) => (
<NavLink
className={({ isActive }) => cx(className, { 'active-class': isActive })}
{...others}
/>
)}
>
React router NavLink
</Button>
);
}
renderRoot
example with typed Next.js Link:
import Link from 'next/link';
import { Button } from '@mantine/core';
function Demo() {
return (
<Button renderRoot={(props) => <Link href="/hello" {...props} />}>
Typed Next link button
</Button>
);
}
Improved ESM support
All @mantine/*
packages now have improved ESM support:
- Files in
esm
folder now have.mjs
extension - You can use
@mantine/*
packages withtype: module
inpackage.json
without any additional configuration - All packages are now fully compatible with Remix v2
- Tree shaking was improved for some bundlers
CSS variables in style prop
It is now possible to define CSS variables in style
prop in all Mantine components β
style prop is no longer restricted by React.CSSProperties
type:
import { Box } from '@mantine/core';
function Demo() {
return <Box style={{ '--radius': '0.5rem', borderRadius: 'var(--radius)' }} />;
}
form.setInitialValues
@mantine/form now supports form.setInitialValues
method
which allows updating initial values after the form was initialized. This method is useful when you
want to update values that are used in form.reset
and to compare values for dirty fields state:
import { useEffect } from 'react';
import { useForm } from '@mantine/form';
function Demo() {
const form = useForm({
initialValues: {
name: '',
email: '',
},
});
useEffect(() => {
fetch('/api/user')
.then((res) => res.json())
.then((data) => {
// Update initial values after form was initialized
// These values will be used in form.reset
// and to compare values to get dirty state
form.setInitialValues(data);
form.setValues(data);
});
}, []);
}
7.0.2
What's Changed
[@mantine/dates]
Fix DatePickerInput and other similar inputs not having correct height when used without placeholder[@mantine/core]
MultiSelect: Fix check icon not displayed in selected grouped options[@mantine/dates]
Fix broken esm imports of dayjs plugins (#4875)
New Contributors
- @BengtHagemeister made their first contribution in #4875
Full Changelog: 7.0.1...7.0.2
7.0.1
What's Changed
[@mantine/core]
Loader: Make dots loader look the same as in v6 (#4801)[@mantine/core]
Button: Fix incorrect disabled styles of outline variant (#4815)[@mantine/core]
Fix brokentheme.other
type override type in .d.ts files (#4831)[@mantine/core]
SegmentedControl: Fix error when selected item removed from the data array (#4122)[@mantine/core]
AppShell: FixAppShell.Main
not taking up full height (#4842)[@mantine/core]
Input: Fix incorrect focus styles whenerror
prop is set (#4832)[@mantine/core]
Addclearable
prop back to Select, MultiSelect and TagsInput components[@mantine/core]
Portal: Reduce output DOM structure to a single div element, adddata-portal
attribute to the root portal element to indentify portals in devtools[@mantine/code-highlight]
Add missing static classes on CodeHighlight and CodeHighlightTabs components[@mantine/hooks]
use-local-storage: Fix hook throwing error if local storage is blocked by user (#3259)[@mantine/tiptap]
FixonBlur
called each time controls are clicked (#3209)[@mantine/core]
Addaria-describedby
andaria-labelledby
attributes to Radio.Group, Checkbox.Group and Switch.Group components (#3170)[@mantine/core]
Spoiler: Addaria-expanded
andaria-controls
attributes to show/hide control (#3183)[@mantine/core]
Spoiler: Change tab order of the show/hide button to make it receive focus before the content (#3183)[@mantine/form]
Fix incorrect values type in deeply nested validation rules (#4735)[@mantine/dates]
DateTimePicker: Set seconds to 0 ifwithSecond
prop is not set (#4737)[@mantine/dropzone]
Fix Dropzone.FullScreen staying opened after file was droppped for the first time (#4580)[@mantine/core]
Modal: FixcloseButtonProps
not includingCloseButtonProps
(#4793)[@mantine/core]
Select: Fixid
prop not settingid
attribute on the input element (#4809)[@mantine/core]
Allow using custom keys intheme.spacing
and other similar values when theme is extended withcreateTheme
[@mantine/core]
PasswordInput: Fix input field not taking entire width of the field in Firefox[@mantine/core]
Add default props to Group and Stack to prevent unwanted inheritance[@mantine/core]
Menu: Fix dropdown opening whenkeepMounted
prop is set and outside click is registered[@mantine/core]
Select: Fix search value not updating when data array changes (#4822)[@mantine/core]
Fix broken colors override type (#4816)[@mantine/core]
Table: Fix row hover not working in dark mode whenstriped
prop is set (#4817)[@mantine/core]
Fix styles breaking if color scheme value in local storage is not valid
New Contributors
- @jason-lee88 made their first contribution in #4778
- @suenalaba made their first contribution in #4794
- @Brucia323 made their first contribution in #4800
- @WillKirkmanM made their first contribution in #4813
- @iamtomffee made their first contribution in #4818
- @mateuscqueiros made their first contribution in #4817
- @matheusvellone made their first contribution in #4816
- @DoubleJ-G made their first contribution in #4822
- @eluce2 made their first contribution in #4835
- @MrMaina100 made their first contribution in #4848
- @RobinTTY made their first contribution in #4842
- @jonavila made their first contribution in #4801
- @Codeprinz-1 made their first contribution in #4569
- @jopesh made their first contribution in #4792
- @chrisbendel made their first contribution in #4872
Full Changelog: 7.0.0...7.0.1
7.0.0 π
Migration to native CSS
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 instead- Components no longer support
sx
prop. You can useclassName
orstyle
props instead. styles
prop no longer supports nested selectors
It 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.
Vanilla extract integration
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.
System color scheme support
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 { MantineProvider, ColorSchemeScript } from '@mantine/core';
function Demo() {
return (
<>
<ColorSchemeScript defaultColorScheme="auto" />
<MantineProvider defaultColorScheme="auto">
<App />
</MantineProvider>
</>
);
}
Built-in color scheme manager
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:
import { useMantineColorScheme, Button, Group } from '@mantine/core';
function Demo() {
const { setColorScheme, clearColorScheme } = useMantineColorScheme();
return (
<Group>
<Button onClick={() => setColorScheme('light')}>Light</Button>
<Button onClick={() => setColorScheme('dark')}>Dark</Button>
<Button onClick={() => setColorScheme('auto')}>Auto</Button>
<Button onClick={clearColorScheme}>Clear</Button>
</Group>
);
}
CSS modules and PostCSS preset
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.
Global styles
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.
Mantine as a headless UI 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
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}>
<App />
</MantineProvider>
);
}
Components extend functions
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 { useState } from 'react';
import { TextInput, MantineProvider, createTheme } from '@mantine/core';
import classes from './Demo.module.css';
const theme = createTheme({
components: {
TextInput: TextInput.extends({
styles: (theme, props) => ({
input: {
fontSize: props.size === 'compact' ? theme.fontSizes.sm : undefined,
}
})
classNames: {
root: classes.root,
input: classes.input,
label: classes.label,
},
defaultProps: {
size: 'compact',
},
}),
},
});
function Demo() {
return (
<MantineProvider theme={theme}>
<App />
</MantineProvider>
);
}
classNames based on component props
You can now get component props in classNames and styles to conditionally apply styles.
This feature is a more powerful replacement for styles params.
import cx from 'clsx';
import { MantineProvider, createTheme, TextInput } from '@mantine/core';
import classes from './Demo.module.css';
const theme = createTheme({
components: {
TextInput: TextInput.extend({
classNames: (_theme, props) => ({
label: cx({ [classes.labelRequired]: props.required }),
input: cx({ [classes.inputError]: props.error }),
}),
}),
},
});
function Demo() {
return (
<MantineProvider theme={theme}>
<TextInput required label="Required input" placeholder="Required input" />
<TextInput error label="Input with error" placeholder="Input with error" mt="md" />
</MantineProvider>
);
}
.labelRequired {
color: var(--mantine-color-red-filled);
}
.inputError {
background-color: var(--mantine-color-red-light);
}
Components CSS variables
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:
import { Button, rem, Group, MantineProvider, createTheme } from '@mantine/core';
const theme = createTheme({
components: {
Button: Button.extend({
vars: (theme, props) => {
if (props.size === 'xxl') {
return {
root: {
'--button-height': rem(60),
'--button-padding-x': rem(30),
'--button-fz': rem(24),
},
};
}
if (props.size === 'xxs') {
return {
root: {
'--button-height': rem(24),
'--button-padding-x': rem(10),
'--button-fz': rem(10),
},
};
}
return { root: {} };
},
}),
},
});
function Demo() {
return (
<MantineProvider theme={theme}>
<Group>
<Button size="xxl">XXL Button</Button>
<Button size="xxs">XXS Button</Button>
</Group>
</MantineProvider>
);
}
New variants system
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:
import { Input, MantineProvider, createTheme } from '@mantine/core';
import classes from './Demo.module.css';
// It is better to add new variants in theme.components
// This way you will be able to use them in anywhere in the app
const theme = createTheme({
components: {
Input: Input.extend({ classNames: classes }),
},
});
function Demo() {
return (
<MantineProvider theme={theme}>
<Input variant="underline" placeholder="Underline input" />
<Input variant="filled" placeholder="Filled input" mt="md" />
</MantineProvider>
);
}
.input {
&[data-variant='underline'] {
border-bottom: rem(2px) solid;
border-radius: 0;
padding-left: 0;
padding-right: 0;
@mixin light {
border-color: var(--mantine-color-gray-3);
}
@mixin dark {
border-color: var(--mantine-color-dark-3);
}
&:focus {
border-color: var(--mantine-color-blue-filled);
}
}
}
New sizes system
There are multiple ways to customize component sizes:
- With
data-size
attribute - With component CSS variables
- With static CSS variables
Example of customizing [Button](https://mantine.dev/core/b...
6.0.21
Last 6.x patch
This is the last patch for 6.x (at least for a while), next version that will be released is 7.0.0. If you haven't checked v7 yet, you can review it here β https://v7.mantine.dev/
What's Changed
[@mantine/core]
Fix Radio and Checkbox components do not receive padding when a value of 0 is passed into the label prop (#4755)[@mantine/dates]
Fix incorrect accessible name set on DatePickerInput and other similar components (#4750)
New Contributors
Full Changelog: 6.0.20...6.0.21
6.0.20
What's Changed
[@mantine/dates]
Calendar: Fix incorrecthasNextLevel
prop type (#4682)[@mantine/core]
PasswordInput: Setautocomplete="off"
to prevent passwords logging in console (#4564)[@mantine/core]
BackgroundImage: Fix image not loading if given image url contains whitespace (#4715)[@mantine/dates]
Fix: DatePickerInput and DateTimePicker label click does not focusing the input (#4634)[@mantine/core]
PinInput: Fix OTP paste not working from Google Keyboard on Android (#4641)[@mantine/core]
Grid: Fixid
prop not being passed to the root element (#4666)[@mantine/tiptap]
Fix incorrect color displayed in ColorPickerControl (#4667)[@mantine/core]
Anchor: Fix incorrect inherited types from Text (#4695)
New Contributors
- @hiddenLadder made their first contribution in #4642
- @HarshitDoshi made their first contribution in #4692
- @marwinburesch made their first contribution in #4703
- @HoHieuLuc made their first contribution in #4667
- @lscheibel made their first contribution in #4666
- @saeidalidadi made their first contribution in #4641
- @rommelmamedov made their first contribution in #4634
- @blueagler made their first contribution in #4715
- @yeana-dev made their first contribution in #4712
Full Changelog: 6.0.19...6.0.20
6.0.19
What's Changed
[@mantine/dates]
DateTimePicker: Add option to get time input ref withtimeInputProps
[@mantine/hooks]
Fix unexpected breaking change introduced inuseResizeObserver
in the previous patch (#4632)[@mantine/dates]
Fix incorrect Calendar prop types definition (#4638)
New Contributors
- @raul-repos made their first contribution in #4630
Full Changelog: 6.0.18...6.0.19
6.0.18
What's Changed
[@mantine/core]
Spoiler: Fix control button flickering on rerender (#4512)[@mantine/tiptap]
Fix incorrect color displayed in color control in dark color scheme (#4560)[@mantine/core]
Pagination: Fix incorrect disabled styles when control node is changed to link (#4578)[@mantine/core]
Modal: Make body's zIndex same as overlay's to allow modals stacking (#4587)[@mantine/core]
Avatar: Fix incorrect placeholder icon dimensions (#4600)[@mantine/dates]
FixdefaultDate
overridingvalue
prop (#4624)
New Contributors
- @mattaningram made their first contribution in #4600
- @ItaiAxelrad made their first contribution in #4578
- @hellolol2016 made their first contribution in #4560
- @KurtGokhan made their first contribution in #4512
Full Changelog: 6.0.17...6.0.18
6.0.17
What's Changed
[@mantine/carousel]
Remove x.clickAllowed to support embla 8.x (#4357, #4174)[@mantine/core]
PasswordInput: Remove rightSection associated props to avoid confusion (#4436)[@mantine/core]
Menu: Fix up and down keys not working when first Menu.Item is disabled (#4411)[@mantine/spotlight]
Fixtarget
prop not working (#4494)[@mantine/core]
Switch: Fix incorrect label styles in RTL (#4515)[@mantine/core]
Slider: Fix decimal step without precision prop not working (#4538)[@mantine/core]
Rating: FixreadOnly
prop not working withdefaultValue
(#4525)[@mantine/core]
Modal: Migrate to dvh units to fix incorrect styles in mobile Safari (#4517)[@mantine/dates]
DateInput: Decoupleclearable
andallowDeselect
logic, allow disablingallowDeselect
ifclearable
is set (#4527)[@mantine/dates]
DatePickerInput: FixdefaultDate
prop not working (#4532)
New Contributors
- @connershoop made their first contribution in #4517
Full Changelog: 6.0.16...6.0.17
6.0.16
What's Changed
[@mantine/dates]
DatePicker: FixonMonthSelect
not passed down to Calendar component (#4441)[@mantine/prism]
Fix unexpected code margin when used withinTypographyStylesProvider
(#4452)[@mantine/dates]
DateTimePicker: FixonClick
function fromsubmitButtonProps
overriding default behavior (#4465)[@mantine/dates]
Fix date pickers placeholders not having correct color when parent input has error (#4469)[@mantine/core]
MultiSelect: FixportalProps
prop not working (#4485)[@mantine/core]
Fix rem units errors with svg elements in all components (#4491)[@mantine/dates]
DateInput: Fix stale calendar UI after clear button was clicked (#4486)[@mantine/core]
Slider: FixonChange
prop updates being ignored (#4497)
New Contributors
- @Bastian made their first contribution in #4497
- @aschenkuttel made their first contribution in #4491
- @alessandroaw made their first contribution in #4469
- @wojonet made their first contribution in #4465
- @thascoet made their first contribution in #4441
Full Changelog: 6.0.15...6.0.16