Version 2.4.0

Components redesign

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

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

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

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

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

<Text lineClamp={4}>
  {/* Text content */}
</Text>

Button component now supports loading state:

<Button leftIcon={<DatabaseIcon size={14} />}>
  {loading ? 'Connecting' : '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