A fully featured React components library
MIT License
Bot releases are visible (Hide)
Published by rtivital over 2 years ago
iconWidth
not applying actual width to the icon element in all inputsaria-activedescendant
attribute in Select and Autocomplete components on initial renderPublished by rtivital over 2 years ago
weekendDays
prop in all @mantine/dates
components that use Month
component as a base (DatePicker, Calendar, Month, etc.)autoComplete
and type
attributes are handled in MultiSelect, Autocomplete and Select componentstrapFocus
prop is set to false
(#1596 #1597)use-move
hook (used in Slide and ColorPicker) (missing passive option in event handler options)Published by rtivital over 2 years ago
interval.start()
function is called with use-interval
(#1498)use-form
hookPublished by rtivital over 2 years ago
FormList
type export to @mantine/form
packagetransitionTimingFunction
prop not working in Modal and Drawer components@mantine/dropzone
package (#1515)range is null
on image upload in RichTextEditor (#1514)openDropdownOnClear
prop to DatePicker and DateRangePicker components (#1497)Published by rtivital over 2 years ago
UseListStateHandlers
type export from @mantine/hooks
packageexitTransitionDuration
prop support to LoadingOverlay componentPublished by rtivital over 2 years ago
style
instead of sx
to set thumb position to improve Slider and RangeSlider performance (#1437)-
symbol in an empty NumberInput (#1445)sx
array type for strict TypeScript mode (#1447)@mantine/spotlight
Published by rtivital over 2 years ago
onKeyDown
prop not working correctly in MultiSelect componentregisterSpotlightActions
and removeSpotlightActions
not working correctly in @mantine/spotlight
(#1396)Enter
key not submitting form in Autocomplete component (#1364)Published by rtivital over 2 years ago
labelProp
color property getting overwritten by Divider component color (#1343)@emotion/*
packages versions to prevent mismatch when installing with npmPublished by rtivital over 2 years ago
View changelog with demos on Mantine docs website
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>
);
}
:focus-within
CSS selectorrenderDay
function:Published by rtivital over 2 years ago
@mantine/spotlight
(#1304)Published by rtivital over 2 years ago
name
to Dropzone hidden input to support uncontrolled formsform
prop handling in Select and MultiSelect componentsrole="alert"
to Alert component (#1269)rightSectionWidth
prop not working in NumberInput component (#1266)value
and onChange
types in RichTextEditor component (#1268)Published by rtivital over 2 years ago
dropdownPosition
default to flip
in Autocomplete component (#1197)@mantine/next
packagePublished by rtivital over 2 years ago
styles
prop on MantineProvider (#1166)filterDataOnExactSearchMatch
prop support to Select componentautoClose
spread to Notification component in @mantine/notifications
(#1129)allowLevelChange
prop not working with DateRangePicker component (#1157)Enter
key handling in Select componentPublished by rtivital over 2 years ago
!important
from InputWrapper stylesPublished by rtivital over 2 years ago
View changelog with demos on Mantine website
Notifications system functions were migrated to
custom events,
they are no longer depend on context and can be called in any part of application.
Old way with useNotifications
hook will work until version 5.0 release.
@mantine/notifications
now exports the following functions:
showNotification
– adds given notification to notifications list or queue depending on current state and limitupdateNotification
– updates notification that was previously added to the state or queuehideNotification
– removes notification with given id from notifications state and queuecleanNotifications
– removes all notifications from notifications state and queuecleanNotificationsQueue
– removes all notifications from queueSame as with styles
you can now add classes to all components with classNames
prop on MantineProvider.
This approach is useful when you want to styles components with utility based CSS libraries.
import { MantineProvider, Button } from '@mantine/core';
function App() {
return (
<MantineProvider classNames={{ Button: { root: 'button-root', label: 'button-label' } }}>
<Button>All Button components will have the classes above</Button>
</MantineProvider>
);
}
You can now set withCSSVariables
prop on MantineProvider to add
Mantine CSS variables from theme to :root
.
This option is useful when you want to use Mantine theme values with CSS/SCSS or css-in-js libraries that do not have Mantine theme context.
import { MantineProvider } from '@mantine/core';
function App() {
return (
<MantineProvider withCSSVariables>
<YourApp />
</MantineProvider>
);
}
Then you will be able to use variables anywhere in your CSS:
.my-button {
background-color: var(--mantine-color-blue-6);
font-family: var(--mantine-font-family);
line-height: var(--mantine-line-height);
}
All components now support arrays in sx prop. It can be to simultaneously use sx
prop and add it from props:
import { Button, Sx } from '@mantine/core';
interface MyButtonProps {
sx?: Sx;
}
function MyButton({ sx }) {
return <Button sx={[{ color: 'red' }, sx]}>My Button</Button>;
}
New Stack component is a replacement for Group with vertical direction.
New FloatingTooltip component – tooltip will follow mouse when it is over target element
AppShell now supports Aside
and Footer
components,
they work the same way as Navbar
and Header
component but render content on the opposite side:
import React, { useState } from 'react';
import {
AppShell,
Navbar,
Header,
Footer,
Aside,
Text,
MediaQuery,
Burger,
useMantineTheme,
} from '@mantine/core';
export default function AppShellDemo() {
const theme = useMantineTheme();
const [opened, setOpened] = useState(false);
return (
<AppShell
styles={{
main: {
background: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
},
}}
navbarOffsetBreakpoint="sm"
asideOffsetBreakpoint="sm"
fixed
navbar={
<Navbar p="md" hiddenBreakpoint="sm" hidden={!opened} width={{ sm: 200, lg: 300 }}>
<Text>Application navbar</Text>
</Navbar>
}
aside={
<MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
<Aside p="md" hiddenBreakpoint="sm" width={{ sm: 200, lg: 300 }}>
<Text>Application sidebar</Text>
</Aside>
</MediaQuery>
}
footer={
<Footer height={60} p="md">
Application footer
</Footer>
}
header={
<Header height={70} p="md">
<div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
<MediaQuery largerThan="sm" styles={{ display: 'none' }}>
<Burger
opened={opened}
onClick={() => setOpened((o) => !o)}
size="sm"
color={theme.colors.gray[6]}
mr="xl"
/>
</MediaQuery>
<Text>Application header</Text>
</div>
</Header>
}
>
<Text>Resize app to see responsive navbar in action</Text>
</AppShell>
);
}
gradient
propprecision
propMenu.Item
, List.Item
, Grid.Col
, etc.) can now be wrapper with other components and fragmentsuseLocalStorageValue
hook was renamed to useLocalStorage
(old hook is still exported from @mantine/hooks
)@mantine/next
package to simplify Next.js Link usage with Menu
styles
Published by rtivital over 2 years ago
Published by rtivital over 2 years ago
onClose
handler optional in Notification componentinputMode
to allow user to enter negative numbers on mobile in NumberInput componentapplyWhere
handler in use-list-state hookmaxSelectedValues
handling for controlled MultiSelectPublished by rtivital over 2 years ago
labelProps
, errorProps
, descriptionProps
props not working in all inputs@mantine/spotlight
(#1039)Global
component)Global
component – https://mantine.dev/theming/global-styles/#load-fonts
Published by rtivital over 2 years ago
precision
prop support to Slider and RangeSlider components (#1034)innerInput
Styles API selector not working in PasswordInput component (#1025)Published by rtivital over 2 years ago