Version 2.4.0

Components redesign

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

Bummer!
Something terrible happened! You made a mistake and there is no going back, your data was lost forever!
Color
Radius
xs
sm
md
lg
xl
Variant
<Alert icon={<XCircleFillIcon 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
<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
<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
<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
<Text lineClamp={4}>
{/* Text content */}
</Text>

Button component now supports loading state:

LoaderPosition
<Button leftIcon={<DatabaseIcon size={14} />}>
{loading ? 'Connecting' : 'Connect'} to database
</Button>

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

Indigo cyan
Lime green
Teal blue
Orange red
Grape pink
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
Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback