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:

Navigate between multiple pages with new Pagination component:

import { Pagination } from '@mantine/core';

function Demo() {
  return <Pagination total={10} />;
}

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

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:

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