A fully featured React components library
MIT License
Bot releases are visible (Hide)
Published by rtivital over 2 years ago
Rollback Group component changes from 4.0.3 patch
Published by rtivital over 2 years ago
useLocalStorageValue
hook was renamed to useLocalStorage
(old hook is still exported from @mantine/hooks
)@mantine/spotlight
package (#995)@mantine/modals
package (#947)radius
prop support to @mantine/spotlight
(#959)maxSelectedValues
counter not being reset after MulstiSelect was cleared (#949)Published by rtivital over 2 years ago
@mantine/next
package to simplify Next.js Link usage with MenuPublished by rtivital over 2 years ago
innerInput
to Styles API in PasswordInput component (#963)Published by rtivital over 2 years ago
View changelog with demos on Mantine website
Mantine UI is a new project with set of more than 120 responsive components built with Mantine.
All components support dark/light color scheme and Mantine theme customizations.
Mantine UI is free for everyone.
@mantine/core
package no longer exports CONTAINER_SIZES
variable<Prism trim={false} />
useForm
hook exported from @mantine/hooks
package is now deprecated, it will be removed in one of the next releases.Some props were renamed to make Mantine components more consistent:
padding
→ p
padding
→ px
children
→ label
variant
→ orientation
delay
→ closeDelay
noClickOutside
→ closeOnClickOutside
noFocusTrap
→ trapFocus
noEscape
→ closeOnEscape
noFocusTrap
→ trapFocus
hideCloseButton
→ withCloseButton
noFocusTrap
→ trapFocus
hideCloseButton
→ withCloseButton
noOverlay
→ withOverlay
noCloseOnEscape
→ closeOnEscape
noCloseOnClickOutside
→ closeOnClickOutside
noScrollLock
→ lockScroll
Most of components now support default props on MantineProvider:
import { MantineProvider, Button } from '@mantine/core';
function App() {
return (
<MantineProvider
defaultProps={{
Button: { color: 'red' },
Badge: { size: 'xl', radius: 0 },
// ... default props for other components
}}
>
{/* By default, Button will have red color */}
<Button>Red button</Button>
{/* Default color can be overwritten by props */}
<Button color="blue">Blue button</Button>
{/* By default, Badge will have xl size and 0 radius */}
<Badge>Badge</Badge>
</MantineProvider>
);
}
You can now get component styles params in MantineProvider styles
prop.
Each component that has Styles API now exports type that can be assigned to params
ComponentNameStylesParams
, for example, ButtonStylesParams
. This feature can be used to add more complex context styles that were not possible before:
import { MantineProvider, ButtonStylesParams } from '@mantine/core';
function Demo() {
return (
<MantineProvider
styles={{
Button: (theme, params: ButtonStylesParams) => ({
root: {
// use params to calculate dynamic styles
color: theme.colors[params.color || theme.primaryColor][1],
padding: params.size === 'lg' ? '15px 45px' : undefined,
},
}),
}}
/>
);
}
Nested MantineProviders will now inherit theme
override, emotionOptions
, defaultProps
and styles
from
parent provider if inherit
prop is set:
import { MantineProvider, Button } from '@mantine/core';
function App() {
return (
// Parent MantineProvider
<MantineProvider
theme={{ colorScheme: 'dark' }}
styles={{ Button: { root: { fontWeight: 400 } } }}
defaultProps={{ Badge: { variant: 'outline' } }}
emotionOptions={{ key: 'custom-cache' }}
>
<Button>Affected only by parent provider</Button>
{/*
Child MantineProvider, inherits theme, emotionOptions, defaultProps and styles
from parent MantineProvider. Other properties specified on child provider will override parent props.
For example, theme override will be: { colorScheme: 'dark', primaryColor: 'red' }
*/}
<MantineProvider theme={{ primaryColor: 'red' }} inherit>
<Button>Affected only by child provider</Button>
</MantineProvider>
</MantineProvider>
);
}
Mantine theme now includes two new properties: defaultRadius
and focusRing
.
defaultRadius
property is used to set border-radius on most components by default:
import { MantineProvider, Button } from '@mantine/core';
function App() {
return (
<MantineProvider theme={{ defaultRadius: 0 }}>
<Button>Zero radius button</Button>
<Button radius="xl">xl radius button</Button>
</MantineProvider>
);
}
With focusRing
property you can configure how focus ring is displayed:
auto
– display focus ring only when user navigates with keyboard (default)always
– display focus ring when user navigates with keyboard and mousenever
– focus ring is always hidden (not recommended)import { MantineProvider, Button } from '@mantine/core';
function App() {
return (
<MantineProvider theme={{ focusRing: 'always' }}>
<Button>Focus ring will be displayed when user clicks the button</Button>
</MantineProvider>
);
}
All components now support setting following props to control padding:
p
– sets padding
property on root elementpy
– sets padding-top
and padding-bottom
properties on root elementpx
– sets padding-right
and padding-left
properties on root elementpt
– sets padding-top
property on root elementpb
– sets padding-bottom
property on root elementpl
– sets padding-left
property on root elementpr
– sets padding-right
property on root elementimport { Paper, Container } from '@mantine/core';
function Demo() {
return (
<>
<Paper p={20} />
<Container px="xl" />
</>
);
}
createStyles function now works differently with references.
Instead of generating unique identifiers with each getRef
call it returns the same value for given argument:
// before 4.0.0
// getRef('icon') !== getRef('icon')
createStyles((theme, params, getRef) => {
const icon = getRef('icon');
return {
icon: { ref: icon },
parent: {
[`& .${icon}`]: { color: 'red' },
},
};
});
// in 4.0.0
// getRef('icon') === getRef('icon')
createStyles((theme, params, getRef) => ({
icon: { ref: getRef('icon') },
parent: {
[`& .${getRef('icon')}`]: { color: 'red' },
},
}));
New @mantine/form package is an enhanced version of useForm
hook that was previously exported from
@mantine/hooks
package. @mantine/form
introduces the following features:
@mantine/spotlight is a new package that lets you create
a command center for your application. It can be triggered with keyboard shortcut and programmatically
from anywhere in your application.
formatter
and parser
props to customize how value is displayed in the inputopenDelay
onChangeEnd
propblur
required
prop differently to support native browser validationmodules
propunderline
propm
, mx
, my
, mt
, etc.): <Button mx="-xl">Negative margins</Button>
onCancel
callback in @mantine/modals is now also called when confirm modal is closed without confirmationwithinPortal
propinitialLevel
prop not working in DateRangePicker componentfindDomNode
warning in @mantine/notifications while using strict react modePublished by rtivital over 2 years ago
Published by rtivital over 2 years ago
Published by rtivital over 2 years ago
Published by rtivital over 2 years ago
Fix props passing to Tabs.Tab component
Published by rtivital over 2 years ago
src
prop type to support null
(#865)Published by rtivital over 2 years ago
Published by rtivital over 2 years ago
onDropdownOpen
and onDropdownClose
props support to DatePicker and DateRangePicker componentsinitialLevel
prop not working in DateRangePicker componentopenRef
type in Dropzone componentautocomplete
attribute on Select componentPublished by rtivital over 2 years ago
Published by rtivital over 2 years ago
@mantine/dropzone
packageoverlay
selector to Modal component Styles APIPublished by rtivital over 2 years ago
imageProps
(props spread to the img element) in Avatar component (#780)Published by rtivital over 2 years ago
Published by rtivital over 2 years ago
MantineTheme['colors']
type (#713)MantineColor
and MantineThemeOther
types now can be overwritten (#715)radius
passthrough to @mantine/notificationsPublished by rtivital over 2 years ago
onChange
not being called in TimeInput component (#698)Published by rtivital almost 3 years ago
Published by rtivital almost 3 years ago
View changelog with demos on Mantine docs website
@mantine/ssr
package now supports RTL with Next.js and any other ssr environmentdir
property which must be set to rtl
to support all featuresonScrollPositionChange
handlersubtle
variantspan
, it is set to Grid columns
by defaultonReject
callback which is called when user tries to drop files that do not meet size or mime type requirementsallowStepSelect
prop on Stepper.Step
component which can be used to prevent user from reaching next steps before completing previousorder
proponTabChange
handler0
to make component feel more responsivetarget
with selector instead of elementtarget
prop to specify Portal target containerlimit
prop that can be used to improve performance of large data sets...others
props in modals.openContextModal
handlerselectOnBlur
propexitDuration
prop to specify unmount transition durationreverseActive
prop to reverse active items directionauto
sizertl
directioniconWidth
propshouldCreate
logic in creatable Select