You can now sponsor Mantine development with OpenCollective . All funds are used to improve Mantine and create new features and components.
Mantine has migrated its linting and formatting toolchain from ESLint and Prettier to oxc – oxlint is now used as the linter and oxfmt as the formatter. Both tools are written in Rust and are significantly faster than their predecessors, which makes linting and formatting the entire codebase almost instant.
The shared configuration is available as a new oxc-config-mantine package (a replacement for the previous eslint-config-mantine ). You can use it in your own projects to follow the same code style and conventions as Mantine.
DatePicker and all other date picker components ( DatePickerInput , MonthPicker , YearPicker , DateTimePicker , etc.) now support the withNativeLevelSelect prop. When enabled, it replaces the calendar header level button with native <select> elements, making it easy to quickly navigate to a specific month and year.
Timeline Timeline.Item component now supports the opposite prop that allows rendering content on the opposite side of the timeline. When any item has the opposite prop, the timeline switches to a centered layout with content on both sides of the line.
You've created new branch fix-notifications from master
You've pushed 23 commits to fix-notifications branch
You've submitted a pull request Fix incorrect notification message (#187)
Robert Gluesticker left a code review on your pull request
Set the alternate prop on individual Timeline.Item components to switch the position of content and opposite:
FloatingWindow now supports a ResizeHandle compound component that allows users to resize the floating window by dragging a handle element. Set the dimensions prop on FloatingWindow to control resize constraints for both width ( initialWidth , minWidth , maxWidth ) and height ( initialHeight , minHeight , maxHeight ).
The resize handle is fully accessible – it supports keyboard interaction with Arrow Left / Arrow Right keys for width, Arrow Up / Arrow Down for height (10px steps), and Home / End keys (jump to min/max size).
New Cascader component allows selecting a value from hierarchical data by drilling down through cascading columns. Picking an option in one column reveals its children in a new column to the right, and the value is an ordered path from the root option to the selected node. It supports changeOnSelect , hover expand trigger, search, a flat list layout for mobile, and full keyboard navigation.
New SunburstChart component displays hierarchical data as concentric rings, similar to a treemap plotted in polar coordinates.
New BulletChart component displays a single measure against a qualitative range, useful for comparing a primary value (such as revenue) against a target and qualitative thresholds like poor, average, and good.
All @mantine/charts components now expose the accessibilityLayer prop ( true by default) that makes charts navigable with the keyboard. The chart surface is focusable and displays the Mantine focus ring; once focused, the arrow keys move the active tooltip point-by-point and Enter toggles the tooltip, so users who do not use a mouse can read the underlying values. The prop is supported by AreaChart , BarChart , LineChart , CompositeChart , ScatterChart , BubbleChart , PieChart , DonutChart , RadarChart , RadialBarChart and FunnelChart components.
AreaChart , BarChart , LineChart and CompositeChart now support the withBrush prop that displays a brush (range selector) under the chart. Drag the brush handles to zoom into a subset of the data. Use the brushProps prop to customize the underlying recharts Brush , or render the new themed ChartBrush component as a child of the chart for full control.
Heatmap now supports monthLabelsPosition prop that allows displaying month labels at the bottom of the heatmap instead of the top (default).
Accordion now supports the disableCollapse prop. When enabled in single mode ( multiple={false} ), the open item cannot be collapsed by clicking it again, so one item always stays open. Pair it with defaultValue or value to guarantee that a section is open from the start – useful for settings panels, stepper-style flows and FAQ pages.
ScrollArea now supports the verticalScrollbarPosition prop that pins the vertical scrollbar to a physical side ( left or right ) regardless of direction. This is useful for RTL applications where users expect the vertical scrollbar to stay on the right, matching the behavior of most desktop software. The prop also realigns the offset padding, the corner and the horizontal scrollbar gap, so it works correctly with offsetScrollbars and scrollbars="xy" .
Charizard description from Bulbapedia
Charizard is a draconic, bipedal Pokémon. It is primarily orange with a cream underside from the chest to the tip of its tail. It has a long neck, small blue eyes, slightly raised nostrils, and two horn-like structures protruding from the back of its rectangular head. There are two fangs visible in the upper jaw when its mouth is closed. Two large wings with blue-green undersides sprout from its back, and a horn-like appendage juts out from the top of the third joint of each wing. A single wing-finger is visible through the center of each wing membrane. Charizard's arms are short and skinny compared to its robust belly, and each limb has three white claws. It has stocky legs with cream-colored soles on each of its plantigrade feet. The tip of its long, tapering tail burns with a sizable flame.
As Mega Charizard X, its body and legs are more physically fit, though its arms remain thin. Its skin turns black with a sky-blue underside and soles. Two spikes with blue tips curve upward from the front and back of each shoulder, while the tips of its horns sharpen, turn blue, and curve slightly upward. Its brow and claws are larger, and its eyes are now red. It has two small, fin-like spikes under each horn and two more down its lower neck. The finger disappears from the wing membrane, and the lower edges are divided into large, rounded points. The third joint of each wing-arm is adorned with a claw-like spike. Mega Charizard X breathes blue flames out the sides of its mouth, and the flame on its tail now burns blue. It is said that its new power turns it black and creates more intense flames.
ResourcesDayView and ResourcesWeekView now support intervalMinutes values larger than 60. Previously the interval was capped at one hour – you can now set it to any whole number of hours (for example 120 or 240 ) to display multi-hour time slots. Values of 60 or less must still divide evenly into an hour; any value that does not keep the grid on hour boundaries falls back to 60 .
New Table example demonstrates how to use Table.ScrollContainer with @tanstack/react-virtual to efficiently render large datasets with 5,000 rows.
Tooltip now supports the interactive prop that keeps the tooltip open while the pointer travels from the target element to the tooltip and rests over its content. Use it if the tooltip contains content that the user must be able to reach with a pointer, for example a link. It is also required by WCAG 2.1 success criterion 1.4.13 , which states that content that appears on hover must remain visible while the pointer is over it.