mantinedev/mantine 2.5.0

on GitHub

Release demos

View changelog with demos on Mantine website

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, theme.spacing.lg],
  },
}));

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 (built by @EmilMalanczak):

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

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 (built by @achmurali):

New hooks

• use-pagination – manage pagination state (built by @EmilMalanczak)
• use-focus-return – capture last focused element on the page and return focus to it once condition is met

New features

• New Dialog component lets you display fixed overlay at any side of the screen
• 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']} /> (built by @cstrat)
• NumberInput component now supports decimal steps and precision