Version 2.5.0

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:

New branch
You've created new branch fix-notifications from master
2 hours ago
Commits
You've pushed 23 commits to fix-notifications branch
52 minutes ago
Pull request
You've submitted a pull request Fix incorrect notification message (#187)
34 minutes ago
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} />;
}

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

Color
Variant
Spacing
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
import { Chips, Chip } from '@mantine/core';
function Demo() {
return (
<Chips>
<Chip value="react">React</Chip>
<Chip value="ng">Angular</Chip>
<Chip value="svelte">Svelte</Chip>
<Chip value="vue">Vue</Chip>
</Chips>
);
}

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

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