1<!DOCTYPE html><html lang="en" data-mantine-color-scheme="light"><head><meta charSet="utf-8" data-next-head=""/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no" data-next-head=""/><link rel="shortcut icon" href="/favicon.svg" data-next-head=""/><meta name="og:image:width" content="1280" data-next-head=""/><meta name="og:image:height" content="640" data-next-head=""/><meta name="og:type" content="website" data-next-head=""/><meta name="twitter:card" content="summary_large_image" data-next-head=""/><meta name="twitter:creator" content="@mantinedev" data-next-head=""/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png" data-next-head=""/><title data-next-head="">Get started | Mantine</title><meta property="description" name="description" content="React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience" data-next-head=""/><meta property="og:title" name="og:title" content="Get started | Mantine" data-next-head=""/><meta property="og:description" name="og:description" content="React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience" data-next-head=""/><meta property="twitter:title" name="twitter:title" content="Get started | Mantine" data-next-head=""/><meta property="twitter:description" name="twitter:description" content="React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience" data-next-head=""/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""/><link rel="preload" href="/_next/static/chunks/1t21gxr562p7x.css" as="style"/><link rel="preload" href="/_next/static/chunks/2ysvi_hl86yk4.css" as="style"/><link rel="preload" href="/_next/static/chunks/0l93j_sf-ksz7.css" as="style"/><link rel="preload" href="/_next/static/chunks/1ukdaqy_42gu0.css" as="style"/><link rel="preload" href="/_next/static/chunks/21hvpvux84e_7.css" as="style"/><link rel="preload" href="/_next/static/chunks/0-7wdzp76gmz_.css" as="style"/><link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet"/>
1<script data-mantine-script="true">try { 2 var _colorScheme = window.localStorage.getItem("mantine-color-scheme-value"); 3 var colorScheme = _colorScheme === "light" || _colorScheme === "dark" || _colorScheme === "auto" ? _colorScheme : "light"; 4 var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; 5 document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); 6} catch (e) {} 7</script>
7<link rel="stylesheet" href="/_next/static/chunks/1t21gxr562p7x.css" data-n-g=""/><link rel="stylesheet" href="/_next/static/chunks/2ysvi_hl86yk4.css" data-n-g=""/><link rel="stylesheet" href="/_next/static/chunks/0l93j_sf-ksz7.css" data-n-g=""/><link rel="stylesheet" href="/_next/static/chunks/1ukdaqy_42gu0.css" data-n-g=""/><link rel="stylesheet" href="/_next/static/chunks/21hvpvux84e_7.css" data-n-g=""/><link rel="stylesheet" href="/_next/static/chunks/0-7wdzp76gmz_.css" data-n-p=""/><noscript data-n-css=""></noscript>
7<script src="/_next/static/chunks/1584wyle7niw1.js" defer=""></script>
7<script src="/_next/static/chunks/0_yx42wlo_9bh.js" defer=""></script>
7<script src="/_next/static/chunks/42n31__9jh4xa.js" defer=""></script>
7<script src="/_next/static/chunks/0uv6ip1i3kz3k.js" defer=""></script>
7<script src="/_next/static/chunks/0yq57wqb-jeyb.js" defer=""></script>
7<script src="/_next/static/chunks/26f_46jjb92jg.js" defer=""></script>
7<script src="/_next/static/chunks/0zde3q_qabuc1.js" defer=""></script>
7<script src="/_next/static/chunks/1vc8zewbhjaef.js" defer=""></script>
7<script src="/_next/static/chunks/3feiduvjdoqrp.js" defer=""></script>
7<script src="/_next/static/chunks/15bzdvmh5hohr.js" defer=""></script>
7<script src="/_next/static/chunks/3m794c_t60l-1.js" defer=""></script>
7<script src="/_next/static/chunks/0oczrhj1qr5gv.js" defer=""></script>
7<script src="/_next/static/chunks/35r-ch5938_95.js" defer=""></script>
7<script src="/_next/static/chunks/turbopack-451cq4t90dk1g.js" defer=""></script>
7<script src="/_next/static/chunks/108-yosjoexzo.js" defer=""></script>
7<script src="/_next/static/chunks/2fd6adas3s6po.js" defer=""></script>
7<script src="/_next/static/chunks/3vv4ljkoe1xl4.js" defer=""></script>
7<script src="/_next/static/chunks/0srksi7v0yhtn.js" defer=""></script>
7<script src="/_next/static/chunks/turbopack-3b6iw4az9ec6o.js" defer=""></script>
7<script src="/_next/static/Znu12BTkm3tzbiqqkSQF7/_buildManifest.js" defer=""></script>
7<script src="/_next/static/Znu12BTkm3tzbiqqkSQF7/_ssgManifest.js" defer=""></script>
7<script src="/_next/static/Znu12BTkm3tzbiqqkSQF7/_clientMiddlewareManifest.js" defer=""></script>
7<style data-emotion="css "></style></head><body><link rel="preload" as="image" href="https://img.shields.io/npm/dm/@mantine/hooks"/><div id="__next"><style data-mantine-styles="true">:root, :host{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-white-0: #FFFFFF;--mantine-color-white-1: #FFFFFF;--mantine-color-white-2: #FFFFFF;--mantine-color-white-3: #FFFFFF;--mantine-color-white-4: #FFFFFF;--mantine-color-white-5: #FFFFFF;--mantine-color-white-6: #FFFFFF;--mantine-color-white-7: #FFFFFF;--mantine-color-white-8: #FFFFFF;--mantine-color-white-9: #FFFFFF;--mantine-color-black-0: #000000;--mantine-color-black-1: #000000;--mantine-color-black-2: #000000;--mantine-color-black-3: #000000;--mantine-color-black-4: #000000;--mantine-color-black-5: #000000;--mantine-color-black-6: #000000;--mantine-color-black-7: #000000;--mantine-color-black-8: #000000;--mantine-color-black-9: #000000;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-oklch-blue-0: oklch(96.27% 0.0217 238.66);--mantine-color-oklch-blue-1: oklch(92.66% 0.0429 240.01);--mantine-color-oklch-blue-2: oklch(86.02% 0.0827 241.66);--mantine-color-oklch-blue-3: oklch(78.2% 0.13 243.83);--mantine-color-oklch-blue-4: oklch(71.8% 0.1686 246.06);--mantine-color-oklch-blue-5: oklch(66.89% 0.1986 248.32);--mantine-color-oklch-blue-6: oklch(62.59% 0.2247 250.29);--mantine-color-oklch-blue-7: oklch(58.56% 0.2209 251.26);--mantine-color-oklch-blue-8: oklch(54.26% 0.2067 251.67);--mantine-color-oklch-blue-9: oklch(49.72% 0.1888 251.59);--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;} 8 9:root[data-mantine-color-scheme="dark"], :host([data-mantine-color-scheme="dark"]){--mantine-color-virtual-0: #fff0f6;--mantine-color-virtual-1: #ffdeeb;--mantine-color-virtual-2: #fcc2d7;--mantine-color-virtual-3: #faa2c1;--mantine-color-virtual-4: #f783ac;--mantine-color-virtual-5: #f06595;--mantine-color-virtual-6: #e64980;--mantine-color-virtual-7: #d6336c;--mantine-color-virtual-8: #c2255c;--mantine-color-virtual-9: #a61e4d;--mantine-color-virtual-text: var(--mantine-color-virtual-4);--mantine-color-virtual-filled: var(--mantine-color-virtual-8);--mantine-color-virtual-filled-hover: var(--mantine-color-virtual-9);--mantine-color-virtual-light: rgba(83, 15, 39, 1);--mantine-color-virtual-light-hover: rgba(116, 21, 54, 1);--mantine-color-virtual-light-color: var(--mantine-color-virtual-0);--mantine-color-virtual-outline: var(--mantine-color-virtual-4);--mantine-color-virtual-outline-hover: rgba(247, 131, 172, 0.05);--mantine-color-virtual-contrast: var(--mantine-color-white);--mantine-color-white-text: var(--mantine-color-white-4);--mantine-color-white-filled: var(--mantine-color-white-8);--mantine-color-white-filled-hover: var(--mantine-color-white-9);--mantine-color-white-light: rgba(128, 128, 128, 1);--mantine-color-white-light-hover: rgba(179, 179, 179, 1);--mantine-color-white-light-color: var(--mantine-color-white-0);--mantine-color-white-outline: var(--mantine-color-white-4);--mantine-color-white-outline-hover: rgba(255, 255, 255, 0.05);--mantine-color-black-text: var(--mantine-color-black-4);--mantine-color-black-filled: var(--mantine-color-black-8);--mantine-color-black-filled-hover: var(--mantine-color-black-9);--mantine-color-black-light: rgba(0, 0, 0, 1);--mantine-color-black-light-hover: rgba(0, 0, 0, 1);--mantine-color-black-light-color: var(--mantine-color-black-0);--mantine-color-black-outline: var(--mantine-color-black-4);--mantine-color-black-outline-hover: rgba(0, 0, 0, 0.05);--mantine-color-adaptive-0: #FFFFFF;--mantine-color-adaptive-1: #FFFFFF;--mantine-color-adaptive-2: #FFFFFF;--mantine-color-adaptive-3: #FFFFFF;--mantine-color-adaptive-4: #FFFFFF;--mantine-color-adaptive-5: #FFFFFF;--mantine-color-adaptive-6: #FFFFFF;--mantine-color-adaptive-7: #FFFFFF;--mantine-color-adaptive-8: #FFFFFF;--mantine-color-adaptive-9: #FFFFFF;--mantine-color-adaptive-text: var(--mantine-color-adaptive-4);--mantine-color-adaptive-filled: var(--mantine-color-adaptive-8);--mantine-color-adaptive-filled-hover: var(--mantine-color-adaptive-9);--mantine-color-adaptive-light: rgba(128, 128, 128, 1);--mantine-color-adaptive-light-hover: rgba(179, 179, 179, 1);--mantine-color-adaptive-light-color: var(--mantine-color-adaptive-0);--mantine-color-adaptive-outline: var(--mantine-color-adaptive-4);--mantine-color-adaptive-outline-hover: rgba(255, 255, 255, 0.05);--mantine-color-adaptive-contrast: var(--mantine-color-black);--mantine-color-ocean-blue-text: var(--mantine-color-ocean-blue-4);--mantine-color-ocean-blue-filled: var(--mantine-color-ocean-blue-8);--mantine-color-ocean-blue-filled-hover: var(--mantine-color-ocean-blue-9);--mantine-color-ocean-blue-light: rgba(10, 60, 67, 1);--mantine-color-ocean-blue-light-hover: rgba(14, 84, 93, 1);--mantine-color-ocean-blue-light-color: var(--mantine-color-ocean-blue-0);--mantine-color-ocean-blue-outline: var(--mantine-color-ocean-blue-4);--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-oklch-blue-text: var(--mantine-color-oklch-blue-4);--mantine-color-oklch-blue-filled: var(--mantine-color-oklch-blue-8);--mantine-color-oklch-blue-filled-hover: var(--mantine-color-oklch-blue-9);--mantine-color-oklch-blue-light: rgba(0, 0, 0, 1);--mantine-color-oklch-blue-light-hover: rgba(0, 0, 0, 1);--mantine-color-oklch-blue-light-color: var(--mantine-color-oklch-blue-0);--mantine-color-oklch-blue-outline: var(--mantine-color-oklch-blue-4);--mantine-color-oklch-blue-outline-hover: oklch(71.8% 0.1686 246.06 / 0.05);--mantine-color-bright-pink-text: var(--mantine-color-bright-pink-4);--mantine-color-bright-pink-filled: var(--mantine-color-bright-pink-8);--mantine-color-bright-pink-filled-hover: var(--mantine-color-bright-pink-9);--mantine-color-bright-pink-light: rgba(87, 10, 58, 1);--mantine-color-bright-pink-light-hover: rgba(121, 13, 81, 1);--mantine-color-bright-pink-light-color: var(--mantine-color-bright-pink-0);--mantine-color-bright-pink-outline: var(--mantine-color-bright-pink-4);--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);} 10 11:root[data-mantine-color-scheme="light"], :host([data-mantine-color-scheme="light"]){--mantine-color-virtual-0: #e3fafc;--mantine-color-virtual-1: #c5f6fa;--mantine-color-virtual-2: #99e9f2;--mantine-color-virtual-3: #66d9e8;--mantine-color-virtual-4: #3bc9db;--mantine-color-virtual-5: #22b8cf;--mantine-color-virtual-6: #15aabf;--mantine-color-virtual-7: #1098ad;--mantine-color-virtual-8: #0c8599;--mantine-color-virtual-9: #0b7285;--mantine-color-virtual-text: var(--mantine-color-virtual-filled);--mantine-color-virtual-filled: var(--mantine-color-virtual-6);--mantine-color-virtual-filled-hover: var(--mantine-color-virtual-7);--mantine-color-virtual-light: var(--mantine-color-virtual-1);--mantine-color-virtual-light-hover: var(--mantine-color-virtual-2);--mantine-color-virtual-light-color: var(--mantine-color-virtual-9);--mantine-color-virtual-outline: var(--mantine-color-virtual-6);--mantine-color-virtual-outline-hover: rgba(21, 170, 191, 0.05);--mantine-color-virtual-contrast: var(--mantine-color-black);--mantine-color-white-text: var(--mantine-color-white-filled);--mantine-color-white-filled: var(--mantine-color-white-6);--mantine-color-white-filled-hover: var(--mantine-color-white-7);--mantine-color-white-light: var(--mantine-color-white-1);--mantine-color-white-light-hover: var(--mantine-color-white-2);--mantine-color-white-light-color: var(--mantine-color-white-9);--mantine-color-white-outline: var(--mantine-color-white-6);--mantine-color-white-outline-hover: rgba(255, 255, 255, 0.05);--mantine-color-black-text: var(--mantine-color-black-filled);--mantine-color-black-filled: var(--mantine-color-black-6);--mantine-color-black-filled-hover: var(--mantine-color-black-7);--mantine-color-black-light: var(--mantine-color-black-1);--mantine-color-black-light-hover: var(--mantine-color-black-2);--mantine-color-black-light-color: var(--mantine-color-black-9);--mantine-color-black-outline: var(--mantine-color-black-6);--mantine-color-black-outline-hover: rgba(0, 0, 0, 0.05);--mantine-color-adaptive-0: #000000;--mantine-color-adaptive-1: #000000;--mantine-color-adaptive-2: #000000;--mantine-color-adaptive-3: #000000;--mantine-color-adaptive-4: #000000;--mantine-color-adaptive-5: #000000;--mantine-color-adaptive-6: #000000;--mantine-color-adaptive-7: #000000;--mantine-color-adaptive-8: #000000;--mantine-color-adaptive-9: #000000;--mantine-color-adaptive-text: var(--mantine-color-adaptive-filled);--mantine-color-adaptive-filled: var(--mantine-color-adaptive-6);--mantine-color-adaptive-filled-hover: var(--mantine-color-adaptive-7);--mantine-color-adaptive-light: var(--mantine-color-adaptive-1);--mantine-color-adaptive-light-hover: var(--mantine-color-adaptive-2);--mantine-color-adaptive-light-color: var(--mantine-color-adaptive-9);--mantine-color-adaptive-outline: var(--mantine-color-adaptive-6);--mantine-color-adaptive-outline-hover: rgba(0, 0, 0, 0.05);--mantine-color-adaptive-contrast: var(--mantine-color-white);--mantine-color-ocean-blue-text: var(--mantine-color-ocean-blue-filled);--mantine-color-ocean-blue-filled: var(--mantine-color-ocean-blue-6);--mantine-color-ocean-blue-filled-hover: var(--mantine-color-ocean-blue-7);--mantine-color-ocean-blue-light: var(--mantine-color-ocean-blue-1);--mantine-color-ocean-blue-light-hover: var(--mantine-color-ocean-blue-2);--mantine-color-ocean-blue-light-color: var(--mantine-color-ocean-blue-9);--mantine-color-ocean-blue-outline: var(--mantine-color-ocean-blue-6);--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-oklch-blue-text: var(--mantine-color-oklch-blue-filled);--mantine-color-oklch-blue-filled: var(--mantine-color-oklch-blue-6);--mantine-color-oklch-blue-filled-hover: var(--mantine-color-oklch-blue-7);--mantine-color-oklch-blue-light: var(--mantine-color-oklch-blue-1);--mantine-color-oklch-blue-light-hover: var(--mantine-color-oklch-blue-2);--mantine-color-oklch-blue-light-color: var(--mantine-color-oklch-blue-9);--mantine-color-oklch-blue-outline: var(--mantine-color-oklch-blue-6);--mantine-color-oklch-blue-outline-hover: oklch(62.59% 0.2247 250.29 / 0.05);--mantine-color-bright-pink-text: var(--mantine-color-bright-pink-filled);--mantine-color-bright-pink-filled: var(--mantine-color-bright-pink-6);--mantine-color-bright-pink-filled-hover: var(--mantine-color-bright-pink-7);--mantine-color-bright-pink-light: var(--mantine-color-bright-pink-1);--mantine-color-bright-pink-light-hover: var(--mantine-color-bright-pink-2);--mantine-color-bright-pink-light-color: var(--mantine-color-bright-pink-9);--mantine-color-bright-pink-outline: var(--mantine-color-bright-pink-6);--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><div><header class="DocsHeader-module__yiZmWW__header"><div style="--container-size:calc(90rem * var(--mantine-scale))" class="m_7485cace mantine-Container-root" data-strategy="block"><div class="DocsHeader-module__yiZmWW__headerMain"><div class="DocsHeader-module__yiZmWW__headerMainWrapper"><button style="--burger-size:calc(1.25rem * var(--mantine-scale));--burger-line-size:calc(0.125rem * var(--mantine-scale))" class="mantine-focus-auto DocsHeader-module__yiZmWW__burger m_fea6bf1a mantine-Burger-root m_87cf2631 mantine-UnstyledButton-root" type="button"><div class="m_d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button><div class="DocsHeader-module__yiZmWW__headerMainSection"><a class="DocsHeader-module__yiZmWW__logoLink" aria-label="Mantine home page" href="/"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(2rem * var(--mantine-scale))" class="m_2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g>
11<path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.
11095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div class="DocsHeader-module__yiZmWW__mainLinks"><a class="DocsHeader-module__yiZmWW__mainLink" href="https://ui.mantine.dev">Mantine UI</a><a class="DocsHeader-module__yiZmWW__mainLink" href="https://help.mantine.dev">FAQ</a><a class="DocsHeader-module__yiZmWW__mainLink" href="/colors-generator/">Colors generator</a></div></div></div><div class="DocsHeader-module__yiZmWW__desktopHeaderControls"><button class="mantine-focus-auto DocsHeader-module__yiZmWW__versionControl m_87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" id="mantine-_R_cqqvm_"><span>v<!-- -->9.6.3</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" class="DocsHeader-module__yiZmWW__versionChevron"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg></button><div style="--group-gap:var(--mantine-spacing-xs);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><button class="mantine-focus-auto m_6e98493a m_87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m_602cb89e m_b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m_18a11a80 m_19df8210 m_87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))" class="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m_18a11a80 m_949387b0 m_87cf2631 mantine-UnstyledButton-root" aria-label="Sponsor" href="https://opencollective.com/mantinedev"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M240,102c0,70-103.79,126.66-108.21,129a8,8,0,0,1-7.58,0C119.79,228.66,16,172,16,102A62.07,62.07,0,0,1,78,40c20.65,0,38.73,8.88,50,23.89C139.27,48.88,157.35,40,178,40A62.07,62.07,0,0,1,240,102Z"></path></svg></a><a class="mantine-focus-auto m_18a11a80 m_87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m_18a11a80 m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale));pointer-events:none"><path d="M32,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H40A8,8,0,0,1,32,64ZM216,96H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Zm0,40H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Zm0,40H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path></svg></button><button class="mantine-focus-auto m_18a11a80 m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Toggle color scheme"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="m_83c3d5d1 m_f4e3c6be"><path d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="m_83c3d5d1 m_83c188ce">
11<path d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"></path></svg></button></div></div><div style="--group-gap:calc(0.3125rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="DocsHeader-module__yiZmWW__mobileHeaderControls m_4081bf90 mantine-Group-root"><button class="mantine-focus-auto m_18a11a80 m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path></svg></button><button class="mantine-focus-auto m_18a11a80 m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Toggle color scheme"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="m_83c3d5d1 m_f4e3c6be"><path d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="m_83c3d5d1 m_83c188ce">
11<path d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"></path></svg></button><a class="mantine-focus-auto m_18a11a80 m_949387b0 m_87cf2631 mantine-UnstyledButton-root" aria-label="Sponsor" href="https://opencollective.com/mantinedev"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M240,102c0,70-103.79,126.66-108.21,129a8,8,0,0,1-7.58,0C119.79,228.66,16,172,16,102A62.07,62.07,0,0,1,78,40c20.65,0,38.73,8.88,50,23.89C139.27,48.88,157.35,40,178,40A62.07,62.07,0,0,1,240,102Z"></path></svg></a></div></div><nav class="DocsHeader-module__yiZmWW__headerNavigation"><a class="DocsHeader-module__yiZmWW__navigationLink" href="/getting-started/">Get started</a><a class="DocsHeader-module__yiZmWW__navigationLink" href="/theming/mantine-provider/">Theming & Styles</a><a class="DocsHeader-module__yiZmWW__navigationLink" data-active="true" href="/hooks/package/">Hooks</a><a class="DocsHeader-module__yiZmWW__navigationLink" href="/form/package/">Form</a><a class="DocsHeader-module__yiZmWW__navigationLink" href="/core/package/">Components</a><a class="DocsHeader-module__yiZmWW__navigationLink" href="/x/extensions/">Extensions</a></nav></div></header><div style="--container-size:calc(90rem * var(--mantine-scale))" class="m_7485cace mantine-Container-root" data-strategy="block"><div class="Shell-module__wPV1wW__inner"><nav class="DocsNavbar-module__LJWwtq__navbar"><div style="--sa-corner-width:0px;--sa-corner-height:0px;height:calc(100vh - var(--docs-header-height))" class="m_d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m_c0783ff9 mantine-ScrollArea-viewport" data-scrollbars="xy" data-scrollarea-viewport="true"><div class="m_b1336c6 mantine-ScrollArea-content"><div class="DocsNavbar-module__LJWwtq__categories"><div class="DocsNavbar-module__LJWwtq__category"><div><a data-active="true" class="DocsNavbar-module__LJWwtq__link" href="/hooks/package/">Get started</a></div></div><div class="DocsNavbar-module__LJWwtq__category"><div class="DocsNavbar-module__LJWwtq__categoryTitle">UI and Dom</div><div><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-click-outside/">use-click-outside</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-collapse/">use-collapse</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-drag/">use-drag</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-element-size/">use-element-size</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-event-listener/">use-event-listener</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-file-dialog/">use-file-dialog</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-floating-window/">use-floating-window</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-focus-return/">use-focus-return</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-focus-within/">use-focus-within</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-hover/">use-hover</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-in-viewport/">use-in-viewport</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-intersection/">use-intersection</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-long-press/">use-long-press</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-mask/">use-mask</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-media-query/">use-media-query</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-mouse/">use-mouse</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-move/">use-move</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-mutation-observer/">use-mutation-observer</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-orientation/">use-orientation</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-radial-move/">use-radial-move</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-roving-index/">use-roving-index</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-scroll-spy/">use-scroll-spy</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-scroller/">use-scroller</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-splitter/">use-splitter</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-window-event/">use-window-event</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-window-scroll/">use-window-scroll</a></div></div><div class="DocsNavbar-module__LJWwtq__category"><div class="DocsNavbar-module__LJWwtq__categoryTitle">State management</div><div><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-counter/">use-counter</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-debounced-callback/">use-debounced-callback</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-disclosure/">use-disclosure</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-id/">use-id</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-input-state/">use-input-state</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-list-state/">use-list-state</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-local-storage/">use-local-storage</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-map/">use-map</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-pagination/">use-pagination</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-previous/">use-previous</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-queue/">use-queue</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-selection/">use-selection</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-set/">use-set</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-set-state/">use-set-state</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-state-history/">use-state-history</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-throttled-callback/">use-throttled-callback</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-throttled-state/">use-throttled-state</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-throttled-value/">use-throttled-value</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-toggle/">use-toggle</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-validated-state/">use-validated-state</a></div></div><div class="DocsNavbar-module__LJWwtq__category"><div class="DocsNavbar-module__LJWwtq__categoryTitle">Utilities</div><div><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-clipboard/">use-clipboard</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-document-title/">use-document-title</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-favicon/">use-favicon</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-fetch/">use-fetch</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-hash/">use-hash</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-headroom/">use-headroom</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-idle/">use-idle</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-interval/">use-interval</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-network/">
11use-network</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-os/">use-os</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-page-leave/">use-page-leave</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-scroll-direction/">use-scroll-direction</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-text-selection/">use-text-selection</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-timeout/">use-timeout</a></div></div><div class="DocsNavbar-module__LJWwtq__category"><div class="DocsNavbar-module__LJWwtq__categoryTitle">Lifecycle</div><div><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-did-update/">use-did-update</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-force-update/">use-force-update</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-is-first-render/">use-is-first-render</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-logger/">use-logger</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-mounted/">use-mounted</a><a class="DocsNavbar-module__LJWwtq__link" href="/hooks/use-shallow-effect/">
11use-shallow-effect</a></div></div></div></div></div><div data-orientation="horizontal" class="m_c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px" data-mantine-scrollbar="true"></div><div class="m_c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px" data-mantine-scrollbar="true"></div></div></nav><main class="Shell-module__wPV1wW__content"><div class="PageBase-module__s_5lVq__content"><div class="MdxRawContent-module__YHIC3a__wrapper"><div class="MdxRawContent-module__YHIC3a__container" id="mdx"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle-module__xGHnJq__title m_8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Mantine hooks</h1> 12<p class="MdxTypography-module__90IeMq__paragraph"><a class="mantine-focus-auto m_849cf0da MdxLink-module__z87Hha__link m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><img src="https://img.shields.io/npm/dm/@mantine/hooks" alt="npm"/></a></p> 13<p class="MdxTypography-module__90IeMq__paragraph">The <a class="mantine-focus-auto m_849cf0da MdxLink-module__z87Hha__link m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks">@mantine/hooks</a> package 14provides more than 70 hooks to build custom components. The <code class="m_b183c0a2 mantine-Code-root" dir="ltr">@mantine/hooks</code> 15package is used internally in most other <code class="m_b183c0a2 mantine-Code-root" dir="ltr">@mantine/*</code> packages â 16it is required to be installed in your project to use Mantine components.</p> 17<div id="installation" data-heading="Installation" data-order="2" class="MdxTitle-module__xGHnJq__offset"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle-module__xGHnJq__title m_8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle-module__xGHnJq__link mantine-focus-auto" href="#installation">Installation</a></h2> 18<div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m_89d60db1 mantine-Tabs-root" data-variant="pills" data-orientation="horizontal" id="mantine-_R_illbqvm_"><div class="m_89d33d6d mantine-Tabs-list" data-variant="pills" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m_c3381914 MdxNpmScript-module__G5Y7tW__tab m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root" data-variant="pills" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-_R_illbqvm_-tab-yarn" aria-selected="true" tabindex="0"><span class="m_42bbd1ae mantine-Tabs-tabLabel"><div style="--group-gap:calc(0.3125rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><svg style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript-module__G5Y7tW__icon" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256"><path fill="#368FB9" d="M128 0C57.328 0 0 57.328 0 128s57.328 128 128 128 128-57.328 128-128S198.672 0 128 0"></path><path fill="#FFF" d="M203.317 174.06c-7.907 1.878-11.91 3.608-21.695 9.983-15.271 9.884-31.976 14.48-31.976 14.48s-1.383 2.076-5.387 3.015c-6.918 1.68-32.963 3.114-35.335 3.163-6.376.05-10.28-1.63-11.367-4.25-3.311-7.907 4.744-11.367 4.744-11.367s-1.779-1.087-2.817-2.076c-.939-.939-1.927-2.816-2.224-2.125-1.235 3.015-1.878 10.379-5.189 13.69-4.547 4.596-13.146 3.064-18.236.395-5.585-2.965.395-9.933.395-9.933s-3.015 1.779-5.436-1.878c-2.175-3.36-4.2-9.094-3.657-16.16.593-8.056 9.587-15.865 9.587-15.865s-1.581-11.91 3.608-24.117c4.695-11.12 17.347-20.065 17.347-20.065s-10.626-11.762-6.672-22.338c2.57-6.92 3.608-6.87 4.448-7.166 2.965-1.137 5.831-2.373 7.957-4.695 10.625-11.466 24.166-9.292 24.166-9.292s6.425-19.52 12.356-15.715c1.828 1.186 8.401 15.814 8.401 15.814s7.018-4.102 7.809-2.57c4.25 8.254 4.744 24.019 2.866 33.607-3.163 15.814-11.07 24.315-14.233 29.652-.741 1.236 8.5 5.14 14.332 21.3 5.387 14.777.593 27.182 1.433 28.566.148.247.198.346.198.346s6.177.494 18.582-7.166c6.622-4.102 14.48-8.698 23.425-8.797 8.65-.149 9.094 9.983 2.57 11.564zm11.763-7.265c-.89-7.017-6.82-11.86-14.431-11.762-11.367.148-20.905 6.03-27.231 9.934-2.471 1.532-4.596 2.669-6.425 3.509.395-5.733.05-13.245-2.916-21.498-3.608-9.885-8.45-15.963-11.91-19.472 4.003-5.832 9.489-14.332 12.058-27.478 2.224-11.219 1.533-28.664-3.558-38.45-1.038-1.976-2.767-3.41-4.942-4.003-.89-.247-2.57-.741-5.881.198-4.991-10.329-6.721-11.416-8.056-12.306-2.767-1.779-6.029-2.174-9.093-1.038-4.102 1.483-7.61 5.437-10.922 12.454a51.47 51.47 0 00-1.334 3.015c-6.277.445-16.161 2.718-24.513 11.762-1.038 1.137-3.064 1.977-
185.19 2.768h.05c-4.349 1.532-6.326 5.09-8.747 11.515-3.361 8.994.098 17.84 3.508 23.574-4.645 4.151-10.823 10.773-14.084 18.532-4.053 9.588-4.498 18.978-4.35 24.068-3.459 3.658-8.796 10.527-9.39 18.237-.79 10.773 3.114 18.088 4.844 20.756.494.791 1.038 1.434 1.63 2.076-.197 1.334-.246 2.768.05 4.25.643 3.46 2.817 6.277 6.128 8.056 6.524 3.46 15.617 4.942 22.635 1.433 2.52 2.669 7.117 5.239 15.469 5.239h.494c2.125 0 29.109-1.433 36.967-3.36 3.509-.841 5.93-2.324 7.512-3.658 5.04-1.582 18.977-6.326 32.123-14.826 9.291-6.03 12.504-7.315 19.423-8.995 6.72-1.63 10.922-7.759 10.082-14.53z"></path></svg><span>yarn</span></div></span></button><button class="mantine-focus-auto m_c3381914 MdxNpmScript-module__G5Y7tW__tab m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root" data-variant="pills" data-orientation="horizontal" type="button" role="tab" id="mantine-_R_illbqvm_-tab-npm" aria-selected="false" tabindex="-1"><span class="m_42bbd1ae mantine-Tabs-tabLabel"><div style="--group-gap:calc(0.3125rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><svg style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript-module__G5Y7tW__icon" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg><span>npm</span></div></span></button></div><div class="m_b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-_R_illbqvm_-panel-yarn" aria-labelledby="mantine-_R_illbqvm_-tab-yarn"><!--&--><div class="MdxPre-module__dnG_LW__code MdxNpmScript-module__G5Y7tW__code m_e597c321 mantine-CodeHighlight-codeHighlight" data-without-radius="true" dir="ltr"><div class="m_be7e9c9c mantine-CodeHighlight-controls"><button style="--ai-bg:transparent;--ai-hover:transparent;--ai-color:inherit;--ai-bd:none" class="mantine-focus-auto mantine-active m_d498bab7 mantine-CodeHighlight-control m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></span></button></div><div style="--scrollarea-scrollbar-size:calc(0.25rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="m_f744fd40 mantine-CodeHighlight-scrollarea m_d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden;overscroll-behavior-inline:none" class="m_c0783ff9 mantine-ScrollArea-viewport" data-scrollbars="xy" data-scrollarea-viewport="true"><div class="m_b1336c6 mantine-ScrollArea-content"><div class="m_9f507240 mantine-CodeHighlight-codeWrapper"><pre class="m_2c47c4fd mantine-CodeHighlight-pre"><code class="m_5caae6d3 mantine-CodeHighlight-code">yarn add @mantine/hooks</code></pre></div></div></div></div><button class="mantine-focus-auto m_c9378bc2 mantine-CodeHighlight-showCodeButton m_87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div><!--/&--></div><div style="display:none" class="m_b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-_R_illbqvm_-panel-npm" aria-labelledby="mantine-_R_illbqvm_-tab-npm"></div></div> 19<div id="usage" data-heading="Usage" data-order="2" class="MdxTitle-module__xGHnJq__offset"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle-module__xGHnJq__title m_8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle-module__xGHnJq__link mantine-focus-auto" href="#usage">Usage</a></h2> 20<p class="MdxTypography-module__90IeMq__paragraph">The <code class="m_b183c0a2 mantine-Code-root" dir="ltr">@mantine/hooks</code> package can be used in any web React application, and state 21management hooks (like <a class="mantine-focus-auto m_849cf0da MdxLink-module__z87Hha__link m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-pagination/">use-pagination</a> or <a class="mantine-focus-auto m_849cf0da MdxLink-module__z87Hha__link m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-queue/">use-queue</a>) 22are also compatible with React Native. The package can be used even if you 23do not use Mantine components or other Mantine libraries â it is standalone
24and has no dependencies except React.</p> 25<p class="MdxTypography-module__90IeMq__paragraph">Example of using <a class="mantine-focus-auto m_849cf0da MdxLink-module__z87Hha__link m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-move/">use-move</a> hook to create a custom slider:</p> 26<div class="m_761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(31.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m_a3c6e060" data-with-padding="true" data-centered="true"><div class="m_ad8eb9d6"><div class="m_1e8dea5f"><div class="m_b34cb76e"><div class="m_9decab9f" style="width:calc(30% - var(--thumb-width) / 2 - var(--thumb-offset) / 2)"><span class="m_b2d44517" data-filled="true">30</span></div><div class="m_b2774b70" style="width:calc(70% - var(--thumb-width) / 2 - var(--thumb-offset) / 2)"><span class="m_b2d44517">70</span></div><div class="m_b34877f9" style="left:calc(30% - var(--thumb-width) / 2)"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></div></div></div></div></div><div class="m_66990f0a m_5cb1b9c8 mantine-CodeHighlightTabs-root"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m_7b14120b mantine-CodeHighlightTabs-filesScrollarea m_d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m_c0783ff9 mantine-ScrollArea-viewport" data-scrollbars="xy" data-scrollarea-viewport="true"><div class="m_b1336c6 mantine-ScrollArea-content"><div class="m_38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m_5cac2e62 mantine-CodeHighlightTabs-file m_87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m_b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" class="" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256"><path fill="#3178C6" d="M20 0h216c11.046 0 20 8.954 20 20v216c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0z"></path><path fill="#FFF" d="M150.518 200.475v27.62c4.492 2.302 9.805 4.028 15.938 5.179 6.133 1.151 12.597 1.726 19.393 1.726 6.622 0 12.914-.633 18.874-1.899 5.96-1.266 11.187-3.352 15.678-6.257 4.492-2.906 8.048-6.704 10.669-11.394 2.62-4.689 3.93-10.486 3.93-17.391 0-5.006-.749-9.394-2.246-13.163a30.748 30.748 0 00-6.479-10.055c-2.821-2.935-6.205-5.567-10.149-7.898-3.945-2.33-8.394-4.531-13.347-6.602-3.628-1.497-6.881-2.949-9.761-4.359-2.879-1.41-5.327-2.848-7.342-4.316-2.016-1.467-3.571-3.021-4.665-4.661-1.094-1.64-1.641-3.495-1.641-5.567 0-1.899.489-3.61 1.468-5.135s2.362-2.834 4.147-3.927c1.785-1.094 3.973-1.942
266.565-2.547 2.591-.604 5.471-.906 8.638-.906 2.304 0 4.737.173 7.299.518 2.563.345 5.14.877 7.732 1.597a53.669 53.669 0 017.558 2.719 41.7 41.7 0 016.781 3.797v-25.807c-4.204-1.611-8.797-2.805-13.778-3.582-4.981-.777-10.697-1.165-17.147-1.165-6.565 0-12.784.705-18.658 2.115-5.874 1.409-11.043 3.61-15.506 6.602-4.463 2.993-7.99 6.805-10.582 11.437-2.591 4.632-3.887 10.17-3.887 16.615 0 8.228 2.375 15.248 7.127 21.06 4.751 5.811 11.963 10.731 21.638 14.759a291.458 291.458 0 0110.625 4.575c3.283 1.496 6.119 3.049 8.509 4.66 2.39 1.611 4.276 3.366 5.658 5.265 1.382 1.899 2.073 4.057 2.073 6.474a9.901 9.901 0 01-1.296 4.963c-.863 1.524-2.174 2.848-3.93 3.97-1.756 1.122-3.945 1.999-6.565 2.632-2.62.633-5.687.95-9.2.95-5.989 0-11.92-1.05-17.794-3.151-5.875-2.1-11.317-5.25-16.327-9.451zm-46.036-68.733H140V109H41v22.742h35.345V233h28.137V131.742z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m_5cac2e62 mantine-CodeHighlightTabs-file m_87cf2631 mantine-UnstyledButton-root" type="button"><span class="m_b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path fill="#639" d="M0 0h840a160 160 0 01160 160v680a160 160 0 01-160 160H160A160 160 0 010 840V0z"></path><path fill="#fff" d="M253 817V649c0-67 43-103 108-103 64-1 104 41 102 112h-74c2-27-10-47-30-46-25 0-32 17-32 49v146c0 31 10 46 32 47 23 0 32-23 30-49h74c4 73-42 116-107 115-63 0-103-35-103-103zm237-12h69c1 32 11 52 33 52s30-13 30-43c0-25-11-39-38-52l-26-12c-46-22-65-49-65-103 0-60 38-102 100-102s95 43 96 113h-67c0-29-6-49-28-49-20 0-30 10-30 35s9 35 33 45l24 11c51 24 73 55 73 113 0 69-39 107-103 107s-100-44-101-115zm226 0h70c0 32 11 52 32 52s30-13 30-43c0-25-10-39-38-52l-26-12c-46-22-64-49-64-103 0-60 37-102 100-102s94 43 96 113h-67c-1-29-7-49-29-49-20 0-29 10-29 35s8 35 32 45l25 11c50 24 72 55 72 113 0 69-39 107-103 107s-100-44-101-115z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m_c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px" data-mantine-scrollbar="true"></div><div class="m_c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px" data-mantine-scrollbar="true"></div></div><div class="m_e597c321 mantine-CodeHighlightTabs-codeHighlight" dir="ltr"><div class="m_be7e9c9c mantine-CodeHighlightTabs-controls" data-with-offset="true"><button style="--ai-bg:transparent;--ai-hover:transparent;--ai-color:inherit;--ai-bd:none" class="mantine-focus-auto mantine-active m_d498bab7 mantine-CodeHighlightTabs-control m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Expand code"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 11v8l3 -3m-6 0l3 3"></path><path d="M9 7l1 0"></path><path d="M14 7l1 0"></path><path d="M19 7l1 0"></path><path d="M4 7l1 0"></path></svg></span></button><button style="--ai-bg:transparent;--ai-hover:transparent;--ai-color:inherit;--ai-bd:none" class="mantine-focus-auto mantine-active m_d498bab7 mantine-CodeHighlightTabs-control m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></span></button></div><div style="--scrollarea-scrollbar-size:calc(0.25rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="m_f744fd40 mantine-CodeHighlightTabs-scrollarea m_d57069b5 mantine-ScrollArea-root" dir="ltr" data-collapsed="true"><div style="overflow-x:hidden;overflow-y:hidden;overscroll-behavior-inline:none" class="m_c0783ff9 mantine-ScrollArea-viewport" data-scrollbars="xy" data-scrollarea-viewport="true"><div class="m_b1336c6 mantine-ScrollArea-content"><div class="m_9f507240 mantine-CodeHighlightTabs-codeWrapper"><pre class="m_2c47c4fd mantine-CodeHighlightTabs-pre" data-with-offset="true"><code class="m_5caae6d3 mantine-CodeHighlightTabs-code">
26import { useState } from 'react'; 27import { DotsSixVerticalIcon } from '@phosphor-icons/react'; 28import { clamp, useMove } from '@mantine/hooks'; 29import classes from './Demo.module.css'; 30 31function Demo() { 32 const [value, setValue] = useState(0.3); 33 const { ref } = useMove(({ x }) => setValue(clamp(x, 0.1, 0.9))); 34 const labelFloating = value < 0.2 || value > 0.8; 35 36 return ( 37 <div className={classes.root}> 38 <div className={classes.track} ref={ref}> 39 <div 40 className={classes.filled} 41 style={{ 42 width: `calc(${value * 100}% - var(--thumb-width) / 2 - var(--thumb-offset) / 2)`, 43 }} 44 > 45 <span className={classes.label} data-floating={labelFloating || undefined} data-filled> 46 {(value * 100).toFixed(0)} 47 </span> 48 </div> 49 50 <div 51 className={classes.empty} 52 style={{ 53 width: `calc(${(1 - value) * 100}% - var(--thumb-width) / 2 - var(--thumb-offset) / 2)`, 54 }} 55 > 56 <span className={classes.label} data-floating={labelFloating || undefined}> 57 {((1 - value) * 100).toFixed(0)} 58 </span> 59 </div> 60 61 <div 62 className={classes.thumb} 63 style={{ left: `calc(${value * 100}% - var(--thumb-width) / 2)` }} 64 > 65 <DotsSixVerticalIcon /> 66 </div> 67 </div> 68 </div> 69 ); 70}</code></pre></div></div></div></div><button class="mantine-focus-auto m_c9378bc2 mantine-CodeHighlightTabs-showCodeButton m_87cf2631 mantine-UnstyledButton-root" type="button">Expand code</button></div></div></div> 71<div id="license" data-heading="License" data-order="2" class="MdxTitle-module__xGHnJq__offset"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle-module__xGHnJq__title m_8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle-module__xGHnJq__link mantine-focus-auto" href="#license">License</a></h2> 72<p class="MdxTypography-module__90IeMq__paragraph">MIT</p><div class="MdxSiblings-module__v-nmra__root"><a class="MdxSiblings-module__v-nmra__link mantine-focus-auto" href="/guides/controlled-vs-uncontrolled/"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="MdxSiblings-module__v-nmra__icon"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg><p class="mantine-focus-auto MdxSiblings-module__v-nmra__title m_b6d8b162 mantine-Text-root">Controlled vs Uncontrolled</p></a><a class="MdxSiblings-module__v-nmra__link mantine-focus-auto" href="/hooks/use-click-outside/"><p class="mantine-focus-auto MdxSiblings-module__v-nmra__title m_b6d8b162 mantine-Text-root">use-click-outside</p><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="MdxSiblings-module__v-nmra__icon"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></div></div><div class="MdxRawContent-module__YHIC3a__tableOfContents"></div></div></div><div class="DocsFooter-module__IQhwVq__root"><div class="DocsFooter-module__IQhwVq__spacer"></div><footer class="DocsFooter-module__IQhwVq__wrapper width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(73.125rem * var(--mantine-scale))" class="m_7485cace mantine-Container-root" data-strategy="block"><div class="DocsFooter-module__IQhwVq__inner"><div class="DocsFooter-module__IQhwVq__logoSection"><a class="Logo-module__VZ1V8q__logo mantine-focus-auto" aria-label="Mantine" href="/"><span class="m_515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m_2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g>
72<path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.
72095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto DocsFooter-module__IQhwVq__description m_b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="DocsFooter-module__IQhwVq__groups"><div class="LinksGroup-module__TciAwa__wrapper"><p class="mantine-focus-auto LinksGroup-module__TciAwa__title m_b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup-module__TciAwa__link m_b6d8b162 mantine-Text-root" href="https://opencollective.com/mantinedev">OpenCollective</a><a class="mantine-focus-auto LinksGroup-module__TciAwa__link m_b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup-module__TciAwa__link m_b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup-module__TciAwa__link m_b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">GitHub Releases</a></div><div class="LinksGroup-module__TciAwa__wrapper"><p class="mantine-focus-auto LinksGroup-module__TciAwa__title m_b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup-module__TciAwa__link m_b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup-module__TciAwa__link m_b6d8b162 mantine-Text-root" href="https://x.com/mantinedev">Follow on X</a><a class="mantine-focus-auto LinksGroup-module__TciAwa__link m_b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup-module__TciAwa__link m_b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup-module__TciAwa__wrapper"><p class="mantine-focus-auto LinksGroup-module__TciAwa__title m_b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup-module__TciAwa__link m_b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup-module__TciAwa__link m_b6d8b162 mantine-Text-root" href="https://help.mantine.dev">Help Center</a><a class="mantine-focus-auto LinksGroup-module__TciAwa__link m_b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup-module__TciAwa__link m_b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="DocsFooter-module__IQhwVq__afterFooter"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto DocsFooter-module__IQhwVq__afterFooterNote m_b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="DocsFooter-module__IQhwVq__social"><a style="--button-radius:var(--mantine-radius-md);--button-color:var(--mantine-color-white)" class="mantine-focus-auto mantine-active SocialButton-module__86RcBW__socialButton SocialButton-module__86RcBW__discordButton DocsFooter-module__IQhwVq__socialButton m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m_80f1301b mantine-Button-inner"><span class="SocialButton-module__86RcBW__socialButtonSection m_a74036a mantine-Button-section" data-position="left"><svg style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199">
72<path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m_811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md);--button-color:var(--mantine-color-white)" class="mantine-focus-auto mantine-active SocialButton-module__86RcBW__socialButton SocialButton-module__86RcBW__xButton DocsFooter-module__IQhwVq__socialButton m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://x.com/mantinedev"><span class="m_80f1301b mantine-Button-inner"><span class="SocialButton-module__86RcBW__socialButtonSection m_a74036a mantine-Button-section" data-position="left"><svg style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path></svg></span><span class="m_811560b9 mantine-Button-label">Follow Mantine on X</span></span></a></div></div></div></div></footer></div></main></div></div></div></div>
72<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/package","query":{},"buildId":"Znu12BTkm3tzbiqqkSQF7","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script>
72</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.