8.1.2
[@mantine/dates]
DatePickerInput: Fix incorrect presets handling[@mantine/dates]
DatePickerInput: FixonDropdownClose
not being called in some cases[@mantine/hooks]
use-scroll-spy: AddscrollHost
option support (#8003)[@mantine/core]
PinInput: Fix incorrect default size (#7990)[@mantine/core]
Fixbdrs
prop not working (#7996)[@mantine/core]
Fixenv
prop not being available on HeadlessMantineProvider (#7992)[@mantine/core]
Fix placeholder overflowing MultiSelect and TagsInput components[@mantine/core]
Popover: fix autoUpdate triggering extra rerenders withkeepMounted
(#7983)
- @chumba-wamba made their first contribution in https://github.com/mantinedev/mantine/pull/7992
Full Changelog: https://github.com/mantinedev/mantine/compare/8.1.1...8.1.2
8.1.1
[@mantine/hooks]
use-set: Fixunion
method not working correctly (#7981)[@mantine/core]
Popover: Fix incorrect position handling (#7955, #7953)[@mantine/dates]
TimePicker: Fix incorrect empty string handling (#7927)[@mantine/dates]
DatePickerInput: Fix incorrectonChange
type (#7943)[@mantine/dates]
TimePicker: Fix incorrect handling ofmin
/max
values in some cases (#7904)[@mantine/hooks]
use-hotkeys: Fix Escape key not being handled correctly in some browsers (#7928)[@mantine/core]
Tree: Fix detached DOM nodes memory leak (#7940)[@mantine/hooks]
use-debounced-callback: Addcancel
method support (#7965)[@mantine/dates]
DatePicker: Fix incorrect value type fortype="range" (#7937)
[@mantine/dates]
DatePicker: FixclassName
andstyle
props not working whenpresets
prop is set (#7960)
- @JeonJaewon made their first contribution in https://github.com/mantinedev/mantine/pull/7978
- @KevinLu made their first contribution in https://github.com/mantinedev/mantine/pull/7942
Full Changelog: https://github.com/mantinedev/mantine/compare/8.1.0...8.1.1
8.1.0
View changelog with demos on mantine.dev website
DatePicker, DatePickerInput and DateTimePicker now support presets
prop that allows you to add custom date presets. Presets are displayed next to the calendar:
import dayjs from 'dayjs';
import { DatePicker } from '@mantine/dates';
function Demo() {
const today = dayjs();
return (
<DatePicker
type="range"
presets={[
{
value: [today.subtract(2, 'day').format('YYYY-MM-DD'), today.format('YYYY-MM-DD')],
label: 'Last two days',
},
{
value: [today.subtract(7, 'day').format('YYYY-MM-DD'), today.format('YYYY-MM-DD')],
label: 'Last 7 days',
},
{
value: [today.startOf('month').format('YYYY-MM-DD'), today.format('YYYY-MM-DD')],
label: 'This month',
},
{
value: [
today.subtract(1, 'month').startOf('month').format('YYYY-MM-DD'),
today.subtract(1, 'month').endOf('month').format('YYYY-MM-DD'),
],
label: 'Last month',
},
{
value: [
today.subtract(1, 'year').startOf('year').format('YYYY-MM-DD'),
today.subtract(1, 'year').endOf('year').format('YYYY-MM-DD'),
],
label: 'Last year',
},
]}
/>
);
}
Calendar and other components based on it now support headerControlsOrder
prop. You can use headerControlsOrder
prop to change the order of header controls. The prop accepts an array of 'next' | 'previous' | 'level
. Note that each control can be used only once in the array.
import { DatePicker } from '@mantine/dates';
function Demo() {
return (
<DatePicker
defaultDate="2022-02-01"
headerControlsOrder={['level', 'previous', 'next']}
styles={{
calendarHeaderLevel: {
justifyContent: 'flex-start',
paddingInlineStart: 8,
},
}}
/>
);
}
Popover component now handles shift
and flip
Floating UI differently. Starting from 8.1.0 version, the popover dropdown position is not changed when the popover is opened. shift
and flip
middlewares are used only once to calculate the initial position of the dropdown.
This change fixes incorrect flipping/shifting behavior when there is dynamic content in the dropdown. For example, searchable Select and DatePickerInput without consistentWeeks
option.
New use-long-press hook:
import { Button } from '@mantine/core';
import { useLongPress } from '@mantine/hooks';
import { notifications } from '@mantine/notifications';
function Demo() {
const handlers = useLongPress(() => notifications.show({ message: 'Long press triggered' }));
return <Button {...handlers}>Press and hold</Button>;
}
BarChart, AreaChart and LineChart components now support reference area. Reference area is a rectangular area that can be used to highlight a specific region of the chart:
import { ReferenceArea } from 'recharts';
import { BarChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<BarChart
h={300}
data={data}
dataKey="month"
series={[
{ name: 'Smartphones', color: 'violet.6' },
{ name: 'Laptops', color: 'blue.6' },
{ name: 'Tablets', color: 'teal.6' },
]}
>
<ReferenceArea
x1="January"
x2="March"
y1={0}
y2={1250}
yAxisId="left"
fillOpacity={0.3}
strokeOpacity={0.9}
fill="var(--mantine-color-gray-4)"
stroke="var(--mantine-color-gray-6)"
strokeWidth={1}
label={{
value: 'Q1 sales threshold',
position: 'insideTopRight',
fontSize: 12,
fill: 'var(--mantine-color-bright)',
}}
/>
</BarChart>
);
}
use-form now has a resetField
method that resets field value to its initial value:
import { useForm } from '@mantine/form'
const form = useForm({ initialValues: { name: 'John Doe' } });
form.resetField('name'); // resets name field to 'John Doe'
You can now use isDuplicate
prop in TagsInput component to control how duplicates are detected. It is a function that receives two arguments: tag value and current tags. The function must return true
if the value is duplicate.
Example of using isDuplicate
to allow using the same value with different casing:
import { TagsInput } from '@mantine/core';
function Demo() {
return (
<TagsInput
label="Press Enter to submit a tag"
placeholder="Enter tag"
isDuplicate={(tagValue, currentTags) => currentTags.some((val) => val === tagValue)}
defaultValue={['Tag', 'TAG', 'tag']}
/>
);
}
Slider component now support domain
prop that allows setting the possible range of values independently of the min
and max
values:
import { Slider } from '@mantine/core';
function Demo() {
return (
<Slider
domain={[0, 100]}
min={10}
max={90}
defaultValue={25}
marks={[
{ value: 10, label: 'min' },
{ value: 90, label: 'max' },
]}
/>
);
}
RangeSlider component now supports pushOnOverlap
prop that defines whether the slider should push the overlapping thumb when the user drags it.
import { RangeSlider } from '@mantine/core';
function Demo() {
return <RangeSlider pushOnOverlap={false} defaultValue={[25, 65]} minRange={20} />;
}
@mantine/hooks
package now exports all types used in hooks options and return values. For example, you can now import use-uncontrolled types like this:
import type { UseUncontrolledOptions, UseUncontrolledReturnValue } from '@mantine/hooks';
Types exported from the library:
interface UseUncontrolledOptions<T> {
/** Value for controlled state */
value?: T;
/** Initial value for uncontrolled state */
defaultValue?: T;
/** Final value for uncontrolled state when value and defaultValue are not provided */
finalValue?: T;
/** Controlled state onChange handler */
onChange?: (value: T) => void;
}
type UseUncontrolledReturnValue<T> = [
/** Current value */
T,
/** Handler to update the state, passes `value` and `payload` to `onChange` */
(value: T, ...payload: any[]) => void,
/** True if the state is controlled, false if uncontrolled */
boolean,
];
You can now use zod v4 with use-form. To use zod 4:
- Update
mantine-form-zod-resolver
to1.2.1
or later version - Update zod to version
3.25.0
or later - Replace
zod
imports withzod/v4
(only if you havezod@3
in yourpackage.json
) - Replace
zodResolver
withzod4Resolver
in your code - All other code remains the same
Example with zod v4:
import { z } from 'zod/v4';
import { zod4Resolver } from 'mantine-form-zod-resolver';
const schema = z.object({
name: z.string().min(2, { message: 'Name should have at least 2 letters' }),
email: z.email({ message: 'Invalid email' }),
age: z.number().min(18, { message: 'You must be at least 18 to create an account' }),
});
const form = useForm({
initialValues: {
name: '',
email: '',
age: 16,
},
validate: zod4Resolver(schema),
})
- use-debounced-callback documentation was updated to include new
flush
andflushOnUnmount
features - Documentation about exported types was added to all applicable hooks
- All components now support
bdrs
style prop to set border radius. - DateTimePicker now supports
defaultTimeValue
prop - Tooltip now supports
autoContrast
prop. - Handlers returned from use-counter are now memoized.
- Return value of use-event-listener, use-focus-within, use-focus-trap, use-hover, use-move, use-radial-move changed (
React.RefObject
->React.RefCallback
), required to fix incorrect ref handling in several cases. For more information, see the issue on GitHub – #7406. - Deprecated
React.MutableRefObject
type was replaced withReact.RefObject
in all packages to better support React 19 types. positionDependencies
prop is now deprecated in Tooltip, Popover and other components based on Popover. The prop is no longer required and can be safely removed.positionDependencies
prop will be removed in 9.0 release.
7.17.8
[@mantine/hooks]
use-idle: Fix timeout not being cancelled when the parent component unmounts (#7914)[@mantine/core]
Collapse: Fixinert
attribute being incompatible with React 18 (#7911)[@mantine/core]
Overlay: Fix blur not working in older browsers (#7907)[@mantine/core]
FixtoRgba
function incorrectly handling values with zero transparency (#7906)[@mantine/core]
ScrollArea: FixonBottomReached
not being called when the container size has sub-pixel value[@mantine/form]
Fixform.reorderItem
reordering only the first item (#7892)[@mantine/core]
Popover: FixonOpen
/onClose
being called whendisabled
prop is set (#7868)[@mantine/spotlight]
Fix labels containing single quote passed toSpotlight.ActionGroup
not working (#7865)[@mantine/core]
Collapse: Fixinert
prop not being compatible with React 18 (#7864)[@mantine/core]
List: Fix incorrect types whentype="unordered"
(#7861)[@mantine/core]
AngleSlider: Fix incorrect arrow events handling (#7862)[@mantine/dates]
DateInput: Fix Escape key not closing dropdown (#7857)[@mantine/hooks]
use-shallow-effect: FixNaN
value not being handled correctly (#7851)[@mantine/core]
MutltiSelect: FixonPaste
prop not being passed to the input element (#7838)[@mantine/core]
Button: Fix FileButton breaking Button.Group styles (#7835)[@mantine/core]
Modal Fix incorrect header styles with ScrollArea (#7832)[@mantine/dropzone]
Fix status being stuck in rejected state when a file with incorrect mime type is dropped[@mantine/core]
AngleSlider: Fix incorrect thumb position in RTL layouts (#7822)[@mantine/core]
Select: FixonSearchChange
being triggered when controlled search value is updated (#7814)[@mantine/dates]
TimeInput: Fixstep
prop not working (#7811)[@mantine/core]
Table: AddscrollAreaProps
support to Table.ScrollContainer (#7798)[@mantine/core]
Stepper: Fix unexpected bottom spacing in vertical orientation (#7794)[@mantine/core]
PasswordInput: Fixaria-describedby
not pointing to error and description elements (#7793)[@mantine/core]
Switch: Fixdiv
element used inside label (#7776)[@mantine/core]
Collapse: Fix children with scale animations not working correctly when collapse is opened (#7774)[@mantine/core]
Transition: FixexitDuration
not working correctly for rapid changes (#7773)[@mantine/core]
Stepper: Fix inconsistent border color in horizontal/vertical orientation (#7795)
- @deedw made their first contribution in https://github.com/mantinedev/mantine/pull/7914
- @VirtuoUK made their first contribution in https://github.com/mantinedev/mantine/pull/7907
- @ylvaselling made their first contribution in https://github.com/mantinedev/mantine/pull/7906
Full Changelog: https://github.com/mantinedev/mantine/compare/8.0.2...7.17.8
8.0.2
[@mantine/dates]
DateTimePicker: Fix incorrectonChange
value type[@mantine/core]
ScrollArea: FixonBottomReached
not being called when the container size has sub-pixel value[@mantine/dates]
TimePicker: Improve leading zero input handling[@mantine/dates]
TimePicker: Fix setting value to an empty string not reseting displayed time in some cases[@mantine/form]
Fixform.reorderItem
reordering only the first item (#7892)[@mantine/dates]
DateInput: Fix selected month and year not being highlighted (#7897)[@mantine/hooks]
use-local-storage: AddqueueMicrotask
for dispatching update events to fix multiple hook instances synchonization (#7874)[@mantine/dates]
Fix leftover timezone issues after 8.0 strings migration (#7878)[@mantine/form]
Add zod v4 support (#7871)[@mantine/core]
Popover: FixonOpen
/onClose
being called whendisabled
prop is set (#7868)[@mantine/spotlight]
Fix labels containing single quote passed toSpotlight.ActionGroup
not working (#7865)[@mantine/core]
Collapse: Fixinert
prop not being compatible with React 18 (#7864)[@mantine/core]
List: Fix incorrect types whentype="unordered"
(#7861)[@mantine/core]
AngleSlider: Fix incorrect arrow events handling (#7862)[@mantine/dates]
DateInput: Fix Escape key not closing dropdown (#7857)[@mantine/hooks]
use-shallow-effect: FixNaN
value not being handled correctly (#7851)
- @gentunian made their first contribution in https://github.com/mantinedev/mantine/pull/7869
- @sungpaks made their first contribution in https://github.com/mantinedev/mantine/pull/7891
- @akoll made their first contribution in https://github.com/mantinedev/mantine/pull/7874
- @parsadotsh made their first contribution in https://github.com/mantinedev/mantine/pull/7899
Full Changelog: https://github.com/mantinedev/mantine/compare/8.0.1...8.0.2
8.0.1
[@mantine/hooks]
use-debounced-callback: Addleading: true
option support (#7841)[@mantine/core]
Tabs: Fix incorrect Tabs.List styles withgrow
prop enabled[@mantine/core]
MutltiSelect: FixonPaste
prop not being passed to the input element (#7838)[@mantine/dates]
TimePicker: Fix up/down arrows not working correctly withstep
prop (#7784)[@mantine/core]
Button: Fix FileButton breaking Button.Group styles (#7835)[@mantine/core]
Modal Fix incorrect header styles with ScrollArea (#7832)[@mantine/dropzone]
Fix status being stuck in rejected state when a file with incorrect mime type is dropped[@mantine/core]
Switch: Fix incorrect thumb position in RTL layouts (#7822)[@mantine/core]
AngleSlider: Fix incorrect thumb position in RTL layouts (#7822)[@mantine/core]
Menu: Fix default props not working in Menu.Sub (#7820)[@mantine/core]
Disable scaling explicit rem units in rem function (#7821)[@mantine/core]
Slider: Fix incorrect track width (#7464)[@mantine/dates]
TimeInput: Fixstep
prop not working (#7811)[@mantine/core]
Select: FixonSearchChange
being triggered when controlled search value is updated (#7814)[@mantine/dropzone]
Migrate back to react-dropzone from react-dropzone-esm[@mantine/code-highlight]
Fix tooltip being cut off in components with 1-2 lines of code (#7816)[@mantine/core]
Fix inconsistent disabled styles in some components, add CSS variables for disabled colors (#7805)[@mantine/dates]
DatePicker: Add selected date highlight in year and month picker fortype="default"
(#7799)[@mantine/core]
Table: AddscrollAreaProps
support to Table.ScrollContainer (#7798)[@mantine/core]
Fix boolean value not being included indata-*
attributes types (#7810)[@mantine/dates]
DateInput: Fix incorrectonChange
value type (#7796)[@mantine/core]
Stepper: Fix unexpected bottom spacing in vertical orientation (#7794)[@mantine/core]
PasswordInput: Fixaria-describedby
not pointing to error and description elements (#7793)[@mantine/core]
Switch: Fixdiv
element used inside label (#7776)[@mantine/dates]
Add empty string handling as empty value (#7780)[@mantine/core]
Collapse: Fix children with scale animations not working correctly when collapse is opened (#7774)[@mantine/core]
Transition: FixexitDuration
not working correctly for rapid changes (#7773)[@mantine/dates]
TimePicker: Fix00
in dropdown not being reachable with arrow keys when it is outside scroll position (#7788)[@mantine/core]
Stepper: Fix inconsistent border color in horizontal/vertical orientation (#7795)[@mantine/core]
Stepper: Fix inconsistent border color in horizontal/vertical orientation (#7795)
- @mikkurogue made their first contribution in https://github.com/mantinedev/mantine/pull/7780
- @kawarimidoll made their first contribution in https://github.com/mantinedev/mantine/pull/7807
- @codjix made their first contribution in https://github.com/mantinedev/mantine/pull/7804
- @GermainBergeron made their first contribution in https://github.com/mantinedev/mantine/pull/7805
- @kaareal made their first contribution in https://github.com/mantinedev/mantine/pull/7814
- @Bvngee made their first contribution in https://github.com/mantinedev/mantine/pull/7464
- @russellbanks made their first contribution in https://github.com/mantinedev/mantine/pull/7820
- @jonjomckay made their first contribution in https://github.com/mantinedev/mantine/pull/7841
Full Changelog: https://github.com/mantinedev/mantine/compare/8.0.0...8.0.1
8.0.0 🌶️
View changelog with demos on mantine.dev website
This changelog covers breaking changes and new features in Mantine 8.0. To migrate your application to Mantine 8.0, follow 7.x → 8.x migration guide.
Global styles are now splitted between 3 files:
baseline.css
– a minimal CSS reset, setsbox-sizing: border-box
and changes font propertiesdefault-css-variables.css
– contains all CSS variables generated from the default themeglobal.css
– global classes used in Mantine components
If you previously imported individual styles from @mantine/core
package, you need to update imports to use new files:
import '@mantine/core/styles/baseline.css';
import '@mantine/core/styles/default-css-variables.css';
import '@mantine/core/styles/global.css';
If you imported @mantine/core/styles.css
, no changes are required – all new files are already included in styles.css
.
Menu component now supports submenus:
import { Button, Menu } from '@mantine/core';
function Demo() {
return (
<Menu width={200} position="bottom-start">
<Menu.Target>
<Button>Toggle Menu</Button>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item>Dashboard</Menu.Item>
<Menu.Sub>
<Menu.Sub.Target>
<Menu.Sub.Item>Products</Menu.Sub.Item>
</Menu.Sub.Target>
<Menu.Sub.Dropdown>
<Menu.Item>All products</Menu.Item>
<Menu.Item>Categories</Menu.Item>
<Menu.Item>Tags</Menu.Item>
<Menu.Item>Attributes</Menu.Item>
<Menu.Item>Shipping classes</Menu.Item>
</Menu.Sub.Dropdown>
</Menu.Sub>
<Menu.Sub>
<Menu.Sub.Target>
<Menu.Sub.Item>Orders</Menu.Sub.Item>
</Menu.Sub.Target>
<Menu.Sub.Dropdown>
<Menu.Item>Open</Menu.Item>
<Menu.Item>Completed</Menu.Item>
<Menu.Item>Cancelled</Menu.Item>
</Menu.Sub.Dropdown>
</Menu.Sub>
<Menu.Sub>
<Menu.Sub.Target>
<Menu.Sub.Item>Settings</Menu.Sub.Item>
</Menu.Sub.Target>
<Menu.Sub.Dropdown>
<Menu.Item>Profile</Menu.Item>
<Menu.Item>Security</Menu.Item>
<Menu.Item>Notifications</Menu.Item>
</Menu.Sub.Dropdown>
</Menu.Sub>
</Menu.Dropdown>
</Menu>
);
}
Popover component now supports hideDetached
prop to configure how the dropdown behaves when the target element is hidden with styles (display: none
, visibility: hidden
, etc.), removed from the DOM, or when the target element is scrolled out of the viewport.
By default, hideDetached
is enabled – the dropdown is hidden with the target element. You can change this behavior with hideDetached={false}
. To see the difference, try to scroll the root element of the following demo:
import { Box, Button, Group, Popover } from '@mantine/core';
function Demo() {
return (
<Box
bd="1px solid var(--mantine-color-dimmed)"
p="xl"
w={400}
h={200}
style={{ overflow: 'auto' }}
>
<Box w={1000} h={400}>
<Group>
<Popover width="target" position="bottom" opened>
<Popover.Target>
<Button>Toggle popover</Button>
</Popover.Target>
<Popover.Dropdown>This popover dropdown is hidden when detached</Popover.Dropdown>
</Popover>
<Popover width="target" position="bottom" opened hideDetached={false}>
<Popover.Target>
<Button>Toggle popover</Button>
</Popover.Target>
<Popover.Dropdown>This popover dropdown is visible when detached</Popover.Dropdown>
</Popover>
</Group>
</Box>
</Box>
);
}
All @mantine/dates
components now use date strings in YYYY-MM-DD
or YYYY-MM-DD HH:mm:ss
format instead of Date
objects. This change was made to resolve issues related to timezones – now the output of all @mantine/dates
components does not include any timezone-specific information. Follow 7.x → 8.x migration guide to learn how to update the code to use new string values.
Example of using DatePicker component with string values:
import { useState } from 'react';
import { DatePicker } from '@mantine/dates';
function Demo() {
const [value, setValue] = useState<string | null>(null);
return <DatePicker value={value} onChange={setValue} />;
}
DatesProvider
component no longer supports timezone
option – all @mantine/dates
components now use strings in YYYY-MM-DD HH:mm:ss
format as values and do not contain timezone information.
If you need to handle timezones in your application, you can use a dedicated dates library (dayjs, luxon, date-fns) to update timezone values.
Example of using Mantine components with dayjs:
import dayjs from 'dayjs';
import { DatePicker } from '@mantine/dates';
function Demo() {
const [value, setValue] = useState<string | null>('2022-08-21');
// Mantine components use strings as values, you can pass these
// strings to a dates library of your choice to assign timezone
const dateWithTimeZone = dayjs(value).tz("America/Toronto").toDate();
return <DatePicker value={value} onChange={setValue} />;
}
New TimePicker component is an alternative to TimeInput that offers more features. It supports 24-hour and 12-hour formats, dropdown with hours, minutes and seconds, and more.
import { TimePicker } from '@mantine/dates';
function Demo() {
return (
<>
<TimePicker label="Enter time (24h format)" withSeconds withDropdown />
<TimePicker label="Enter time (12h format)" withSeconds withDropdown format="12h" mt="md" />
</>
);
}
DateTimePicker component now uses TimePicker under the hood instead of TimeInput. You can now use all TimePicker features with DateTimePicker component.
Prop timeInputProps
is no longer available, to pass props down to the underlying TimePicker you need to use timePickerProps
prop.
Example of enabling dropdown and setting 12h
format for time picker:
import { DateTimePicker } from '@mantine/dates';
function Demo() {
return (
<DateTimePicker
label="Pick date and time"
placeholder="Pick date and time"
timePickerProps={{
withDropdown: true,
popoverProps: { withinPortal: false },
format: '12h',
}}
/>
);
}
New TimeValue component can be used to display a formatted time string with similar formatting options to TimePicker component.
import { Text } from '@mantine/core';
import { TimeValue } from '@mantine/dates';
function Demo() {
return (
<div>
<Text>
24h format: <TimeValue value="18:45:34" />
</Text>
<Text>
12h format: <TimeValue value="18:45:34" format="12h" />
</Text>
</div>
);
}
New TimeGrid component allows to capture time value from the user with a predefined set of time slots:
import { getTimeRange, TimeGrid } from '@mantine/dates';
function Demo() {
return (
<TimeGrid
data={getTimeRange({ startTime: '10:00', endTime: '21:00', interval: '01:00' })}
simpleGridProps={{
type: 'container',
cols: { base: 1, '180px': 2, '320px': 3 },
spacing: 'xs',
}}
withSeconds={false}
/>
);
}
New Heatmap component allows to display data in a calendar heatmap format:
import dayjs from 'dayjs';
import { Heatmap } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<Heatmap
data={data}
startDate="2024-02-16"
endDate="2025-02-16"
withTooltip
withWeekdayLabels
withMonthLabels
getTooltipLabel={({ date, value }) =>
`${dayjs(date).format('DD MMM, YYYY')} – ${value === null || value === 0 ? 'No contributions' : `${value} contribution${value > 1 ? 's' : ''}`}`
}
/>
);
}
@mantine/code-highlight package no longer depends on highlight.js. Instead, it now provides a new API based on adapters that allows using any syntax highlighter of your choice. Out of the box, @mantine/code-highlight
provides adapters for shiki and highlight.js.
To learn about the migration process and how to use the new adapters API, check the updated CodeHighlight documentation and 7.x → 8.x migration guide.
You can now use CodeHighlight component with shiki.
Shiki library provides the most advanced syntax highlighting for TypeScript and CSS/Sass code. It uses textmate grammars to highlight code (same as in VSCode). Shiki adapter is recommended if you need to highlight advanced TypeScript (generics, jsx nested in props) or CSS code (custom syntaxes, newest features). Shiki adapter is used for all code highlighting in Mantine documentation.
To use shiki adapter, you need to install shiki
package:
yarn add shiki
Then wrap your app with CodeHighlightAdapterProvider
and provide createShikiAdapter
as adapter
prop:
import { MantineProvider } from '@mantine/core';
import { CodeHighlightAdapterProvider, createShikiAdapter } from '@mantine/code-highlight';
// Shiki requires async code to load the highlighter
async function loadShiki() {
const { createHighlighter } = await import('shiki');
const shiki = await createHighlighter({
langs: ['tsx', 'scss', 'html', 'bash', 'json'],
themes: [],
});
return shiki;
}
const shikiAdapter = createShikiAdapter(loadShiki);
function App() {
return (
<MantineProvider>
<CodeHighlightAdapterProvider adapter={shikiAdapter}>
{/* Your app here */}
</CodeHighlightAdapterProvider>
</MantineProvider>
);
}
After that, you can use CodeHighlight
component in your application:
import { CodeHighlight } from '@mantine/code-highlight';
const exampleCode = `
type FilterPropsRes<T extends Record<string, any>> = {
[Key in keyof T]-?: T[Key] extends undefined ? never : T[Key];
};
export function filterProps<T extends Record<string, any>>(props: T) {
return Object.keys(props).reduce<FilterPropsRes<T>>((acc, key: keyof T) => {
if (props[key] !== undefined) {
acc[key] = props[key];
}
return acc;
}, {} as FilterPropsRes<T>);
}
`;
function Demo() {
return <CodeHighlight code={exampleCode} language="tsx" radius="md" />;
}
@mantine/carousel package was updated to use the latest version of embla-carousel-react
package. This update includes breaking changes:
speed
anddraggable
props were removed – they are no longer supported byembla-carousel-react
- It is now required to install both
embla-carousel
andembla-carousel-react
packages explicitly useAnimationOffsetEffect
hook was removed – the issue it addressed was fixed inembla-carousel-react
Embla
type export was removed, you should useEmblaCarouselType
fromembla-carousel
instead- Props that were previously passed to embla are now grouped under
emblaOptions
prop
Follow the 7.x → 8.x migration guide to update your application to use the latest version of @mantine/carousel
.
Switch component styles were updated to include indicator inside the thumb. You can change it by setting withThumbIndicator
prop:
import { Switch } from '@mantine/core';
function Demo() {
return (
<Switch
defaultChecked
label="I agree to sell my privacy"
/>
);
}
You can now augment spacing
, radius
, breakpoints
, fontSizes
, lineHeights
, and shadows
types. To learn more about this feature, follow this guide.
Example of types augmentation for spacing
and radius
:
import {
DefaultMantineSize,
MantineThemeSizesOverride,
} from '@mantine/core';
type ExtendedCustomSpacing =
| 'xxl'
| 'xxxs'
| DefaultMantineSize;
type ExtendedCustomRadius =
| 'xxs'
| DefaultMantineSize;
declare module '@mantine/core' {
export interface MantineThemeSizesOverride {
spacing: Record<ExtendedCustomSpacing, string>;
radius: Record<ExtendedCustomRadius, string>;
}
}
- Kbd component now supports
size
prop - DateInput component no longer supports
preserveTime
prop, use different component to capture time values - ScrollArea component no longer has forced
display: table
styles on the wrapper element of the content. It also now supportscontent
Styles API selector to apply styles to the content element. - Image component no longer includes
flex: 0
styles by default - SegmentedControl default height values were changed to match sizes of Input components
- Type of
wrapperProps
prop in all components that support it (Checkbox
,Radio
,Chip
, most inputs) was changed to more strict type - Portal component now has
reuseTargetNode
prop enabled by default - use-form
setFieldValue
handler types are now stricter - Menu.Item no longer has
data-hovered
attribute, use:hover
and:focus
selectors instead to apply styles - use-os now supports Chrome OS detection, its return type now includes
chromeos
value in the union - The default eye dropper icon of ColorInput component was updated
- The default spacing of Notification component was increased
- @mlshvdv made their first contribution in https://github.com/mantinedev/mantine/pull/7703
Full Changelog: https://github.com/mantinedev/mantine/compare/7.17.6...8.0.0
7.17.7
[@mantine/core]
Table: FixstickyHeader
prop having impact onth
selector specificity (#7767)[@mantine.core]
NumberInput: Fixmax
prop not reseting value on blur if the value is larger than Number.MAX_SAFE_INTEGER (#7766)[@mantine.hook]
use-resize-observer: Fix width/height not being calculated correctly for elements withbox-sizing: content-box
(#7764)[@mantine/core]
NavLink: FixrightSection={null}
not disabling chevron[@mantine.hook]
use-hotkeys: FixusePhysicalKeys
option not working with spacial keys (#7761)[@mantine/core]
Modal: Fix scrollarea used inside the modal affecting the position of the close button (#7738)[@mantine/core]
Select: Fix defineddefaultValue
being ignored withdata
updates (#7742)[@mantine/core]
ScrollArea: Fix content overflowing the viewport in some cases (#7748)[@mantine/charts]
RadarChart: Add tooltip and dots support (#7749)[@mantine/modals]
FixconfirmProps
not available inupdateModal
function (#7750)[@mantine/hooks]
use-debounced-callback: FixflushOnUnmount
not working (#7745)[@mantine/core]
Table: Add missing TableScrollContainerProps export
- @gfazioli made their first contribution in https://github.com/mantinedev/mantine/pull/7740
- @LilyStilson made their first contribution in https://github.com/mantinedev/mantine/pull/7749
Full Changelog: https://github.com/mantinedev/mantine/compare/7.17.5...7.17.6
7.17.5
[@mantine/form]
Addform.getInitialValues
handler[@mantine/core]
RangeSlider: Fix first thumb not being focused when the component root is clicked (#7731)[@mantine/core]
PillsInput: Remove lefovermultiline
prop types (#7727)[@mantine/charts]
CompositeChart: Fixtype="stacked"
being confused with BarChart behavior[@mantine/core]
Notification: Allow changing role attribute on the root element (#7682)[@mantine/hooks]
use-idle: Fixwheel
event not being tracked (#7669)[@mantine/core]
Table: AddmaxHeight
prop support toTable.ScrollContainer
(#7713)[@mantine/core]
Modal: Fix incorrect Escape key handling during IME composition (#7700)[@mantine/form]
AdddefaultChecked
toform.getInputProps
return type (#7702)[@mantine/hooks]
use-hotkeys: Update matching logic to include both physical and layout keys (#7708)[@mantine/dates]
Fix day.js isSame function not working correctly for non-Gregorian calendars (#7712)[@mantine.core]
SegmentedControl: Fix animation not working with controlled value (#7721)
- @danielytics made their first contribution in https://github.com/mantinedev/mantine/pull/7708
- @tvandoren made their first contribution in https://github.com/mantinedev/mantine/pull/7702
- @AliAkrem made their first contribution in https://github.com/mantinedev/mantine/pull/7669
- @scato3 made their first contribution in https://github.com/mantinedev/mantine/pull/7739
Full Changelog: https://github.com/mantinedev/mantine/compare/7.17.4...7.17.5
7.17.4
[@mantine/hooks]
use-orientation: Add option to customize initial values (#7657)[@mantine/core]
FixselectFirstOptionOnChange
not working correctly (#7583)[@mantine/core]
Fix error thrown when Textarea was used on cloudflare workers (#7637)[@mantine/core]
Allow spacing, radius and font-size types augmentation (#7644)[@mantine/core]
ScrollArea: Fix scrollbars being invisible whenoffsetScrollbars='present'
is not set (#7647)[@mantine/core]
TypographyStylesProvider: Fix headings font-family not matching the value defined on the theme (#7651)[@mantine/core]
Paper: Add CSS variable for border-color for easier overrides (#7654)[@mantine/core]
Table: FixstickyHeader
prop affecting border rendering (#7658)[@mantine/core]
Slider: FixonChangeEnd
using stale external state (#7660)
- @Han5991 made their first contribution in https://github.com/mantinedev/mantine/pull/7660
- @WojakGra made their first contribution in https://github.com/mantinedev/mantine/pull/7658
- @drew-r made their first contribution in https://github.com/mantinedev/mantine/pull/7651
- @mark-night made their first contribution in https://github.com/mantinedev/mantine/pull/7644
- @Odonno made their first contribution in https://github.com/mantinedev/mantine/pull/7636
Full Changelog: https://github.com/mantinedev/mantine/compare/7.17.3...7.17.4