UMD builds deprecation
All @mantine/
packages will no longer default to umd builds via browser
field in package.json
.
This change will simplify tree shacking for Webpack and should not affect your Next.js, Gatsby, Vite or CRA applications.
react-jss peer dependency removal
All @mantine/
packages no longer require react-jss installation as peer dependency – it will be installed automatically as @mantine/core dependency.
Instead of direct react-jss usage @mantine/core now exports createStyles function
and a set of components to implement server side rendering.
createStyles function
New createStyles
function lets you create styles with Mantine theme:
Note that it will only work if your application is wrapped with MantineProvider.
Builtin server side rendering
@mantine/core package now comes with components to simplify server side rendering setup with Next.js and any other environment. Checkout Next.js guide to learn more.
New package @mantine/rte
@mantine/rte is a new package with RichTextEditor component. Component integrates seamlessly with your MantineTheme and provides all basic rich text editing features:
New components
Timeline component lets you show list of events in chronological order:
Navigate between multiple pages with new Pagination component:
Chip component is an inline alternative to RadioGroup and MultiSelect components:
With Dialog component you can display fixed overlay at any side of the screen:
List component is a wrapper for ul and ol lists with option to replace bullets with icons:
- Clone or download repository from GitHub
- Install dependencies with yarn
- To start development server run npm start command
- Run tests to make sure your changes do not break the build
- Submit a pull request once you are done
TimeRangeInput component allows to capture time range from user:
New hooks
- use-pagination – manage pagination state
- use-focus-return – capture last focused element on the page and return focus to it once condition is met
New features
- Button component now supports new
white
variant - Text now supports font styles inheritance from parent element with
inherit
prop - Paper component now supports
withBorder
prop to add 1px border - ActionIcon component now supports
loading
state (same as in Button component) - SegmentedControl component now supports setting data as an array of strings
<SegmentedControl data={['React', 'Angular', 'Svelte', 'Vue']} />
- NumberInput component now supports decimal steps and precision