A fully featured React components library
MIT License
Bot releases are visible (Hide)
Published by rtivital about 1 year ago
[@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)Full Changelog: https://github.com/mantinedev/mantine/compare/7.0.1...7.0.2
Published by rtivital about 1 year ago
[@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 broken theme.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: Fix AppShell.Main
not taking up full height (#4842)[@mantine/core]
Input: Fix incorrect focus styles when error
prop is set (#4832)[@mantine/core]
Add clearable
prop back to Select, MultiSelect and TagsInput components[@mantine/core]
Portal: Reduce output DOM structure to a single div element, add data-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]
Fix onBlur
called each time controls are clicked (#3209)[@mantine/core]
Add aria-describedby
and aria-labelledby
attributes to Radio.Group, Checkbox.Group and Switch.Group components (#3170)[@mantine/core]
Spoiler: Add aria-expanded
and aria-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 if withSecond
prop is not set (#4737)[@mantine/dropzone]
Fix Dropzone.FullScreen staying opened after file was droppped for the first time (#4580)[@mantine/core]
Modal: Fix closeButtonProps
not including CloseButtonProps
(#4793)[@mantine/core]
Select: Fix id
prop not setting id
attribute on the input element (#4809)[@mantine/core]
Allow using custom keys in theme.spacing
and other similar values when theme is extended with createTheme
[@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 when keepMounted
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 when striped
prop is set (#4817)[@mantine/core]
Fix styles breaking if color scheme value in local storage is not validFull Changelog: https://github.com/mantinedev/mantine/compare/7.0.0...7.0.1
Published by rtivital about 1 year ago
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 { MantineProvider, ColorSchemeScript } from '@mantine/core';
function Demo() {
return (
<>
<ColorSchemeScript defaultColorScheme="auto" />
<MantineProvider defaultColorScheme="auto">
<App />
</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:
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 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}>
<App />
</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 { 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>
);
}
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);
}
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>
);
}
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);
}
}
}
There are multiple ways to customize component sizes:
data-size
attributeExample of customizing Button size with data-size
attribute:
import { Input, createTheme, MantineProvider } from '@mantine/core';
import classes from './Demo.module.css';
const theme = createTheme({
components: {
Input: Input.extend({ classNames: classes }),
},
});
function Demo() {
return (
<MantineProvider theme={theme}>
<Input placeholder="Size XXL" size="xxl" />
<Input placeholder="Size XXS" size="xxs" mt="md" />
</MantineProvider>
);
}
.wrapper {
&[data-size='xxl'] {
& .input {
padding-left: rem(28px);
padding-right: rem(28px);
height: rem(68px);
font-size: rem(28px);
}
}
&[data-size='xxs'] {
& .input {
padding-left: rem(10px);
padding-right: rem(10px);
height: rem(28px);
font-size: rem(10px);
}
}
}
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.
import {
Button,
Group,
MantineProvider,
defaultVariantColorsResolver,
VariantColorsResolver,
parseThemeColor,
rem,
rgba,
darken,
} from '@mantine/core';
const variantColorResolver: VariantColorsResolver = (input) => {
const defaultResolvedColors = defaultVariantColorsResolver(input);
const parsedColor = parseThemeColor({
color: input.color || input.theme.primaryColor,
theme: input.theme,
});
// Override some properties for variant
if (parsedColor.isThemeColor && parsedColor.color === 'lime' && input.variant === 'filled') {
return { ...defaultResolvedColors, color: 'var(--mantine-color-black)' };
}
// Completely override variant
if (input.variant === 'light') {
return {
background: rgba(parsedColor.value, 0.1),
hover: rgba(parsedColor.value, 0.15),
border: `${rem(1)} solid ${parsedColor.value}`,
color: darken(parsedColor.value, 0.1),
};
}
// Add new variants support
if (input.variant === 'danger') {
return {
background: 'var(--mantine-color-red-9)',
hover: 'var(--mantine-color-red-8)',
color: 'var(--mantine-color-white)',
border: 'none',
};
}
return defaultResolvedColors;
};
function Demo() {
return (
<MantineProvider theme={{ variantColorResolver }}>
<Group>
<Button color="lime.4" variant="filled">
Lime filled button
</Button>
<Button color="orange" variant="light">
Orange light button
</Button>
<Button variant="danger">Danger button</Button>
</Group>
</MantineProvider>
);
}
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 { MantineProvider, createTheme } from '@mantine/core';
const theme = createTheme({
scale: 1.6,
});
function Demo() {
return (
<MantineProvider theme={theme}>
<App />
</MantineProvider>
);
}
All components that support color
prop now support the following color values:
theme.colors
, for example, blue
theme.colors
index reference, for example, blue.5
#fff
, rgba(0, 0, 0, 0.5)
, hsl(0, 0%, 100%)
import { Group, Button, Text } from '@mantine/core';
function Demo() {
return (
<>
<Text size="sm" mb={5} fw={500}>
Filled variant
</Text>
<Group>
<Button color="cyan">Theme color</Button>
<Button color="#1D72FE">Hex color</Button>
</Group>
<Text size="sm" mb={5} mt="md" fw={500}>
Light variant
</Text>
<Group>
<Button variant="light" color="cyan">
Theme color
</Button>
<Button variant="light" color="#1D72FE">
Hex color
</Button>
</Group>
<Text size="sm" mb={5} mt="md" fw={500}>
Outline variant
</Text>
<Group>
<Button variant="outline" color="cyan">
Theme color
</Button>
<Button variant="outline" color="#1D72FE">
Hex color
</Button>
</Group>
</>
);
}
Classes of each component are now available in Component.classes
object. For example, you can
find Button classes in Button.classes
.
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 DirectionProvider
theme.loader
was removed, you can now configure default loader with default props of Loader componenttheme.transitionTimingFunction
was removedtheme.focusRingStyles
was replaced with theme.focusClassName
theme.activeStyles
was replaced with theme.activeClassName
theme.globalStyles
was removedtheme.fn
functions were removed, some of the functions are available as standalone utilities
theme.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 { MantineProvider } from '@mantine/core';
import { generateColors } from '@mantine/colors-generator';
function Demo() {
return (
<MantineProvider
theme={{
colors: {
'pale-blue': generateColors('#375EAC'),
},
}}
>
<App />
</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.
Loader component is now built with CSS only. This change improves performance and reduces
HTML output of the component.
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.
import { Progress } from '@mantine/core';
function Demo() {
return (
<Progress.Root size="xl">
<Progress.Section value={35} color="cyan">
<Progress.Label>Documents</Progress.Label>
</Progress.Section>
<Progress.Section value={28} color="pink">
<Progress.Label>Photos</Progress.Label>
</Progress.Section>
<Progress.Section value={15} color="orange">
<Progress.Label>Other</Progress.Label>
</Progress.Section>
</Progress.Root>
);
}
Table component changes:
Table.Tr
, Table.Td
, etc.borderColor
, withRowBorders
, stripedColor
, highlightOnHoverColor
withBorder
prop was renamed to withTableBorder
fontSize
prop was removed, use fz
style prop insteadTable.ScrollContainer
component to create scrollable tableimport { Table } from '@mantine/core';
function Demo() {
const rows = elements.map((element) => (
<Table.Tr key={element.name}>
<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>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>
);
}
Group 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 gap
Group
now supports new preventGrowOverflow
prop which allows customizing how group items will behave when they grow larger than their dedicated spacetabsList
renamed to list
TabProps
type was renamed to TabsTabProps
onTabChange
prop was renamed to onChange
Tabs.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 rightSection
uppercase
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.
import { SimpleGrid } from '@mantine/core';
function Demo() {
return (
<SimpleGrid
cols={{ base: 1, sm: 2, lg: 5 }}
spacing={{ base: 10, sm: 'xl' }}
verticalSpacing={{ base: 'md', sm: 'xl' }}
>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</SimpleGrid>
);
}
Grid now uses object format in gutter
, offset
, span
and order props,
all props now work the same way as style props.
import { Grid } from '@mantine/core';
function Demo() {
return (
<Grid>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>1</Grid.Col>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>2</Grid.Col>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>3</Grid.Col>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>4</Grid.Col>
</Grid>
);
}
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 props
import { Image } from '@mantine/core';
function Demo() {
return (
<Image
radius="md"
src={null}
h={200}
fallbackSrc="https://placehold.co/600x400?text=Placeholder"
/>
);
}
Spotlight changes:
SpotlightProvider
was renamed to Spotlight
useSpotlight
hook was removed, use spotlight
object insteadactions
prop now uses a different data formatSpotlight
component now uses compound components pattern for advanced customizationimport { useState } from 'react';
import { Spotlight, spotlight } from '@mantine/spotlight';
import { Button } from '@mantine/core';
import { IconSearch } from '@tabler/icons-react';
const data = ['Home', 'About us', 'Contacts', 'Blog', 'Careers', 'Terms of service'];
function Demo() {
const [query, setQuery] = useState('');
const items = data
.filter((item) => item.toLowerCase().includes(query.toLowerCase().trim()))
.map((item) => <Spotlight.Action key={item} label={item} />);
return (
<>
<Button onClick={spotlight.open}>Open spotlight</Button>
<Spotlight.Root query={query} onQueryChange={setQuery}>
<Spotlight.Search placeholder="Search..." leftSection={<IconSearch stroke={1.5} />} />
<Spotlight.ActionsList>
{items.length > 0 ? items : <Spotlight.Empty>Nothing found...</Spotlight.Empty>}
</Spotlight.ActionsList>
</Spotlight.Root>
</>
);
}
Carousel now uses object format for responsive values in
slideSize
and slideGap
props instead of breakpoints
prop:
import { Carousel } from '@mantine/carousel';
function Demo() {
return (
<Carousel
withIndicators
height={200}
slideSize={{ base: '100%', sm: '50%', md: '33.333333%' }}
slideGap={{ base: 0, sm: 'md' }}
loop
align="start"
>
<Carousel.Slide>1</Carousel.Slide>
<Carousel.Slide>2</Carousel.Slide>
<Carousel.Slide>3</Carousel.Slide>
{/* ...other slides */}
</Carousel>
);
}
@mantine/prism
package was deprecated in favor of @mantine/code-highlight
package. The new package uses highlight.js instead of Prism.
import { CodeHighlightTabs } from '@mantine/code-highlight';
import { TypeScriptIcon, CssIcon } from '@mantine/ds';
const tsxCode = `
function Button() {
return <button>Click me</button>;
}
`;
const cssCode = `
.button {
background-color: transparent;
color: var(--mantine-color-blue-9);
}
`;
function getFileIcon(fileName: string) {
if (fileName.endsWith('.ts') || fileName.endsWith('.tsx')) {
return <TypeScriptIcon size={18} />;
}
if (fileName.endsWith('.css')) {
return <CssIcon size={18} />;
}
return null;
}
function Demo() {
return (
<CodeHighlightTabs
getFileIcon={getFileIcon}
code={[
{
fileName: 'Button.tsx',
code: tsxCode,
language: 'tsx',
},
{
fileName: 'Button.module.css',
code: cssCode,
language: 'scss',
},
]}
/>
);
}
New Fieldset component:
import { Fieldset } from '@mantine/core';
function Demo() {
return (
<Fieldset legend="Personal information">
<TextInput label="Your name" placeholder="Your name" />
<TextInput label="Email" placeholder="Email" mt="md" />
</Fieldset>
);
}
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.
import { useState } from 'react';
import { Input, InputBase, Combobox, useCombobox } from '@mantine/core';
const groceries = ['🍎 Apples', '🍌 Bananas', '🥦 Broccoli', '🥕 Carrots', '🍫 Chocolate'];
function Demo() {
const combobox = useCombobox({
onDropdownClose: () => combobox.resetSelectedOption(),
});
const [value, setValue] = useState<string | null>(null);
const options = groceries.map((item) => (
<Combobox.Option value={item} key={item}>
{item}
</Combobox.Option>
));
return (
<Combobox
store={combobox}
onOptionSubmit={(val) => {
setValue(val);
combobox.closeDropdown();
}}
>
<Combobox.Target>
<InputBase
component="button"
pointer
rightSection={<Combobox.Chevron />}
onClick={() => combobox.toggleDropdown()}
>
{value || <Input.Placeholder>Pick value</Input.Placeholder>}
</InputBase>
</Combobox.Target>
<Combobox.Dropdown>
<Combobox.Options>{options}</Combobox.Options>
</Combobox.Dropdown>
</Combobox>
);
}
New TagsInput component based on Combobox component.
The component is similar to MultiSelect but allows entering custom values.
import { TagsInput } from '@mantine/core';
function Demo() {
return (
<TagsInput
label="Press Enter to submit a tag"
placeholder="Pick tag from list"
data={['React', 'Angular', 'Svelte']}
/>
);
}
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:
import { TextInput, rem } from '@mantine/core';
import { IconExclamationCircle } from '@tabler/icons-react';
function Demo() {
return (
<>
<TextInput placeholder="Error as boolean" label="Error as boolean" error />
<TextInput
mt="md"
placeholder="Error as react node"
label="Error as react node"
error="Something went wrong"
/>
<TextInput
mt="md"
placeholder="Without error styles on input"
label="Without error styles on input"
error="Something went wrong"
withErrorStyles={false}
rightSectionPointerEvents="none"
rightSection={
<IconExclamationCircle
style={{ width: rem(20), height: rem(20) }}
color="var(--mantine-color-error)"
/>
}
/>
</>
);
}
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:
import { Button, Group } from '@mantine/core';
function Demo() {
return (
<Group justify="center">
<Button hiddenFrom="sm" color="orange">
Hidden from sm
</Button>
<Button visibleFrom="sm" color="cyan">
Visible from sm
</Button>
<Button visibleFrom="md" color="pink">
Visible from md
</Button>
</Group>
);
}
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 never
target
prop, use portalProps
insteadsizes
prop, use CSS variables to customize sizes on theme insteaduseComponentDefaultProps
hook was renamed to useProps
withinPortal
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 color
width
prop, use w
style prop insteadspacing
prop was renamed to gap
Input
based components icon
prop was renamed to leftSection
variant
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 prop
underline
, color
, strikethrough
, italic
, transform
, align
and weight
prop – use style props insteadinnerRef
prop was renamed to ref
x
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 transitionProps
rootRef
prop which allows using them with Tooltip and other similar componentsPublished by rtivital about 1 year ago
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/
[@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)Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.20...6.0.21
Published by rtivital about 1 year ago
[@mantine/dates]
Calendar: Fix incorrect hasNextLevel
prop type (#4682)[@mantine/core]
PasswordInput: Set autocomplete="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: Fix id
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)Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.19...6.0.20
Published by rtivital about 1 year ago
[@mantine/dates]
DateTimePicker: Add option to get time input ref with timeInputProps
[@mantine/hooks]
Fix unexpected breaking change introduced in useResizeObserver
in the previous patch (#4632)[@mantine/dates]
Fix incorrect Calendar prop types definition (#4638)Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.18...6.0.19
Published by rtivital about 1 year ago
[@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]
Fix defaultDate
overriding value
prop (#4624)Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.17...6.0.18
Published by rtivital over 1 year ago
[@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]
Fix target
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: Fix readOnly
prop not working with defaultValue
(#4525)[@mantine/core]
Modal: Migrate to dvh units to fix incorrect styles in mobile Safari (#4517)[@mantine/dates]
DateInput: Decouple clearable
and allowDeselect
logic, allow disabling allowDeselect
if clearable
is set (#4527)[@mantine/dates]
DatePickerInput: Fix defaultDate
prop not working (#4532)Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.16...6.0.17
Published by rtivital over 1 year ago
[@mantine/dates]
DatePicker: Fix onMonthSelect
not passed down to Calendar component (#4441)[@mantine/prism]
Fix unexpected code margin when used within TypographyStylesProvider
(#4452)[@mantine/dates]
DateTimePicker: Fix onClick
function from submitButtonProps
overriding default behavior (#4465)[@mantine/dates]
Fix date pickers placeholders not having correct color when parent input has error (#4469)[@mantine/core]
MultiSelect: Fix portalProps
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: Fix onChange
prop updates being ignored (#4497)Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.15...6.0.16
Published by rtivital over 1 year ago
[@mantine/core]
Alert: Fix incorrect close button styles in filled variant[@mantine/core]
Fix incorrect Slider and RangeSlider precision with keyboard events[@mantine/core]
PinInput: Fix incorrect focus behavior when Backspace
key is pressed (#4438)[@mantine/core]
Table: Fix withColumnBorders
prop not working (#4443)[@mantine/spotlight]
Improve search performance for large actions lists (#4457)Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.14...6.0.15
Published by rtivital over 1 year ago
[@mantine/hooks]
use-window-event: Improve events type (#4423)[@mantine/core]
MultiSelect: Fix hoverOnSearchChange
not working correctly when creatable
prop is set (#4344)[@mantine/tiptap]
Add option to configure initial state of external link control (#4373)[@mantine/core]
PinInput: Fix incorrect Backspace key handling (#4379)[@mantine/core]
Table: Fix table styles applied to the nested table elements, for example in dropdowns (#4393)[@mantine/core]
Image: Fix image alt overflow in Firefox (#4410)Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.13...6.0.14
Published by rtivital over 1 year ago
[@mantine/dates]
Fix nextIcon
and previousIcon
props not passed to Calendar component (#4273)[@mantine/core]
AppShell: Fix wrong padding when navbarOffsetBreakpoint
and asideOffsetBreakpoint
have the same value (#4281)[@mantine/core]
Select: Fix unexpected horizontal scrollbar in items with long text (#4296)[@mantine/core]
NumberInput: Fix missing disabled controls styles (#4314)[@mantine/core]
Fix Select/MultiSelect scrolling page when transitionProps
are set (#4327)[@mantine/core]
Chip: Fix unexpected line break when children are not a plain string (#4328)Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.11...6.0.13
Published by rtivital over 1 year ago
[@mantine/core]
Improve inputs disabled styles handling inside fieldset
elements (#4152)[@mantine/core]
Badge: Expose BadgeVariant
type (#4215)[@mantine/core]
ThemeIcon: Expose ThemeIconVariant
type (#4216)[@mantine/core]
ColorInput: Add option to set eye dropper aria-label though prop (#4227)[@mantine/core]
ColorPicker: Fix inaccurate numbers rounding in rgba and hex colors converters (#4238)[@mantine/core]
MultiSelect: Fix layout shifts in Safari when input is focused (#4249)[@mantine/core]
Rating: Add CSS color values support in color
prop (#4251)[@mantine/dates]
Add missing nextIcon
/previousIcon
types to all components (#4180)Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.10...6.0.11
Published by rtivital over 1 year ago
[@mantine/core]
Remove invalid autocomplete
attribute from JsonInput and ColorInput (#4140)[@mantine/core]
Tabs: Fix aria-controls
set to id of panel that does not exist (#4142)[@mantine/core]
Input: Add icon offset to unstyled input variant (#4119)[@mantine/core]
Popover: Fix incorrect closeOnClickOutside
logic (#4148)[@mantine/dates]
Add callback function support to weekdayFormat
prop (#4156)[@mantine/core]
MultiSelect: Fix incorrect hovered item index when disableSelectedItemFiltering
is set and last item is selected (#4168)Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.9...6.0.10
Published by rtivital over 1 year ago
[@mantine/core]
MutiSelect: Fix error placeholder not respecting theme.primaryShade
(#4113)[@mantine/core]
Preserve whitespace in Select, MultiSelect and Autocomplete items (#4094)[@mantine/core]
Menu: Fix incorrect click outside logic (#4114)[@mantine/core]
Slider: Fix incorrect trackContainer
height (#4116)[@mantine/hooks]
use-focus-trap: Fix aria hider not being released when multiple focus traps being used at the same time (#4118)[@mantine/dates]
Fix nextIcon
and previousIcon
props not working in Calendar based components (#4126)[@mantine/hooks]
use-local-storage: Add dynamic local storage key
support (#4127)Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.8...6.0.9
Published by rtivital over 1 year ago
[@mantine/core]
Accordion: Fix chevron width being defined in px instead of rem (#3935)[@mantine/core]
Modal: Add missing sx
prop (#4058)[@mantine/core]
Dialog: Fix viewport overflowing on small screens (#4090)[@mantine/core]
MultiSelect: Add option to get value index in ValueCopmonent
(#3928)[@mantine/dates]
DatePickerInput: Fix withCellSpacing
not working (#3993)[@mantine/core]
Menu: Fix incorrect logic for onChange
, onOpen
and onClose
callbacks (#4030)[@mantine/core]
Sort theme.breakpoints
during theme override merging on MantineProvider (#4051)[@mantine/core]
Notification: Fix incorrect border styles (#4054)[@mantine/dropzone]
Reexport FileRejection
type from react-dropzone
(#4065)[@mantine/core]
Slider: Fix slider track not respecting parent container width (#4083)Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.7...6.0.8
Published by rtivital over 1 year ago
[@mantine/core]
Fix portalProps
types and override order in all components (#4009)[@mantine/core]
ColorInput: Fix onChange()
executed after onBlur()
(#4012)[@mantine/dates]
DatePickerInput: fix type
field always displaying generic value in autocomplete (#4017)[@mantine/core]
Notification: Add withBorder
prop (#4022)[@mantine/dates]
Fix dates range displayed incorrectly when given dates have time that is close to the next day (#4028)[@mantine/core]
ColorInput: Fix onChangeEnd
not being called when color is picked with eyedropper (#4031)[@mantine/core]
Slider: Fix incorrect marks click behavior (#4000)Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.6...6.0.7
Published by rtivital over 1 year ago
[@mantine/core]
MultiSelect: Fix incorrect default value max-width (#3958)[@mantine/dates]
Fix onNextDecade
, onPreviousDecade
and similar handlers not working on some components (#3946)[@mantine/core]
Modal: Fix incorrect close button position when there is no title (#3939)[@mantine/core]
Image: Fix imageProps overrding component props (#3985)[@mantine/form]
Rollback form.reset
type change (#3956)[@mantine/dates]
Fix page scrolling on ArrowUp/ArrowDown keyboard navigation (#3925)[@mantine/dates]
DateInput: Fix defaultDate
not working (#3950)[@mantine/dates]
Add missing props from DatePicker (#3951)[@mantine/dates]
Fix weekday labeling when dayjs.locale
is used (#3954)[@mantine/core]
MultiSelect: Fix broken styles in Safari (#3980)[@mantine/core]
NumberInput: Fix onChange
not being called correctly (#3984)[@mantine/dates]
DatePicker: Fix component throwing error when type
changes (#3989)[@mantine/core]
NumberInput: Add thousandsSeparator
(#3990)[@mantine/core]
ColorPicker: Fix color picker state not being updated when component is uncontrolled and color swatch is clickedFull Changelog: https://github.com/mantinedev/mantine/compare/6.0.5...6.0.6
Published by rtivital over 1 year ago
[@mantine/core]
Change Modal and Drawer to use native scrollbars by default, remove excessive markup (#3854)[@mantine/core]
Drawer: Fix styles api on MantineProvider not working[@mantine/core]
Button: Fix hover styles not overwritten with &:hover
selector (#3920)[@mantine/dates]
Change tab order behavior to match native date pickers (#3876)[@mantine/dates]
Fix tab order with hideOutsideDates
prop (#3849)[@mantine/form]
Fix incorrect form errors behavior with form.resorderListItem
and form.insertListItem
handlers (#3828)[@mantine/core]
Popover: Add option to change offset for each axis individually (#3775)[@mantine/core]
MultiSelect: Fix disableSelectedItemFiltering
prop not working with searchable
option (#3894)[@mantine/core]
Autocomplete: Fix incorrect aria-
attributes on input element (#3900)[@mantine/core]
TypographyStylesProvider: Fix incorrect breakpoints used in styles (#3902)[@mantine/form]
Allow to specify values partial in form.resetDirty
(#3906)[@mantine/core]
Slider: Fix incorrect behavior when slider is disabled and marks are clicked (#3856)Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.3...6.0.5
Published by rtivital over 1 year ago
[@mantine/dates]
Calendar: Improve tab navigation order in decade/year/month views (#3728)[@mantine/core]
Fix NumberInput precision formatting (#3756)[@mantine/hooks]
use-timeout: Memoize clear
and start
functions (#3801)[@mantine/core]
Modal: Fix unexpected attributes added to root dom node (#3802)[@mantine/dates]
DatePickerInput: Fix unexpected attribute valueFormat
being added to root dom node (#3804)[@mantine/form]
Fix some object being incorrectly cloned in form.setFieldValue
handler (#3805)[@mantine/tiptap]
Update installation instructions to include tiptap/pm package (#3806)[@mantine/core]
Accordion: Fix parts of lowercase letters being cut off by overflow: hidden (#3812)[@mantine/styles]
Expose theme breakpoints as css variables (#3824)[@mantine/core]
Fix Modal/Drawer content scrolling over header (#3829)[@mantine/core]
Pagination: Fix incorrect chevron icons in RTL (#3809)[@mantine/core]
Select: Fix shadow
prop not working (#3807)[@mantine/core]
Pagination: Fix spacing={0}
nor working[@mantine/form]
Make isEmail validation simpler to allow usage of dots and plus signsFull Changelog: https://github.com/mantinedev/mantine/compare/6.0.2...6.0.3