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:

import { createStyles } from '@mantine/core';
const useStyles = createStyles((theme) => ({
button: {
backgroundColor: theme.colors.blue[6],
color: theme.white,
padding: `${theme.spacing.md}px ${theme.spacing.lg}px`,
},
}));
function Demo() {
const classes = useStyles();
return <button className={classes.button}>My button</button>;
}

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:

Download more icon variants from https://tabler-icons.io/i/git-branch
New branch
You've created new branch fix-notifications from master
2 hours ago
Download more icon variants from https://tabler-icons.io/i/git-commit
Commits
You've pushed 23 commits to fix-notifications branch
52 minutes ago
Download more icon variants from https://tabler-icons.io/i/git-pull-request
Pull request
You've submitted a pull request Fix incorrect notification message (#187)
34 minutes ago
Download more icon variants from https://tabler-icons.io/i/message-dots
Code review
Robert Gluesticker left a code review on your pull request
12 minutes ago

Navigate between multiple pages with new Pagination component:

Color
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
import { Pagination } from '@mantine/core';
function Demo() {
return <Pagination total={10} />;
}

Chip component is an inline alternative to RadioGroup and MultiSelect components:

Color
Variant
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
import { Chip } from '@mantine/core';
function Demo() {
return <Chip>Awesome chip</Chip>
}

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:

  • Download more icon variants from https://tabler-icons.io/i/circle-check
    Clone or download repository from GitHub
  • Download more icon variants from https://tabler-icons.io/i/circle-check
    Install dependencies with yarn
  • Download more icon variants from https://tabler-icons.io/i/circle-check
    To start development server run npm start command
  • Download more icon variants from https://tabler-icons.io/i/circle-check
    Run tests to make sure your changes do not break the build
  • Download more icon variants from https://tabler-icons.io/i/circle-dashed
    Submit a pull request once you are done

TimeRangeInput component allows to capture time range from user:

:
:

New hooks

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