Version 2.4.0

Components redesign

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

import { Alert } from '@mantine/core';
import { IconAlertCircle } from '@tabler/icons';

function Demo() {
  return (
    <Alert icon={<IconAlertCircle size={16} />} title="Bummer!" color="red">
      Something terrible happened! You made a mistake and there is no going back, your data was lost forever!
    </Alert>
  );
}

Blockquote component was redesigned to look more neutral:

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

function Demo() {
  return (
    <Blockquote cite="– Forrest Gump">
      Life is like an npm install – you never know what you are going to get.
    </Blockquote>
  );
}

New components

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

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

function Demo() {
  return (
    <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

New features

Grid component now supports setting breakpoints via Col component props:

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

function Demo() {
  return (
    <Grid>
      <Grid.Col md={6} lg={3}>1</Grid.Col>
      <Grid.Col md={6} lg={3}>2</Grid.Col>
      <Grid.Col md={6} lg={3}>3</Grid.Col>
      <Grid.Col md={6} lg={3}>4</Grid.Col>
    </Grid>
  );
}

Text component now supports setting -webkit-line-clamp via prop to limit amount of lines:

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

function Demo() {
  return (
    <Text lineClamp={4}>
      {/* Text content */}
    </Text>
  );
}

Button component now supports loading state:

import { IconDatabase } from '@tabler/icons';
import { Button } from '@mantine/core';

function Demo() {
  return (
    <Button leftIcon={<IconDatabase size={14} />}>
      Connect to database
    </Button>
  );
}

Text, Button, Badge and ThemeIcon components now support new gradient variant:

Other changes

• 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
• 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