Mantine monthly

Subscribe
Archives
September 1, 2021

Mantine 2.4.0 is out

Release demos

View all demos on Mantine website

Components redesign

Alert component was redesigned, it now supports icon and close button:

Снимок экрана 2021-09-01 в 12 51 07

Blockquote component was redesigned to look more neutral:

Снимок экрана 2021-09-01 в 12 51 13

New components

SimpleGrid component allows you to create responsive grid with equal width columns:

<SimpleGrid cols={3}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</SimpleGrid>

Collapse component allows you to animate presence with slide down transition

import { useState } from 'react';
import { Button, Collapse } from '@mantine/core';

function Demo() {
  const [opened, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen((o) => !o)}>
        Toggle content
      </Button>

      <Collapse in={opened}>
        {/* content... */}
      </Collapse>
    </>
  );
}

New features

  • Grid component now supports setting breakpoints via Col component props (built by @everek):
import React from 'react';
import { Grid, Col } from '@mantine/core';

function Demo() {
  return (
    <Grid>
      <Col span={12} md={6} lg={3}>1</Col>
      <Col span={12} md={6} lg={3}>2</Col>
      <Col span={12} md={6} lg={3}>3</Col>
      <Col span={12} md={6} lg={3}>4</Col>
    </Grid>
  );
}
  • Text, Button, Badge and ThemeIcon components now support new gradient variant:

Снимок экрана 2021-09-01 в 12 53 51

  • Button component now supports loading state
  • Text component now supports setting -webkit-line-clampvia prop to limit amount of lines
  • Center component now supports inline prop to center inline elements
  • Initial highlighted item in Menu component no longer set on menu open – user will have to use up or down arrow at least one to make selection visible
  • Card, Paper and Avatar components now support setting custom component as root element via component prop
  • Text component now supports special dimmed color and inline prop to set line-height to 1
  • Select, Autocomplete and MultiSelect dropdowns are closed when input is clicked (built by @achmurali)
  • Components that support changing root element with component prop (Button, ActionIcon, etc.) now have better TypeScript support
  • Loader component now supports 2 new variants
  • Select component now supports onSearchChange event which allows to change data based on search query
  • Indeterminate and checked icons were replaced in Checkbox to make component more recognizable
  • Menu, Accordion and Card components now support simpler imports, e.g. <Menu.Item /> instead of separate <MenuItem /> import
  • NativeSelect, Select and MultiSelect components now support icon in right section changing
  • Modal and Drawer components now return focus to last active element after being closed
  • Overlay component now supports setting gradient instead of background color

Project changes

  • Mantine website has now better search built with Autocomplete component (built by @achmurali)
  • Changelog entries are now organized by versions instead of single page
Don't miss what's next. Subscribe to Mantine monthly:
Powered by Buttondown, the easiest way to start and grow your newsletter.