Components redesign

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

Color
Radius
xs
sm
md
lg
xl
Variant
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:

Life is like an npm install – you never know what you are going to get.– Forrest Gump
Color
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:

1
2
3
4
5
Spacing
xs
sm
md
lg
xl
VerticalSpacing
xs
sm
md
lg
xl
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:

1
2
3
4
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:

From Bulbapedia: Bulbasaur is a small, quadrupedal Pokémon that has blue-green skin with darker patches. It has red eyes with white pupils, pointed, ear-like structures on top of its head, and a short, blunt snout with a wide mouth. A pair of small, pointed teeth are visible in the upper jaw when its mouth is open. Each of its thick legs ends with three sharp claws. On Bulbasaur's back is a green plant bulb, which is grown from a seed planted there at birth. The bulb also conceals two slender, tentacle-like vines and provides it with energy through photosynthesis as well as from the nutrient-rich seeds contained within.
Size
xs
sm
md
lg
xl
import { Text } from '@mantine/core';
function Demo() {
return (
<Text lineClamp={4}>
{/* Text content */}
</Text>
);
}

Button component now supports loading state:

LoaderPosition
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:

Indigo cyan
Lime green
Teal blue
Orange red
Peach
Indigo cyan gradient

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