Version v7.16.0 | Mantine

Version v7.16.0 | Mantine

New use-scroll-spy hook tracks scroll position and returns index of the element that is currently in the viewport. It is useful for creating table of contents components (like in mantine.dev sidebar on the right side) and similar features.

New TableOfContents component is built on top of use-scroll-spy hook and can be used to create table of contents components like the one on the right side of mantine.dev documentation sidebar:

New Input.ClearButton component can be used to add clear button to custom inputs based on Input component. size of the clear button is automatically inherited from the input:

Popover and other components based on it now support withOverlay prop:

You can now use container queries in Carousel component. With container queries, all responsive values are adjusted based on the container width, not the viewport width.

Example of using container queries. To see how the grid changes, resize the root element of the demo with the resize handle located at the bottom right corner of the demo:

RangeSlider component now supports restrictToMarks prop:

Pagination component now supports withPages prop which allows hiding pages controls and displaying only previous and next buttons:

Showing 1 – 10 of 145

use-form hook now supports touchTrigger option that allows customizing events that change touched state. It accepts two options:

Example of using focus trigger:

Recommended articles