PageSourceSearch

https://mantine.dev/

html mantine.dev collected 2026-10-03 21:26:09 UTC 283,682 bytes, 238 lines download raw bytes

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=""/><title data-next-head="">Mantine</title><meta name="description" content="A fully featured React components library with 120+ customizable components, hooks, and utilities. Build accessible web applications faster." 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=""/><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 href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&amp;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=""/><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/2kv6ywavfs7om.js" defer=""></script>
7<script src="/_next/static/chunks/3l-9_vm-j8sgy.js" defer=""></script>
7<script src="/_next/static/chunks/2g-thc7k5fquq.js" defer=""></script>
7<script src="/_next/static/chunks/0yhmarall7x4t.js" defer=""></script>
7<script src="/_next/static/chunks/2bq-a3s5i483g.js" defer=""></script>
7<script src="/_next/static/chunks/0o6jcje_21fkr.js" defer=""></script>
7<script src="/_next/static/chunks/1x5hgnw1sxfbw.js" defer=""></script>
7<script src="/_next/static/chunks/117qea5mwgs4f.js" defer=""></script>
7<script src="/_next/static/chunks/3sqssdit27l0e.js" defer=""></script>
7<script src="/_next/static/chunks/0_elky7d02mid.js" defer=""></script>
7<script src="/_next/static/chunks/1-z98vwgti8ce.js" defer=""></script>
7<script src="/_next/static/chunks/1l2qbqtm71x7p.js" defer=""></script>
7<script src="/_next/static/chunks/30vf9fdsvfygh.js" defer=""></script>
7<script src="/_next/static/chunks/2j7sj4b58bcrn.js" defer=""></script>
7<script src="/_next/static/chunks/0eydnbaaqc48y.js" defer=""></script>
7<script src="/_next/static/chunks/0mlenjjd3qbii.js" defer=""></script>
7<script src="/_next/static/chunks/turbopack-29wmohyyam9su.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="/_next/static/media/new.087_kask-27-k.webp"/><link rel="preload" as="image" href="https://images.unsplash.com/photo-1598928506311-c55ded91a20c?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=720&amp;q=80"/><link rel="preload" as="image" href="https://images.unsplash.com/photo-1567767292278-a4f21aa2d36e?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=720&amp;q=80"/><link rel="preload" as="image" href="https://images.unsplash.com/photo-1605774337664-7a846e9cdf17?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=720&amp;q=80"/><link rel="preload" as="image" href="https://images.unsplash.com/photo-1554995207-c18c203602cb?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=720&amp;q=80"/><link rel="preload" as="image" href="https://images.unsplash.com/photo-1616486029423-aaa4789e8c9a?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=720&amp;q=80"/><link rel="preload" as="image" href="https://avatars.githubusercontent.com/u/16137686?v=4"/><link rel="preload" as="image" href="https://avatars.githubusercontent.com/u/192025?v=4"/><link rel="preload" as="image" href="https://avatars.githubusercontent.com/u/18201458?v=4"/><link rel="preload" as="image" href="https://avatars.githubusercontent.com/u/57042505?v=4"/><link rel="preload" as="image" href="https://avatars.githubusercontent.com/u/10228483?v=4"/><link rel="preload" as="image" href="https://avatars.githubusercontent.com/u/40026131?v=4"/><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" data-without-nav="true"><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></div></header><main><div class="HomePage-module__WYAHaG__root"><section class="HomePageJumbotron-module__LspnZW__root"><div class="HomePageJumbotron-module__LspnZW__overlay"></div><div style="--container-size:calc(90rem * var(--mantine-scale))" class="HomePageJumbotron-module__LspnZW__container m_7485cace mantine-Container-root" data-strategy="block"><div style="background-image:url(/_next/static/media/light-collage.2oawi8ion2ksp.webp)" class="HomePageJumbotron-module__LspnZW__image mantine-dark-hidden"></div><div style="background-image:url(/_next/static/media/dark-collage.358nbgvbkao8f.webp)" class="HomePageJumbotron-module__LspnZW__image mantine-light-hidden"></div><div class="HomePageJumbotron-module__LspnZW__main"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="HomePageTitle-module__6jceMG__title m_8a5d1357 mantine-Title-root" data-order="1">A fully featured React<br/> components library</h1><p class="mantine-focus-auto HomePageDescription-module__9jxgeW__root m_b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever – Mantine includes more than 120 customizable components and 70 hooks to cover you in any situation</p><div class="HomePageJumbotron-module__LspnZW__actions"><a style="--button-justify:space-between;--button-color:var(--mantine-color-white)" class="mantine-focus-auto mantine-active HomePageJumbotron-module__LspnZW__action m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-with-right-section="true" data-get-started="true" justify="space-between" href="/getting-started/"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Get Started</span><span class="m_a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></span></span></a><a style="--button-justify:space-between;--button-color:var(--mantine-color-white)" class="mantine-focus-auto mantine-active HomePageJumbotron-module__LspnZW__action m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-with-right-section="true" data-github="true" justify="space-between" href="https://github.com/mantinedev/mantine"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">GitHub</span><span class="m_a74036a mantine-Button-section" data-position="right"><svg style="width:calc(1.625rem * var(--mantine-scale));height:calc(1.625rem * 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></span></span></a></div></div></div></section><div style="--container-size:calc(90rem * var(--mantine-scale))" class="HomePageSponsors-module__OgcdSW__inner m_7485cace mantine-Container-root" data-strategy="block"><p class="mantine-focus-auto HomePageSponsors-module__OgcdSW__title m_b6d8b162 mantine-Text-root">Sponsored by</p><div class="HomePageSponsors-module__OgcdSW__sponsors"><a href="https://www.metabase.com/?utm_campaign=opencollective" target="_blank" rel="noreferrer" aria-label="Mantine is sponsored by Metabase 💋" class="HomePageSponsors-module__OgcdSW__sponsor"><img class="HomePageSponsors-module__OgcdSW__image m_9e117634 mantine-Image-root" src="https://opencollective-production.s3.us-west-1.amazonaws.com/account-avatar/6daa6216-6749-4a98-96c9
11-976d311cec1e/54813187-8601-458a-bec2-8ac3df42919b.png" alt="Metabase" loading="lazy"/><span class="HomePageSponsors-module__OgcdSW__name">Metabase</span></a><a href="https://www.propelauth.com" target="_blank" rel="noreferrer" aria-label="Mantine is sponsored by PropelAuth 💋" class="HomePageSponsors-module__OgcdSW__sponsor"><img class="HomePageSponsors-module__OgcdSW__image m_9e117634 mantine-Image-root" src="https://opencollective-production.s3.us-west-1.amazonaws.com/account-avatar/e6d0bf51-6618-4c51-a19f-a6f79d71779b/social-logo-small.png" alt="PropelAuth" loading="lazy"/><span class="HomePageSponsors-module__OgcdSW__name">PropelAuth</span></a><a href="https://www.medplum.com/" target="_blank" rel="noreferrer" aria-label="Mantine is sponsored by Medplum 💋" class="HomePageSponsors-module__OgcdSW__sponsor"><img class="HomePageSponsors-module__OgcdSW__image m_9e117634 mantine-Image-root" src="https://opencollective-production.s3.us-west-1.amazonaws.com/account-avatar/ce7222f1-22a5-48d7-8d54-a91405c1b02a/medplum-symbol-512x512.png" alt="Medplum" loading="lazy"/><span class="HomePageSponsors-module__OgcdSW__name">Medplum</span></a><a href="https://www.n-ix.com/" target="_blank" rel="noreferrer" aria-label="Mantine is sponsored by N-iX Ltd 💋" class="HomePageSponsors-module__OgcdSW__sponsor"><img class="HomePageSponsors-module__OgcdSW__image m_9e117634 mantine-Image-root" src="https://opencollective-production.s3.us-west-1.amazonaws.com/account-avatar/6d43cabd-7f83-4770-8b2e-068e70aded73/N-iX_Logo-RGB_Main%20(2).jpg" alt="N-iX Ltd" loading="lazy"/><span class="HomePageSponsors-module__OgcdSW__name">N-iX Ltd</span></a><a href="https://followerhit.de/" target="_blank" rel="noreferrer" aria-label="Mantine is sponsored by Followerhit 💋" class="HomePageSponsors-module__OgcdSW__sponsor"><img class="HomePageSponsors-module__OgcdSW__image m_9e117634 mantine-Image-root" src="https://opencollective-production.s3.us-west-1.amazonaws.com/account-avatar/58c39ad3-082f-46e5-aa75-e1a195d3179b/followerhit-square-d.webp" alt="Followerhit" loading="lazy"/><span class="HomePageSponsors-module__OgcdSW__name">Followerhit</span></a><a href="https://opencollective.com/mantinedev" target="_blank" rel="noreferrer" aria-label="You? Sponsor Mantine" class="HomePageSponsors-module__OgcdSW__sponsor"><span class="HomePageSponsors-module__OgcdSW__name">You? ❤️</span><div class="HomePageSponsors-module__OgcdSW__description">Sponsor Mantine to get featured here and support the project.</div></a></div></div><section class="HomePageLLM-module__92scuG__root"><div style="--container-size:calc(90rem * var(--mantine-scale))" class="m_7485cace mantine-Container-root" data-strategy="block"><style data-mantine-styles="inline">.__m__-_R_krqvm_{--sg-spacing-x:calc(3.125rem * var(--mantine-scale));--sg-spacing-y:calc(1.875rem * var(--mantine-scale));}@media(min-width: 62em){.__m__-_R_krqvm_{--sg-cols:2;}}</style><div class="m_2415a157 mantine-SimpleGrid-root __m__-_R_krqvm_"><div class="HomePageLLM-module__92scuG__column"><div class="HomePageLLM-module__92scuG__main"><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="HomePageTitle-module__6jceMG__title m_8a5d1357 mantine-Title-root" data-order="2">Built for the AI-assisted workflow</h2><p class="mantine-focus-auto HomePageDescription-module__9jxgeW__root m_b6d8b162 mantine-Text-root">LLM-optimized docs, agent skills for complex tasks, and an MCP server for direct API access — Mantine is designed to work with Cursor, Claude Code, Windsurf, and every AI coding tool you already use.</p><a class="mantine-focus-auto m_849cf0da HomePageLearnMore-module__XDXsfq__root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/llms/"><span class="HomePageLearnMore-module__XDXsfq__inner">Learn more about LLM integrations<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></span></a><div class="HomePageFeature-module__G3uiSa__features"><section class="HomePageFeature-module__G3uiSa__feature"><div style="--ti-size:calc(3.125rem * var(--mantine-scale));--ti-radius:var(--mantine-radius-md)" class="HomePageFeature-module__G3uiSa__featureIcon m_7341320d mantine-ThemeIcon-root" radius="md"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216
11Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z"></path></svg></div><div><h3 class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureTitle m_b6d8b162 mantine-Text-root">LLM documentation</h3><p class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureDescription m_b6d8b162 mantine-Text-root">llms.txt and llms-full.txt files follow the LLMs.txt standard – use them with Cursor, Windsurf, ChatGPT, Claude, and other AI tools</p></div></section><section class="HomePageFeature-module__G3uiSa__feature"><div style="--ti-size:calc(3.125rem * var(--mantine-scale));--ti-radius:var(--mantine-radius-md)" class="HomePageFeature-module__G3uiSa__featureIcon m_7341320d mantine-ThemeIcon-root" radius="md"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><path d="M248,124a56.11,56.11,0,0,0-32-50.61V72a48,48,0,0,0-88-26.49A48,48,0,0,0,40,72v1.39a56,56,0,0,0,0,101.2V176a48,48,0,0,0,88,26.49A48,48,0,0,0,216,176v-1.41A56.09,56.09,0,0,0,248,124ZM88,208a32,32,0,0,1-31.81-28.56A55.87,55.87,0,0,0,64,180h8a8,8,0,0,0,0-16H64A40,40,0,0,1,50.67,86.27,8,8,0,0,0,56,78.73V72a32,32,0,0,1,64,0v68.26A47.8,47.8,0,0,0,88,128a8,8,0,0,0,0,16,32,32,0,0,1,0,64Zm104-44h-8a8,8,0,0,0,0,16h8a55.87,55.87,0,0,0,7.81-.56A32,32,0,1,1,168,144a8,8,0,0,0,0-16,47.8,47.8,0,0,0-32,12.26V72a32,32,0,0,1,64,0v6.73a8,8,0,0,0,5.33,7.54A40,40,0,0,1,192,164Zm16-52a8,8,0,0,1-8,8h-4a36,36,0,0,1-36-36V80a8,8,0,0,1,16,0v4a20,20,0,0,0,20,20h4A8,8,0,0,1,208,112ZM60,120H56a8,8,0,0,1,0-16h4A20,20,0,0,0,80,84V80a8,8,0,0,1,16,0v4A36,36,0,0,1,60,120Z"></path></svg></div><div><h3 class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureTitle m_b6d8b162 mantine-Text-root">Skills for AI agents</h3><p class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureDescription m_b6d8b162 mantine-Text-root">Install Mantine skills for complex tasks like building forms, custom components, and combobox-based inputs</p></div></section><section class="HomePageFeature-module__G3uiSa__feature"><div style="--ti-size:calc(3.125rem * var(--mantine-scale));--ti-radius:var(--mantine-radius-md)" class="HomePageFeature-module__G3uiSa__featureIcon m_7341320d mantine-ThemeIcon-root" radius="md"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><path d="M237.66,66.34a8,8,0,0,0-11.32,0L192,100.69,155.31,64l34.35-34.34a8,8,0,1,0-11.32-11.32L144,52.69,117.66,26.34a8,8,0,0,0-11.32,11.32L112.69,44l-53,53a40,40,0,0,0,0,56.57l15.71,15.71L26.34,218.34a8,8,0,0,0,11.32,11.32l49.09-49.09,15.71,15.71a40,40,0,0,0,56.57,0l53-53,6.34,6.35a8,8,0,0,0,11.32-11.32L203.31,112l34.35-34.34A8,8,0,0,0,237.66,66.34ZM147.72,185a24,24,0,0,1-33.95,0L71,142.23a24,24,0,0,1,0-33.95l53-53L200.69,132Z"></path></svg></div><div><h3 class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureTitle m_b6d8b162 mantine-Text-root">MCP server</h3><p class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureDescription m_b6d8b162 mantine-Text-root">Use @mantine/mcp-server to give AI agents direct access to component docs, props, and search across the entire library</p></div></section><section class="HomePageFeature-module__G3uiSa__feature"><div style="--ti-size:calc(3.125rem * var(--mantine-scale));--ti-radius:var(--mantine-radius-md)" class="HomePageFeature-module__G3uiSa__featureIcon m_7341320d mantine-ThemeIcon-root" radius="md"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><path d="M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64ZM160,88h40a8,8,0,0,1,0,16H160a8,8,0,0,1,0-16Zm48,40a8,8,0,0,1-8,8H160a8,8,0,0,1,0-16h40A8,8,0,0,1,208,128Zm0,32a8,8,0,0,1-8,8H160a8,8,0,0,1,0-16h40A8,8,0,0,1,208,160Z"></path></svg></div><div><h3 class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureTitle m_b6d8b162 mantine-Text-root">Always up to date</h3><p class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureDescription m_b6d8b162 mantine-Text-root">
11LLM documentation is regenerated with every release – AI tools always have access to the latest API and examples</p></div></section></div></div></div><div class="HomePageLLM-module__92scuG__column"><div><div class="HomePageTabs-module__McP4fa__controls"><button class="mantine-focus-auto HomePageTabs-module__McP4fa__control m_87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="HomePageTabs-module__McP4fa__controlLabel">Documentation</span></button><button class="mantine-focus-auto HomePageTabs-module__McP4fa__control m_87cf2631 mantine-UnstyledButton-root" type="button"><span class="HomePageTabs-module__McP4fa__controlLabel">Skills</span></button><button class="mantine-focus-auto HomePageTabs-module__McP4fa__control m_87cf2631 mantine-UnstyledButton-root" type="button"><span class="HomePageTabs-module__McP4fa__controlLabel">MCP server</span></button></div><div class="HomePageTabs-module__McP4fa__content"><div class="MdxPre-module__dnG_LW__code HomePageLLM-module__92scuG__code m_e597c321 mantine-CodeHighlight-codeHighlight" 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"># Reference Mantine docs in Cursor
12@Docs https://mantine.dev/llms.txt
13
14# Or download full documentation
15curl -o mantine-docs.txt https://mantine.dev/llms-full.txt
16
17# Use with ChatGPT/Claude
18&quot;Using Mantine, how do I create a dark mode toggle?
19Reference: https://mantine.dev/llms.txt&quot;</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></div></div></div></section><section class="HomePageComponents-module__avxBcG__root"><div style="--container-size:calc(90rem * var(--mantine-scale))" class="m_7485cace mantine-Container-root" data-strategy="block"><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="HomePageTitle-module__6jceMG__title m_8a5d1357 mantine-Title-root" data-order="2">120+ components</h2><p class="mantine-focus-auto HomePageDescription-module__9jxgeW__root HomePageComponents-module__avxBcG__description m_b6d8b162 mantine-Text-root">Build your next app faster with high-quality, well-tested components. Mantine includes everything you need to create complex web applications with ease: custom select, date pickers, notifications, modals, and more.</p><div><div class="HomePageTabs-module__McP4fa__controls"><button class="mantine-focus-auto HomePageTabs-module__McP4fa__control m_87cf2631 mantine-UnstyledButton-root" data-active="true" type="button">
19<span class="HomePageTabs-module__McP4fa__controlLabel">Inputs</span></button><button class="mantine-focus-auto HomePageTabs-module__McP4fa__control m_87cf2631 mantine-UnstyledButton-root" type="button"><span class="HomePageTabs-module__McP4fa__controlLabel">Overlays</span></button><button class="mantine-focus-auto HomePageTabs-module__McP4fa__control m_87cf2631 mantine-UnstyledButton-root" type="button"><span class="HomePageTabs-module__McP4fa__controlLabel">Navigation</span></button></div><div class="HomePageTabs-module__McP4fa__content"><div><style data-mantine-styles="inline">.__m__-_R_bl3qvm_{--sg-spacing-x:var(--mantine-spacing-xl);--sg-spacing-y:calc(1.5625rem * var(--mantine-scale));}@media(min-width: 62em){.__m__-_R_bl3qvm_{--sg-cols:3;}}</style><div class="m_2415a157 mantine-SimpleGrid-root __m__-_R_bl3qvm_"><div class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root" data-size="lg"><label style="--input-label-size:var(--mantine-font-size-lg)" class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" data-size="lg" for="mantine-_R_1mrl3qvm_" id="mantine-_R_1mrl3qvm_-label">Text input</label><div style="--input-height:var(--input-height-lg);--input-fz:var(--mantine-font-size-lg);--input-radius:var(--mantine-radius-md)" class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default" data-size="lg"><input class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Text input" id="mantine-_R_1mrl3qvm_"/></div></div><div class="m_e2f5cd4e m_46b77525 mantine-InputWrapper-root mantine-NumberInput-root" data-size="lg"><label style="--input-label-size:var(--mantine-font-size-lg)" class="m_8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label" data-size="lg" for="mantine-_R_2mrl3qvm_" id="mantine-_R_2mrl3qvm_-label">Number input</label><div style="--input-height:var(--input-height-lg);--input-fz:var(--mantine-font-size-lg);--input-radius:var(--mantine-radius-md);--input-right-section-width:var(--ni-right-section-width-lg)" class="m_6c018570 mantine-Input-wrapper mantine-NumberInput-wrapper" data-variant="default" data-size="lg" data-with-right-section="true"><input inputMode="decimal" class="m_8fb7ebe7 mantine-Input-input mantine-NumberInput-input" data-variant="default" placeholder="Number input" id="mantine-_R_2mrl3qvm_" type="text" value="$ 30,712"/><div data-position="right" class="m_82577fc2 mantine-Input-section mantine-NumberInput-section"><div class="m_95e17d22 mantine-NumberInput-controls" style="--ni-chevron-size:var(--ni-chevron-size-lg)"><button class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root" data-direction="up" type="button" tabindex="-1" aria-hidden="true"><svg style="width:var(--ni-chevron-size);height:var(--ni-chevron-size);transform:rotate(180deg)" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root" data-direction="down" type="button" tabindex="-1" aria-hidden="true"><svg style="width:var(--ni-chevron-size);height:var(--ni-chevron-size)" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div></div><div class="m_46b77525 mantine-InputWrapper-root mantine-DatePickerInput-root" data-size="lg"><label style="--input-label-size:var(--mantine-font-size-lg)" class="m_8fdc1311 mantine-InputWrapper-label mantine-DatePickerInput-label" data-size="lg" for="mantine-_R_13mrl3qvm_" id="mantine-_R_13mrl3qvm_-label">Date range picker</label><div style="--input-height:var(--input-height-lg);--input-fz:var(--mantine-font-size-lg);--input-radius:var(--mantine-radius-md)" class="m_6c018570 mantine-Input-wrapper mantine-DatePickerInput-wrapper" data-variant="default" data-size="lg" data-multiline="true"><button class="m_6fa5e2aa m_8fb7ebe7 mantine-Input-input mantine-DatePickerInput-input" data-variant="default" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" id="mantine-_R_13mrl3qvm_"><span class="m_88bacfd0 mantine-InputPlaceholder-placeholder mantine-DatePickerInput-placeholder">Your last vacation</span></button></div></div><input type="hidden" value=""/><div class="m_46b77525 mantine-InputWrapper-root mantine-ColorInput-root" data-size="lg"><label style="--input-label-size:var(--mantine-font-size-lg)" class="m_8fdc1311 mantine-InputWrapper-label mantine-ColorInput-label" data-size="lg" for="mantine-_R_4mrl3qvm_" id="mantine-_R_4mrl3qvm_-label">Color input</label><div style="--input-height:var(--input-height-lg);--input-fz:var(--mantine-font-size-lg);--input-radius:var(--mantine-radius-md);--input-left-section-pointer-events:none" class="m_6c018570 mantine-Input-wrapper mantine-ColorInput-wrapper" data-variant="default" data-size="lg" data-with-left-section="true"><div data-position="left" class="m_82577fc2 mantine-Input-section mantine-ColorInput-section"><div style="--cs-size:var(--ci-preview-size);--ci-preview-size:var(--ci-preview-size-lg)" class="mantine-focus-auto m_c5ccdcab mantine-ColorInput-colorPreview m_de3d2490 mantine-ColorSwatch-root"><span class="m_95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m_98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m_862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#129ce0"></span><span class="m_93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></div><input class="m_8fb7ebe7 mantine-Input-input mantine-ColorInput-input" data-variant="default" autoComplete="off" placeholder="What other library has color input?" spellCheck="false" id="mantine-_R_4mrl3qvm_" value="#129ce0"/></div></div><div class="m_46b77525 mantine-InputWrapper-root mantine-TreeSelect-root" data-size="lg"><label style="--input-label-size:var(--mantine-font-size-lg)" class="m_8fdc1311 mantine-InputWrapper-label mantine-TreeSelect-label" data-size="lg" for="mantine-_R_5mrl3qvm_" id="mantine-_R_5mrl3qvm_-label">Tree select</label><div style="--input-height:var(--input-height-lg);--input-fz:var(--mantine-font-size-lg);--input-radius:var(--mantine-radius-md);--input-right-section-pointer-events:none" class="m_6c018570 mantine-Input-wrapper mantine-TreeSelect-wrapper" data-variant="default" data-size="lg" data-pointer="true" data-with-right-section="true"><input class="m_8fb7ebe7 mantine-Input-input mantine-TreeSelect-input" data-variant="default" readOnly="" placeholder="Pick from the tree" aria-haspopup="listbox" autoComplete="off" id="mantine-_R_5mrl3qvm_" value="React"/><div data-position="right" class="m_82577fc2 mantine-Input-section mantine-TreeSelect-section"><svg style="--combobox-chevron-size:var(--combobox-chevron-size-lg)" class="m_2943220b mantine-ComboboxChevron-chevron" data-size="lg" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819
19L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><input type="hidden" value="react"/><input style="display:none" type="file"/><div class="m_46b77525 mantine-InputWrapper-root mantine-FileInput-root" data-size="lg"><label style="--input-label-size:var(--mantine-font-size-lg)" class="m_8fdc1311 mantine-InputWrapper-label mantine-FileInput-label" data-size="lg" for="mantine-_R_16mrl3qvm_" id="mantine-_R_16mrl3qvm_-label">File input</label><div style="--input-height:var(--input-height-lg);--input-fz:var(--mantine-font-size-lg);--input-radius:var(--mantine-radius-md)" class="m_6c018570 mantine-Input-wrapper mantine-FileInput-wrapper" data-variant="default" data-size="lg" data-pointer="true" data-multiline="true"><button class="m_8fb7ebe7 mantine-Input-input mantine-FileInput-input" data-variant="default" type="button" id="mantine-_R_16mrl3qvm_"><span class="m_88bacfd0 mantine-InputPlaceholder-placeholder mantine-FileInput-placeholder">Upload file</span></button></div></div><div class="m_46b77525 mantine-InputWrapper-root mantine-Select-root" data-size="lg"><label style="--input-label-size:var(--mantine-font-size-lg)" class="m_8fdc1311 mantine-InputWrapper-label mantine-Select-label" data-size="lg" for="mantine-_R_7mrl3qvm_" id="mantine-_R_7mrl3qvm_-label">Select</label><div style="--input-height:var(--input-height-lg);--input-fz:var(--mantine-font-size-lg);--input-radius:var(--mantine-radius-md);--input-right-section-pointer-events:none" class="m_6c018570 mantine-Input-wrapper mantine-Select-wrapper" data-variant="default" data-size="lg" data-pointer="true" data-with-right-section="true"><input class="m_8fb7ebe7 mantine-Input-input mantine-Select-input" data-variant="default" placeholder="Pick one option" readOnly="" role="combobox" aria-haspopup="listbox" aria-expanded="false" autoComplete="off" id="mantine-_R_7mrl3qvm_" value="🇫🇷 France"/><div data-position="right" class="m_82577fc2 mantine-Input-section mantine-Select-section"><svg style="--combobox-chevron-size:var(--combobox-chevron-size-lg)" class="m_2943220b mantine-ComboboxChevron-chevron" data-size="lg" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><input type="hidden" value="🇫🇷 France"/><div class="m_46b77525 mantine-InputWrapper-root mantine-MultiSelect-root" data-size="lg"><label style="--input-label-size:var(--mantine-font-size-lg)" class="m_8fdc1311 mantine-InputWrapper-label mantine-MultiSelect-label" data-size="lg" for="mantine-_R_8mrl3qvm_" id="mantine-_R_8mrl3qvm_-label">Multiselect</label><div style="--input-height:var(--input-height-lg);--input-fz:var(--mantine-font-size-lg);--input-radius:var(--mantine-radius-md);--input-padding-y:var(--input-padding-y-lg);--input-right-section-pointer-events:none" class="m_6c018570 mantine-Input-wrapper mantine-MultiSelect-wrapper" data-variant="default" data-size="lg" data-multiline="true" data-with-right-section="true"><div class="m_8fb7ebe7 mantine-Input-input mantine-MultiSelect-input" data-variant="default" data-no-overflow="true"><div style="--pg-gap:var(--pg-gap-lg)" class="mantine-MultiSelect-pillsList m_1dcfd90b mantine-PillGroup-group" data-size="lg"><span style="--pill-fz:var(--pill-fz-lg);--pill-height:var(--pill-height-lg)" class="m_44da308b mantine-MultiSelect-pill m_7cda1cd6 mantine-Pill-root" data-variant="default" data-size="lg" data-with-remove="true"><span class="m_1e0e6180 mantine-Pill-label">React</span><button class="mantine-focus-auto mantine-active m_ae386778 mantine-Pill-remove m_86a44da5 mantine-CloseButton-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" tabindex="-1" aria-hidden="true"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><path d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></span><span style="--pill-fz:var(--pill-fz-lg);--pill-height:var(--pill-height-lg)" class="m_44da308b mantine-MultiSelect-pill m_7cda1cd6 mantine-Pill-root" data-variant="default" data-size="lg" data-with-remove="true"><span class="m_1e0e6180 mantine-Pill-label">Vue</span><button class="mantine-focus-auto mantine-active m_ae386778 mantine-Pill-remove m_86a44da5 mantine-CloseButton-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" tabindex="-1" aria-hidden="true"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><path d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></span><input class="mantine-MultiSelect-inputField m_45c4369d mantine-PillsInputField-field" data-type="visible" placeholder="Search and pick" role="combobox" aria-haspopup="listbox" aria-expanded="false" autoComplete="off" id="mantine-_R_8mrl3qvm_" aria-invalid="false" type="text" value=""/></div></div><div data-position="right" class="m_82577fc2 mantine-Input-section mantine-MultiSelect-section"><svg style="--combobox-chevron-size:var(--combobox-chevron-size-lg)" class="m_2943220b mantine-ComboboxChevron-chevron" data-size="lg" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819
19L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><input type="hidden" value="React,Vue"/><div><label style="--input-label-size:var(--mantine-font-size-lg)" class="m_8fdc1311 mantine-InputWrapper-label" data-size="lg">Pin input</label><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:nowrap;--pin-input-size:var(--pin-input-size-lg)" class="m_f1cb205a mantine-PinInput-root m_4081bf90 mantine-Group-root" data-size="lg" role="group" id="mantine-_R_19mrl3qvm_" dir="ltr"><div style="--input-height:var(--input-height-lg);--input-fz:var(--mantine-font-size-lg);--input-radius:var(--mantine-radius-md);--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--input-padding:0;--input-text-align:center" class="m_cb288ead mantine-PinInput-pinInput m_6c018570 mantine-Input-wrapper mantine-PinInput-wrapper" data-variant="default" data-size="lg"><input class="m_8fb7ebe7 mantine-Input-input mantine-PinInput-input" data-variant="default" inputMode="text" type="text" autoComplete="one-time-code" placeholder="○" aria-label="PinInput" id="mantine-_R_19mrl3qvm_-1" value=""/></div><div style="--input-height:var(--input-height-lg);--input-fz:var(--mantine-font-size-lg);--input-radius:var(--mantine-radius-md);--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--input-padding:0;--input-text-align:center" class="m_cb288ead mantine-PinInput-pinInput m_6c018570 mantine-Input-wrapper mantine-PinInput-wrapper" data-variant="default" data-size="lg"><input class="m_8fb7ebe7 mantine-Input-input mantine-PinInput-input" data-variant="default" inputMode="text" type="text" autoComplete="one-time-code" placeholder="○" aria-label="PinInput" id="mantine-_R_19mrl3qvm_-2" value=""/></div><div style="--input-height:var(--input-height-lg);--input-fz:var(--mantine-font-size-lg);--input-radius:var(--mantine-radius-md);--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--input-padding:0;--input-text-align:center" class="m_cb288ead mantine-PinInput-pinInput m_6c018570 mantine-Input-wrapper mantine-PinInput-wrapper" data-variant="default" data-size="lg"><input class="m_8fb7ebe7 mantine-Input-input mantine-PinInput-input" data-variant="default" inputMode="text" type="text" autoComplete="one-time-code" placeholder="○" aria-label="PinInput" id="mantine-_R_19mrl3qvm_-3" value=""/></div><div style="--input-height:var(--input-height-lg);--input-fz:var(--mantine-font-size-lg);--input-radius:var(--mantine-radius-md);--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--input-padding:0;--input-text-align:center" class="m_cb288ead mantine-PinInput-pinInput m_6c018570 mantine-Input-wrapper mantine-PinInput-wrapper" data-variant="default" data-size="lg"><input class="m_8fb7ebe7 mantine-Input-input mantine-PinInput-input" data-variant="default" inputMode="text" type="text" autoComplete="one-time-code" placeholder="○" aria-label="PinInput" id="mantine-_R_19mrl3qvm_-4" value=""/></div></div><input type="hidden" value=""/></div></div></div></div></div></div></section><section class="HomePageHooks-module__288CWa__root"><div style="--container-size:calc(90rem * var(--mantine-scale))" class="m_7485cace mantine-Container-root" data-strategy="block"><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="HomePageTitle-module__6jceMG__title m_8a5d1357 mantine-Title-root" data-order="2">Hooks library</h2><p class="mantine-focus-auto HomePageDescription-module__9jxgeW__root m_b6d8b162 mantine-Text-root">70+ hooks for handling tricky and common parts of your application</p><a class="mantine-focus-auto m_849cf0da HomePageLearnMore-module__XDXsfq__root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/package/"><span class="HomePageLearnMore-module__XDXsfq__inner">Browse all hooks<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></span></a><style data-mantine-styles="inline">.__m__-_R_4lbqvm_{--sg-spacing-x:var(--mantine-spacing-xl);--sg-spacing-y:var(--mantine-spacing-xl);}@media(min-width: 62em){.__m__-_R_4lbqvm_{--sg-cols:2;}}</style><div class="HomePageHooks-module__288CWa__demos m_2415a157 mantine-SimpleGrid-root __m__-_R_4lbqvm_"><section class="HomePageHooks-module__288CWa__column"><header class="HomePageHooks-module__288CWa__header">
19<h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="HomePageHooks-module__288CWa__title m_8a5d1357 mantine-Title-root" data-order="3"><a class="HomePageHooks-module__288CWa__titleLink" href="/hooks/use-move/">use-move</a></h3><p class="mantine-focus-auto HomePageHooks-module__288CWa__description m_b6d8b162 mantine-Text-root">use-move hook handles move behavior over given element, can be used to build custom sliders</p></header><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 
196.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 style="--ch-max-height:calc(30rem * var(--mantine-scale))" 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">
19import { useState } from &#x27;react&#x27;;
20import { DotsSixVerticalIcon } from &#x27;@phosphor-icons/react&#x27;;
21import { clamp, useMove } from &#x27;@mantine/hooks&#x27;;
22import classes from &#x27;./Demo.module.css&#x27;;
23
24function Demo() {
25  const [value, setValue] = useState(0.3);
26  const { ref } = useMove(({ x }) =&gt; setValue(clamp(x, 0.1, 0.9)));
27  const labelFloating = value &lt; 0.2 || value &gt; 0.8;
28
29  return (
30    &lt;div className={classes.root}&gt;
31      &lt;div className={classes.track} ref={ref}&gt;
32        &lt;div
33          className={classes.filled}
34          style={{
35            width: `calc(${value * 100}% - var(--thumb-width) / 2 - var(--thumb-offset) / 2)`,
36          }}
37        &gt;
38          &lt;span className={classes.label} data-floating={labelFloating || undefined} data-filled&gt;
39            {(value * 100).toFixed(0)}
40          &lt;/span&gt;
41        &lt;/div&gt;
42
43        &lt;div
44          className={classes.empty}
45          style={{
46            width: `calc(${(1 - value) * 100}% - var(--thumb-width) / 2 - var(--thumb-offset) / 2)`,
47          }}
48        &gt;
49          &lt;span className={classes.label} data-floating={labelFloating || undefined}&gt;
50            {((1 - value) * 100).toFixed(0)}
51          &lt;/span&gt;
52        &lt;/div&gt;
53
54        &lt;div
55          className={classes.thumb}
56          style={{ left: `calc(${value * 100}% - var(--thumb-width) / 2)` }}
57        &gt;
58          &lt;DotsSixVerticalIcon /&gt;
59        &lt;/div&gt;
60      &lt;/div&gt;
61    &lt;/div&gt;
62  );
63}</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></section><section class="HomePageHooks-module__288CWa__column"><header class="HomePageHooks-module__288CWa__header"><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="HomePageHooks-module__288CWa__title m_8a5d1357 mantine-Title-root" data-order="3"><a class="HomePageHooks-module__288CWa__titleLink" href="/hooks/use-resize-observer/">use-resize-observer</a></h3><p class="mantine-focus-auto HomePageHooks-module__288CWa__description m_b6d8b162 mantine-Text-root">use-resize-observer hook tracks element size and position changes</p></header><div class="m_761fa02a"><div class="m_a3c6e060" data-with-padding="true"><div class="m_ad8eb9d6"><div class="m_32b5ee14"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:center;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div class="m_32af6b15">Resize me!</div></div><table style="--table-caption-side:top;--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m_b23fa0ef mantine-Table-table"><caption class="m_9e5a3ac7 mantine-Table-caption" data-side="top">Resize element by dragging its right bottom corner</caption><thead class="m_b242d975 mantine-Table-thead"><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m_4e7aa4f3 mantine-Table-th">Property</th><th class="m_4e7aa4f3 mantine-Table-th">Value</th></tr></thead><tbody class="m_b2404537 mantine-Table-tbody"><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td">width</td><td class="m_4e7aa4ef mantine-Table-td">0</td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td">height</td><td class="m_4e7aa4ef mantine-Table-td">0</td></tr></tbody></table></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.
63602-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 6.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">import { Group, Table } from &#x27;@mantine/core&#x27;;
64import { useResizeObserver } from &#x27;@mantine/hooks&#x27;;
65
66function Demo() {
67  const [ref, rect] = useResizeObserver();
68
69  return (
70    &lt;div className={classes.root}&gt;
71      &lt;Group justify=&quot;center&quot;&gt;
72        &lt;div ref={ref} className={classes.demo}&gt;
73          Resize me!
74        &lt;/div&gt;
75      &lt;/Group&gt;
76
77      &lt;Table
78        captionSide=&quot;top&quot;
79        data={{
80          caption: &#x27;Resize element by dragging its right bottom corner&#x27;,
81          head: [&#x27;Property&#x27;, &#x27;Value&#x27;],
82          body: [
83            [&#x27;width&#x27;, rect.width],
84            [&#x27;height&#x27;, rect.height],
85          ],
86        }}
87      /&gt;
88    &lt;/div&gt;
89  );
90}</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></section><section class="HomePageHooks-module__288CWa__column"><header class="HomePageHooks-module__288CWa__header">
90<h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="HomePageHooks-module__288CWa__title m_8a5d1357 mantine-Title-root" data-order="3"><a class="HomePageHooks-module__288CWa__titleLink" href="/hooks/use-hotkeys/">use-hotkeys</a></h3><p class="mantine-focus-auto HomePageHooks-module__288CWa__description m_b6d8b162 mantine-Text-root">use-hotkeys hook allows binding keyboard shortcuts to actions</p></header><div class="m_761fa02a"><div class="m_a3c6e060" data-with-padding="true" data-centered="true"><div class="m_ad8eb9d6"><div style="--group-gap:calc(0.4375rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:wrap;padding:calc(0.625rem * var(--mantine-scale))" class="m_4081bf90 mantine-Group-root"><style data-mantine-styles="inline">.__m__-_R_qqprclbqvm_{font-size:calc(1rem * var(--mantine-scale));}@media(min-width: 48em){.__m__-_R_qqprclbqvm_{font-size:calc(1.25rem * var(--mantine-scale));}}</style><kbd class="m_dc6f14e2 mantine-Kbd-root __m__-_R_qqprclbqvm_">Ctrl</kbd><div style="font-size:calc(1.375rem * var(--mantine-scale));font-weight:500" class="">+</div><style data-mantine-styles="inline">.__m__-_R_1qqprclbqvm_{font-size:calc(1rem * var(--mantine-scale));}@media(min-width: 48em){.__m__-_R_1qqprclbqvm_{font-size:calc(1.25rem * var(--mantine-scale));}}</style><kbd style="width:calc(2.5rem * var(--mantine-scale))" class="m_dc6f14e2 mantine-Kbd-root __m__-_R_1qqprclbqvm_">K</kbd><style data-mantine-styles="inline">.__m__-_R_2aqprclbqvm_{font-size:calc(0.875rem * var(--mantine-scale));}@media(min-width: 48em){.__m__-_R_2aqprclbqvm_{font-size:calc(1.125rem * var(--mantine-scale));}}</style><div style="margin-inline-start:var(--mantine-spacing-sm)" class="__m__-_R_2aqprclbqvm_">– <!-- -->Open search</div></div><div style="--group-gap:calc(0.4375rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:wrap;padding:calc(0.625rem * var(--mantine-scale))" class="m_4081bf90 mantine-Group-root"><style data-mantine-styles="inline">.__m__-_R_raprclbqvm_{font-size:calc(1rem * var(--mantine-scale));}@media(min-width: 48em){.__m__-_R_raprclbqvm_{font-size:calc(1.25rem * var(--mantine-scale));}}</style><kbd class="m_dc6f14e2 mantine-Kbd-root __m__-_R_raprclbqvm_">Ctrl</kbd><div style="font-size:calc(1.375rem * var(--mantine-scale));font-weight:500" class="">+</div><style data-mantine-styles="inline">.__m__-_R_1raprclbqvm_{font-size:calc(1rem * var(--mantine-scale));}@media(min-width: 48em){.__m__-_R_1raprclbqvm_{font-size:calc(1.25rem * var(--mantine-scale));}}</style><kbd style="width:calc(2.5rem * var(--mantine-scale))" class="m_dc6f14e2 mantine-Kbd-root __m__-_R_1raprclbqvm_">J</kbd><style data-mantine-styles="inline">.__m__-_R_2baprclbqvm_{font-size:calc(0.875rem * var(--mantine-scale));}@media(min-width: 48em){.__m__-_R_2baprclbqvm_{font-size:calc(1.125rem * var(--mantine-scale));}}</style><div style="margin-inline-start:var(--mantine-spacing-sm)" class="__m__-_R_2baprclbqvm_">– <!-- -->Toggle color scheme</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.
90602-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 6.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" 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 
906.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>Shortcut.tsx</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">import { useHotkeys } from &#x27;@mantine/hooks&#x27;;
91import { spotlight } from &#x27;@mantine/spotlight&#x27;;
92import { useMantineColorScheme } from &#x27;@mantine/core&#x27;;
93import { Shortcut } from &#x27;./Shortcut&#x27;;
94
95function Demo() {
96  const { toggleColorScheme } = useMantineColorScheme();
97
98  useHotkeys([
99    [&#x27;mod + K&#x27;, () =&gt; spotlight.open()],
100    [&#x27;mod + J&#x27;, () =&gt; toggleColorScheme()],
101    [&#x27;mod + shift + alt + X&#x27;, () =&gt; secret()],
102  ]);
103
104  return (
105    &lt;&gt;
106      &lt;Shortcut symbol=&quot;K&quot; description=&quot;Open search&quot; /&gt;
107      &lt;Shortcut symbol=&quot;J&quot; description=&quot;Toggle color scheme&quot; /&gt;
108    &lt;/&gt;
109  );
110}</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></section><section class="HomePageHooks-module__288CWa__column"><header class="HomePageHooks-module__288CWa__header">
110<h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="HomePageHooks-module__288CWa__title m_8a5d1357 mantine-Title-root" data-order="3"><a class="HomePageHooks-module__288CWa__titleLink" href="/hooks/use-eye-dropper/">use-eye-dropper</a></h3><p class="mantine-focus-auto HomePageHooks-module__288CWa__description m_b6d8b162 mantine-Text-root">use-eye-dropper hook allows picking colors from anywhere on the screen</p></header><div class="m_761fa02a"><div class="m_a3c6e060" data-with-padding="true" data-centered="true"><div class="m_ad8eb9d6"><p style="text-align:center" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">EyeDropper API is not supported in your browser</p></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 
1106.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></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 style="--ch-max-height:calc(16rem * var(--mantine-scale))" 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">import { useState } from &#x27;react&#x27;;
111import { ActionIcon, Group, ColorSwatch, Text } from &#x27;@mantine/core&#x27;;
112import { CrosshairIcon } from &#x27;@phosphor-icons/react&#x27;;
113import { useEyeDropper } from &#x27;@mantine/hooks&#x27;;
114
115function Demo() {
116  const [color, setColor] = useState(&#x27;&#x27;);
117  const [error, setError] = useState&lt;Error | null&gt;(null);
118  const { supported, open } = useEyeDropper();
119
120  const pickColor = async () =&gt; {
121    try {
122      const { sRGBHex } = (await open())!;
123      setColor(sRGBHex);
124    } catch (e) {
125      setError(e as Error);
126    }
127  };
128
129  if (!supported) {
130    return &lt;Text ta=&quot;center&quot;&gt;EyeDropper API is not supported in your browser&lt;/Text&gt;;
131  }
132
133  return (
134    &lt;Group&gt;
135      &lt;ActionIcon variant=&quot;default&quot; onClick={pickColor} size=&quot;xl&quot;&gt;
136        &lt;CrosshairIcon size={28} /&gt;
137      &lt;/ActionIcon&gt;
138      {color ? (
139        &lt;Group gap=&quot;xs&quot;&gt;
140          &lt;ColorSwatch color={color} /&gt;
141          &lt;Text&gt;Picked color: {color}&lt;/Text&gt;
142        &lt;/Group&gt;
143      ) : (
144        &lt;Text&gt;Click the button to pick color&lt;/Text&gt;
145      )}
146      {error &amp;&amp; &lt;Text c=&quot;red&quot;&gt;Error: {error?.message}&lt;/Text&gt;}
147    &lt;/Group&gt;
148  );
149}</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></section></div></div></section><section class="HomePageStyles-module__KOzceW__root"><div style="--container-size:calc(90rem * var(--mantine-scale))" class="m_7485cace mantine-Container-root" data-strategy="block"><style data-mantine-styles="inline">.__m__-_R_ljqvm_{--sg-spacing-x:calc(3.125rem * var(--mantine-scale));--sg-spacing-y:calc(1.875rem * var(--mantine-scale));}@media(min-width: 62em){.__m__-_R_ljqvm_{--sg-cols:2;}}</style><div class="m_2415a157 mantine-SimpleGrid-root __m__-_R_ljqvm_"><div class="HomePageStyles-module__KOzceW__column"><div class="HomePageStyles-module__KOzceW__main">
149<h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="HomePageTitle-module__6jceMG__title m_8a5d1357 mantine-Title-root" data-order="2">Flexible styling</h2><p class="mantine-focus-auto HomePageDescription-module__9jxgeW__root m_b6d8b162 mantine-Text-root">Mantine components are built with native CSS – styles are performant and easy to override</p><a class="mantine-focus-auto m_849cf0da HomePageLearnMore-module__XDXsfq__root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-overview/"><span class="HomePageLearnMore-module__XDXsfq__inner">Learn more about styles<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></span></a><div class="HomePageFeature-module__G3uiSa__features"><section class="HomePageFeature-module__G3uiSa__feature"><div style="--ti-size:calc(3.125rem * var(--mantine-scale));--ti-radius:var(--mantine-radius-md)" class="HomePageFeature-module__G3uiSa__featureIcon m_7341320d mantine-ThemeIcon-root" radius="md"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><path d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"></path></svg></div><div><h3 class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureTitle m_b6d8b162 mantine-Text-root">Built with CSS</h3><p class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureDescription m_b6d8b162 mantine-Text-root">Mantine styles are exposed as .css files – styles are performant and do not have any runtime overhead</p></div></section><section class="HomePageFeature-module__G3uiSa__feature"><div style="--ti-size:calc(3.125rem * var(--mantine-scale));--ti-radius:var(--mantine-radius-md)" class="HomePageFeature-module__G3uiSa__featureIcon m_7341320d mantine-ThemeIcon-root" radius="md"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><path d="M229.66,58.34l-32-32a8,8,0,0,0-11.32,0l-96,96A8,8,0,0,0,88,128v32a8,8,0,0,0,8,8h32a8,8,0,0,0,5.66-2.34l96-96A8,8,0,0,0,229.66,58.34ZM124.69,152H104V131.31l64-64L188.69,88ZM200,76.69,179.31,56,192,43.31,212.69,64ZM224,128v80a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32h80a8,8,0,0,1,0,16H48V208H208V128a8,8,0,0,1,16,0Z"></path></svg></div><div><h3 class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureTitle m_b6d8b162 mantine-Text-root">Override anything</h3><p class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureDescription m_b6d8b162 mantine-Text-root">All Mantine components support Styles API which allows to override any part of component styles with inline styles of classes</p></div></section><section class="HomePageFeature-module__G3uiSa__feature"><div style="--ti-size:calc(3.125rem * var(--mantine-scale));--ti-radius:var(--mantine-radius-md)" class="HomePageFeature-module__G3uiSa__featureIcon m_7341320d mantine-ThemeIcon-root" radius="md"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><path d="M58.34,101.66l-32-32a8,8,0,0,1,0-11.32l32-32A8,8,0,0,1,69.66,37.66L43.31,64,69.66,90.34a8,8,0,0,1-11.32,11.32Zm40,0a8,8,0,0,0,11.32,0l32-32a8,8,0,0,0,0-11.32l-32-32A8,8,0,0,0,98.34,37.66L124.69,64,98.34,90.34A8,8,0,0,0,98.34,101.66ZM200,40H176a8,8,0,0,0,0,16h24V200H56V136a8,8,0,0,0-16,0v64a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Z"></path></svg></div><div><h3 class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureTitle m_b6d8b162 mantine-Text-root">PostCSS preset</h3><p class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureDescription m_b6d8b162 mantine-Text-root">postcss-preset-mantine includes mixins and functions to apply dark/light, rtl and responsive styles</p></div></section><section class="HomePageFeature-module__G3uiSa__feature"><div style="--ti-size:calc(3.125rem * var(--mantine-scale));--ti-radius:var(--mantine-radius-md)" class="HomePageFeature-module__G3uiSa__featureIcon m_7341320d mantine-ThemeIcon-root" radius="md"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><path d="M237.66,66.34a8,8,0,0,0-11.32,0L192,100.69,155.31,64l34.35-34.34a8,8,0,1,0-11.32-11.32L144,52.69,117.66,26.34a8,8,0,0,0-11.32,11.32L112.69,44l-53,53a40,40,0,0,0,0,56.57l15.71,
14915.71L26.34,218.34a8,8,0,0,0,11.32,11.32l49.09-49.09,15.71,15.71a40,40,0,0,0,56.57,0l53-53,6.34,6.35a8,8,0,0,0,11.32-11.32L203.31,112l34.35-34.34A8,8,0,0,0,237.66,66.34ZM147.72,185a24,24,0,0,1-33.95,0L71,142.23a24,24,0,0,1,0-33.95l53-53L200.69,132Z"></path></svg></div><div><h3 class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureTitle m_b6d8b162 mantine-Text-root">Compatible with any styling solution</h3><p class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureDescription m_b6d8b162 mantine-Text-root">You can bring your own library to style Mantine components (Emotion, Vanilla Extract, Sass, etc.) – you are not limited to any specific tool</p></div></section></div></div></div><div class="HomePageStyles-module__KOzceW__column"><div class="m_761fa02a"><div class="m_a3c6e060" data-with-padding="true" data-centered="true"><div class="m_ad8eb9d6"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><button style="--button-color:var(--mantine-color-white)" class="mantine-focus-auto mantine-active m_8b35c16f m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" data-with-right-section="true" type="button"><span class="m_80f1301b mantine-Button-inner"><span class="m_27c75738 m_a74036a mantine-Button-section" data-position="left">12</span><span class="m_811560b9 mantine-Button-label">Send files</span><span class="m_27c75738 m_a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><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></span></span></button><button style="--button-color:var(--mantine-color-white)" class="mantine-focus-auto m_8b35c16f m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-disabled="true" data-with-left-section="true" data-with-right-section="true" type="button" disabled=""><span class="m_80f1301b mantine-Button-inner"><span class="m_27c75738 m_a74036a mantine-Button-section" data-position="left">3</span><span class="m_811560b9 mantine-Button-label">Send files</span><span class="m_27c75738 m_a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><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></span></span></button></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" 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><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" 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.
149602-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 6.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></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="Collapse 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 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 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"><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">.root {
150  border-top-left-radius: var(--mantine-radius-xl);
151  border-bottom-left-radius: var(--mantine-radius-xl);
152  padding-left: 4px;
153
154  /* The following styles will be applied only when button is disabled */
155  &amp;[data-disabled] {
156    /* You can use Mantine PostCSS mixins inside data attributes */
157    @mixin light {
158      border: 1px solid var(--mantine-color-gray-2);
159    }
160
161    @mixin dark {
162      border: 1px solid var(--mantine-color-dark-4);
163    }
164
165    /* You can target child elements that are inside .root[data-disabled] */
166    &amp; .section[data-position=&#x27;left&#x27;] {
167      opacity: 0.6;
168    }
169  }
170}
171
172.section {
173  /* Apply styles only to left section */
174  &amp;[data-position=&#x27;left&#x27;] {
175    --section-size: calc(var(--button-height) - 8px);
176
177    background-color: var(--mantine-color-body);
178    color: var(--mantine-color-text);
179    height: var(--section-size);
180    width: var(--section-size);
181    display: flex;
182    align-items: center;
183    justify-content: center;
184    border-radius: var(--mantine-radius-xl);
185  }
186
187  &amp;[data-position=&#x27;right&#x27;] {
188    @mixin rtl {
189      transform: rotate(180deg);
190    }
191  }
192}</code></pre></div></div></div></div><button class="mantine-focus-auto m_c9378bc2 mantine-CodeHighlightTabs-showCodeButton m_87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div></div></div></div></div></section><section class="HomePageDarkColorScheme-module__xq6gqa__root"><div style="--container-size:calc(90rem * var(--mantine-scale))" class="m_7485cace mantine-Container-root" data-strategy="block">
192<h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="HomePageTitle-module__6jceMG__title m_8a5d1357 mantine-Title-root" data-order="2">Dark color scheme</h2><style data-mantine-styles="inline">.__m__-_R_2lrqvm_{--sg-spacing-x:calc(3.125rem * var(--mantine-scale));--sg-spacing-y:var(--mantine-spacing-xl);}@media(min-width: 62em){.__m__-_R_2lrqvm_{--sg-cols:2;}}</style><div class="HomePageDarkColorScheme-module__xq6gqa__demo m_2415a157 mantine-SimpleGrid-root __m__-_R_2lrqvm_"><img style="--image-radius:var(--mantine-radius-md)" class="HomePageDarkColorScheme-module__xq6gqa__image m_9e117634 mantine-Image-root" src="/_next/static/media/new.087_kask-27-k.webp"/><div><p class="mantine-focus-auto HomePageDescription-module__9jxgeW__root HomePageDarkColorScheme-module__xq6gqa__description m_b6d8b162 mantine-Text-root">Add dark theme to your application with just a few lines of code – Mantine exports global styles both for light and dark theme, all components support dark theme out of the box.</p><div class="MdxPre-module__dnG_LW__code HomePageDarkColorScheme-module__xq6gqa__code m_e597c321 mantine-CodeHighlight-codeHighlight" 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">import { MantineProvider } from &#x27;@mantine/core&#x27;;
193
194function Demo() {
195  return (
196    &lt;MantineProvider defaultColorScheme=&quot;dark&quot;&gt;
197      &lt;App /&gt;
198    &lt;/MantineProvider&gt;
199  );
200}</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 style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:center;--group-wrap:wrap;margin-top:var(--mantine-spacing-xl)" class="m_4081bf90 mantine-Group-root"><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m_80f1301b mantine-Button-inner"><span class="m_a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="HomePageDarkColorScheme-module__xq6gqa__darkIcon"><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="HomePageDarkColorScheme-module__xq6gqa__lightIcon"><path d="M240,96a8,8,0,0,1-8,8H216v16a8,8,0,0,1-16,0V104H184a8,8,0,0,1,0-16h16V72a8,8,0,0,1,16,0V88h16A8,8,0,0,1,240,96ZM144,56h8v8a8,8,0,0,0,16,0V56h8a8,8,0,0,0,0-16h-8V32a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16Zm72.77,97a8,8,0,0,1,1.43,8A96,96,0,1,1,95.07,37.8a8,8,0,0,1,10.6,9.06A88.07,88.07,0,0,0,209.14,150.33,8,8,0,0,1,216.77,153Zm-19.39,14.88c-1.79.09-3.59.14-5.38.14A104.11,104.11,0,0,1,88,64c0-1.79,0-3.59.14-5.38A80,80,0,1,0,197.38,167.86Z"></path></svg></span><span class="m_811560b9 mantine-Button-label">Toggle color scheme</span></span></button></div></div></div></div></section><section class="HomePageCombobox-module__pF4b2a__root"><div style="--container-size:calc(90rem * var(--mantine-scale))" class="m_7485cace mantine-Container-root" data-strategy="block">
200<h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="HomePageTitle-module__6jceMG__title m_8a5d1357 mantine-Title-root" data-order="2">Combobox component</h2><p class="mantine-focus-auto HomePageDescription-module__9jxgeW__root HomePageCombobox-module__pF4b2a__description m_b6d8b162 mantine-Text-root">Combobox is a composable component which can be used to create custom select, multiselect, autocomplete, tags input and other similar components. It provides a lot of flexibility and gives you full control over the UI and behavior while keeping your codebase clean and simple.</p><a class="mantine-focus-auto m_849cf0da HomePageLearnMore-module__XDXsfq__root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/combobox/?e=BasicSelect"><span class="HomePageLearnMore-module__XDXsfq__inner">Explore all 50+ Combobox examples<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></span></a><style data-mantine-styles="inline">.__m__-_R_4m3qvm_{--sg-spacing-x:var(--mantine-spacing-md);--sg-spacing-y:var(--mantine-spacing-md);}@media(min-width: 48em){.__m__-_R_4m3qvm_{--sg-cols:2;}}@media(min-width: 75em){.__m__-_R_4m3qvm_{--sg-cols:3;}}</style><div class="HomePageCombobox-module__pF4b2a__grid m_2415a157 mantine-SimpleGrid-root __m__-_R_4m3qvm_"><div class="HomePageCombobox-module__pF4b2a__demo"><header class="HomePageCombobox-module__pF4b2a__demoHeader"><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="HomePageCombobox-module__pF4b2a__demoTitle m_8a5d1357 mantine-Title-root" data-order="3">Autocomplete with search highlight</h3><a class="mantine-focus-auto m_849cf0da HomePageCombobox-module__pF4b2a__demoLink m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/combobox/?e=AutocompleteHighlight"><span>View example code</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></a></header><div class="HomePageCombobox-module__pF4b2a__demoArea"><div class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" data-size="sm" for="mantine-_R_1ekrcm3qvm_" id="mantine-_R_1ekrcm3qvm_-label">Pick value or type anything</label><div style="--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm)" class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default" data-size="sm"><input class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Pick value or type anything" aria-haspopup="listbox" autoComplete="off" id="mantine-_R_1ekrcm3qvm_" value=""/></div></div><div style="display:none;z-index:300;top:0;left:0;--combobox-option-fz:var(--mantine-font-size-sm);--combobox-option-padding:var(--combobox-option-padding-sm)" class="m_38a85659 mantine-Popover-dropdown m_88b62a41 mantine-Combobox-dropdown" role="presentation" data-position="bottom"><div style="--combobox-option-fz:var(--mantine-font-size-sm);--combobox-option-padding:var(--combobox-option-padding-sm)" class="m_b2821a6e mantine-Combobox-options" id="mantine-_R_1mekrcm3qvm_" role="listbox"><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🍎 Apples" id="_R_3dmekrcm3qvm_" role="option"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root mantine-Highlight-root" data-size="sm"><span>🍎 Apples</span></p></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🍌 Bananas" id="_R_5dmekrcm3qvm_" role="option"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root mantine-Highlight-root" data-size="sm"><span>🍌 Bananas</span></p></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🥦 Broccoli" id="_R_7dmekrcm3qvm_" role="option"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root mantine-Highlight-root" data-size="sm"><span>🥦 Broccoli</span></p></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🥕 Carrots" id="_R_9dmekrcm3qvm_" role="option"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root mantine-Highlight-root" data-size="sm"><span>🥕 Carrots</span></p></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🍫 Chocolate" id="_R_bdmekrcm3qvm_" role="option"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root mantine-Highlight-root" data-size="sm"><span>🍫 Chocolate</span></p></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🍇 Grapes" id="_R_ddmekrcm3qvm_" role="option"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root mantine-Highlight-root" data-size="sm"><span>🍇 Grapes</span></p></div></div></div></div></div><div class="HomePageCombobox-module__pF4b2a__demo"><header class="HomePageCombobox-module__pF4b2a__demoHeader">
200<h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="HomePageCombobox-module__pF4b2a__demoTitle m_8a5d1357 mantine-Title-root" data-order="3">Multiselect with selected items limit</h3><a class="mantine-focus-auto m_849cf0da HomePageCombobox-module__pF4b2a__demoLink m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/combobox/?e=MaxSelectedItems"><span>View example code</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></a></header><div class="HomePageCombobox-module__pF4b2a__demoArea"><div class="m_46b77525 mantine-InputWrapper-root mantine-PillsInput-root" data-size="sm"><div style="--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-padding-y:var(--input-padding-y-sm)" class="m_6c018570 mantine-Input-wrapper mantine-PillsInput-wrapper" data-variant="default" data-size="sm" data-pointer="true" data-multiline="true"><div class="m_8fb7ebe7 mantine-Input-input mantine-PillsInput-input" data-variant="default" data-no-overflow="true"><div style="--pg-gap:var(--pg-gap-sm)" class="m_1dcfd90b mantine-PillGroup-group" data-size="sm"><span class="m_88bacfd0 mantine-InputPlaceholder-placeholder">Pick one or more values</span><input class="m_45c4369d mantine-PillsInputField-field" data-type="hidden" aria-haspopup="listbox" autoComplete="off" id="mantine-_R_1elbcm3qvm_" aria-invalid="false" type="text"/></div></div></div></div><div style="display:none;z-index:300;top:0;left:0;--combobox-option-fz:var(--mantine-font-size-sm);--combobox-option-padding:var(--combobox-option-padding-sm)" class="m_38a85659 mantine-Popover-dropdown m_88b62a41 mantine-Combobox-dropdown" role="presentation" data-position="bottom"><div class="m_858f94bd mantine-Combobox-header">You can select up to 2 items, currently selected: <!-- -->0</div><div style="--combobox-option-fz:var(--mantine-font-size-sm);--combobox-option-padding:var(--combobox-option-padding-sm)" class="m_b2821a6e mantine-Combobox-options" id="mantine-_R_9melbcm3qvm_" role="listbox"><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🍎 Apples" id="_R_dpmelbcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><span>🍎 Apples</span></div></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🍌 Bananas" id="_R_lpmelbcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><span>🍌 Bananas</span></div></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🥦 Broccoli" id="_R_tpmelbcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><span>🥦 Broccoli</span></div></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🥕 Carrots" id="_R_15pmelbcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><span>🥕 Carrots</span></div></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🍫 Chocolate" id="_R_1dpmelbcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><span>🍫 Chocolate</span></div></div></div></div></div></div><div class="HomePageCombobox-module__pF4b2a__demo"><header class="HomePageCombobox-module__pF4b2a__demoHeader">
200<h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="HomePageCombobox-module__pF4b2a__demoTitle m_8a5d1357 mantine-Title-root" data-order="3">Creatable Multiselect</h3><a class="mantine-focus-auto m_849cf0da HomePageCombobox-module__pF4b2a__demoLink m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/combobox/?e=MultiSelectCreatable"><span>View example code</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></a></header><div class="HomePageCombobox-module__pF4b2a__demoArea"><div class="m_46b77525 mantine-InputWrapper-root mantine-PillsInput-root" data-size="sm"><div style="--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-padding-y:var(--input-padding-y-sm)" class="m_6c018570 mantine-Input-wrapper mantine-PillsInput-wrapper" data-variant="default" data-size="sm" data-multiline="true"><div class="m_8fb7ebe7 mantine-Input-input mantine-PillsInput-input" data-variant="default" data-no-overflow="true"><div style="--pg-gap:var(--pg-gap-sm)" class="m_1dcfd90b mantine-PillGroup-group" data-size="sm"><input class="m_45c4369d mantine-PillsInputField-field" data-type="visible" placeholder="Search values" aria-haspopup="listbox" autoComplete="off" id="mantine-_R_1elrcm3qvm_" aria-invalid="false" type="text" value=""/></div></div></div></div><div style="display:none;z-index:300;top:0;left:0;--combobox-option-fz:var(--mantine-font-size-sm);--combobox-option-padding:var(--combobox-option-padding-sm)" class="m_38a85659 mantine-Popover-dropdown m_88b62a41 mantine-Combobox-dropdown" role="presentation" data-position="bottom"><div style="--combobox-option-fz:var(--mantine-font-size-sm);--combobox-option-padding:var(--combobox-option-padding-sm)" class="m_b2821a6e mantine-Combobox-options" id="mantine-_R_1melrcm3qvm_" role="listbox"><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🍎 Apples" id="_R_bdmelrcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><span>🍎 Apples</span></div></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🍌 Bananas" id="_R_jdmelrcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><span>🍌 Bananas</span></div></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🥦 Broccoli" id="_R_rdmelrcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><span>🥦 Broccoli</span></div></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🥕 Carrots" id="_R_13dmelrcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><span>🥕 Carrots</span></div></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🍫 Chocolate" id="_R_1bdmelrcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><span>🍫 Chocolate</span></div></div></div></div></div></div><div class="HomePageCombobox-module__pF4b2a__demo"><header class="HomePageCombobox-module__pF4b2a__demoHeader"><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="HomePageCombobox-module__pF4b2a__demoTitle m_8a5d1357 mantine-Title-root" data-order="3">Select with search in dropdown</h3><a class="mantine-focus-auto m_849cf0da HomePageCombobox-module__pF4b2a__demoLink m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/combobox/?e=SelectDropdownSearch"><span>
200View example code</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></a></header><div class="HomePageCombobox-module__pF4b2a__demoArea"><div class="m_46b77525 mantine-InputWrapper-root mantine-InputBase-root" data-size="sm"><div style="--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-right-section-pointer-events:none" class="m_6c018570 mantine-Input-wrapper mantine-InputBase-wrapper" data-variant="default" data-size="sm" data-pointer="true" data-with-right-section="true"><button class="m_8fb7ebe7 mantine-Input-input mantine-InputBase-input" data-variant="default" type="button" aria-haspopup="listbox" autoComplete="off" id="mantine-_R_1embcm3qvm_"><span class="m_88bacfd0 mantine-InputPlaceholder-placeholder">Pick value</span></button><div data-position="right" class="m_82577fc2 mantine-Input-section mantine-InputBase-section"><svg class="m_2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div style="display:none;z-index:300;top:0;left:0;--combobox-option-fz:var(--mantine-font-size-sm);--combobox-option-padding:var(--combobox-option-padding-sm)" class="m_38a85659 mantine-Popover-dropdown m_88b62a41 mantine-Combobox-dropdown" role="presentation" data-position="bottom"><div style="--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-left-section-pointer-events:none;--input-right-section-pointer-events:none" class="m_6c018570 mantine-Input-wrapper mantine-Combobox-wrapper" data-variant="default" data-size="sm"><input class="m_985517d8 mantine-Combobox-search m_8fb7ebe7 mantine-Input-input mantine-Combobox-input" data-variant="default" aria-haspopup="listbox" autoComplete="off" placeholder="Search groceries" value=""/></div><div style="--combobox-option-fz:var(--mantine-font-size-sm);--combobox-option-padding:var(--combobox-option-padding-sm)" class="m_b2821a6e mantine-Combobox-options" id="mantine-_R_9membcm3qvm_" role="listbox"><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🍎 Apples" id="_R_dpmembcm3qvm_" role="option">🍎 Apples</div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🍌 Bananas" id="_R_lpmembcm3qvm_" role="option">🍌 Bananas</div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🥦 Broccoli" id="_R_tpmembcm3qvm_" role="option">🥦 Broccoli</div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🥕 Carrots" id="_R_15pmembcm3qvm_" role="option">🥕 Carrots</div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🍫 Chocolate" id="_R_1dpmembcm3qvm_" role="option">🍫 Chocolate</div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🍇 Grapes" id="_R_1lpmembcm3qvm_" role="option">🍇 Grapes</div></div></div></div></div><div class="HomePageCombobox-module__pF4b2a__demo"><header class="HomePageCombobox-module__pF4b2a__demoHeader">
200<h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="HomePageCombobox-module__pF4b2a__demoTitle m_8a5d1357 mantine-Title-root" data-order="3">Select with custom option component</h3><a class="mantine-focus-auto m_849cf0da HomePageCombobox-module__pF4b2a__demoLink m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/combobox/?e=SelectOptionComponent"><span>View example code</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></a></header><div class="HomePageCombobox-module__pF4b2a__demoArea"><div class="m_46b77525 mantine-InputWrapper-root mantine-InputBase-root" data-size="sm"><div style="--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-padding-y:var(--input-padding-y-sm);--input-right-section-pointer-events:none" class="m_6c018570 mantine-Input-wrapper mantine-InputBase-wrapper" data-variant="default" data-size="sm" data-pointer="true" data-multiline="true" data-with-right-section="true"><button class="m_8fb7ebe7 mantine-Input-input mantine-InputBase-input" data-variant="default" type="button" aria-haspopup="listbox" autoComplete="off" id="mantine-_R_1emrcm3qvm_"><span class="m_88bacfd0 mantine-InputPlaceholder-placeholder">Pick value</span></button><div data-position="right" class="m_82577fc2 mantine-Input-section mantine-InputBase-section"><svg class="m_2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div style="display:none;z-index:300;top:0;left:0;--combobox-option-fz:var(--mantine-font-size-sm);--combobox-option-padding:var(--combobox-option-padding-sm)" class="m_38a85659 mantine-Popover-dropdown m_88b62a41 mantine-Combobox-dropdown" role="presentation" data-position="bottom"><div style="--combobox-option-fz:var(--mantine-font-size-sm);--combobox-option-padding:var(--combobox-option-padding-sm)" class="m_b2821a6e mantine-Combobox-options" id="mantine-_R_1memrcm3qvm_" role="listbox"><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="Apples" id="_R_3dmemrcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><p style="font-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">🍎</p><div><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Apples</p><p style="opacity:0.6;font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Crisp and refreshing fruit</p></div></div></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="Bananas" id="_R_5dmemrcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><p style="font-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">🍌</p><div><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Bananas</p><p style="opacity:0.6;font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Naturally sweet and potassium-rich fruit</p></div></div></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="Broccoli" id="_R_7dmemrcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><p style="font-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">🥦</p><div><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Broccoli</p><p style="opacity:0.6;font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Nutrient-packed green vegetable</p></div></div></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="Carrots" id="_R_9dmemrcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><p style="font-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">🥕</p><div><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Carrots</p><p style="opacity:0.6;font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Crunchy and vitamin-rich root vegetable</p></div></div></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="Chocolate" id="_R_bdmemrcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><p style="font-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">🍫</p><div><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Chocolate</p><p style="opacity:0.6;font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Indulgent and decadent treat</p></div></div></div></div></div></div></div><div class="HomePageCombobox-module__pF4b2a__demo mantine-visible-from-sm"><header class="HomePageCombobox-module__pF4b2a__demoHeader">
200<h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="HomePageCombobox-module__pF4b2a__demoTitle m_8a5d1357 mantine-Title-root" data-order="3">Transfer list with inline options list</h3><a class="mantine-focus-auto m_849cf0da HomePageCombobox-module__pF4b2a__demoLink m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/combobox/?e=TransferList"><span>View example code</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></a></header><div class="HomePageCombobox-module__pF4b2a__demoArea"><div class="TransferList-module__mIVuiW__root"><div data-type="forward"><div style="--group-gap:0rem;--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="TransferList-module__mIVuiW__controls m_4081bf90 mantine-Group-root" aria-haspopup="listbox" autoComplete="off"><div class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root" data-size="sm"><div style="--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm)" class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default" data-size="sm"><input class="TransferList-module__mIVuiW__input m_8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Search groceries" aria-label="Search groceries" id="mantine-_R_6lmnbcm3qvm_" value=""/></div></div><button style="--ai-size:calc(2.25rem * var(--mantine-scale));--ai-radius:0rem;--ai-bg:var(--mantine-color-default);--ai-hover:var(--mantine-color-default-hover);--ai-color:var(--mantine-color-default-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active TransferList-module__mIVuiW__control m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Transfer selected items right"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="TransferList-module__mIVuiW__icon"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg></span></button></div><div class="TransferList-module__mIVuiW__list"><div style="--combobox-option-fz:var(--mantine-font-size-sm);--combobox-option-padding:var(--combobox-option-padding-sm)" class="m_b2821a6e mantine-Combobox-options" id="mantine-_R_9mnbcm3qvm_" role="listbox"><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🍎 Apples" id="_R_dpmnbcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--checkbox-radius:var(--mantine-radius-sm);--checkbox-color:var(--mantine-color-blue-filled);pointer-events:none" class="m_bf2d988c mantine-Checkbox-root m_5f75b09e mantine-Checkbox-root" data-variant="filled" data-label-position="right"><div class="m_5f6e695e mantine-Checkbox-body"><div class="m_26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m_26063560 mantine-Checkbox-input" data-with-error-styles="true" id="mantine-_R_6rdpmnbcm3qvm_" aria-hidden="true" tabindex="-1" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="m_bf295423 mantine-Checkbox-icon"><path d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m_d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div><span>🍎 Apples</span></div></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🍌 Bananas" id="_R_lpmnbcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--checkbox-radius:var(--mantine-radius-sm);--checkbox-color:var(--mantine-color-blue-filled);pointer-events:none" class="m_bf2d988c mantine-Checkbox-root m_5f75b09e mantine-Checkbox-root" data-variant="filled" data-label-position="right"><div class="m_5f6e695e mantine-Checkbox-body"><div class="m_26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m_26063560 mantine-Checkbox-input" data-with-error-styles="true" id="mantine-_R_6rlpmnbcm3qvm_" aria-hidden="true" tabindex="-1" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="m_bf295423 mantine-Checkbox-icon"><path d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m_d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div><span>🍌 Bananas</span></div></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🍓 Strawberries" id="_R_tpmnbcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--checkbox-radius:var(--mantine-radius-sm);--checkbox-color:var(--mantine-color-blue-filled);pointer-events:none" class="m_bf2d988c mantine-Checkbox-root m_5f75b09e mantine-Checkbox-root" data-variant="filled" data-label-position="right"><div class="m_5f6e695e mantine-Checkbox-body"><div class="m_26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m_26063560 mantine-Checkbox-input" data-with-error-styles="true" id="mantine-_R_6rtpmnbcm3qvm_" aria-hidden="true" tabindex="-1" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="m_bf295423 mantine-Checkbox-icon"><path d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m_d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div><span>🍓 Strawberries</span></div></div></div></div></div><div data-type="backward"><div style="--group-gap:0rem;--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="TransferList-module__mIVuiW__controls m_4081bf90 mantine-Group-root" aria-haspopup="listbox" autoComplete="off"><div class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root" data-size="sm"><div style="--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm)" class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default" data-size="sm"><input class="TransferList-module__mIVuiW__input m_8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Search groceries" aria-label="Search groceries" id="mantine-_R_6lqnbcm3qvm_" value=""/></div></div><button style="--ai-size:calc(2.25rem * var(--mantine-scale));--ai-radius:0rem;--ai-bg:var(--mantine-color-default);--ai-hover:var(--mantine-color-default-hover);--ai-color:var(--mantine-color-default-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active TransferList-module__mIVuiW__control m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Transfer selected items left"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="TransferList-module__mIVuiW__icon"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg></span></button></div><div class="TransferList-module__mIVuiW__list"><div style="--combobox-option-fz:var(--mantine-font-size-sm);--combobox-option-padding:var(--combobox-option-padding-sm)" class="m_b2821a6e mantine-Combobox-options" id="mantine-_R_9qnbcm3qvm_" role="listbox"><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🥦 Broccoli" id="_R_dpqnbcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--checkbox-radius:var(--mantine-radius-sm);--checkbox-color:var(--mantine-color-blue-filled);pointer-events:none" class="m_bf2d988c mantine-Checkbox-root m_5f75b09e mantine-Checkbox-root" data-variant="filled" data-label-position="right"><div class="m_5f6e695e mantine-Checkbox-body"><div class="m_26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m_26063560 mantine-Checkbox-input" data-with-error-styles="true" id="mantine-_R_6rdpqnbcm3qvm_" aria-hidden="true" tabindex="-1" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="m_bf295423 mantine-Checkbox-icon"><path d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m_d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div><span>🥦 Broccoli</span></div></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🥕 Carrots" id="_R_lpqnbcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--checkbox-radius:var(--mantine-radius-sm);--checkbox-color:var(--mantine-color-blue-filled);pointer-events:none" class="m_bf2d988c mantine-Checkbox-root m_5f75b09e mantine-Checkbox-root" data-variant="filled" data-label-position="right"><div class="m_5f6e695e mantine-Checkbox-body"><div class="m_26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m_26063560 mantine-Checkbox-input" data-with-error-styles="true" id="mantine-_R_6rlpqnbcm3qvm_" aria-hidden="true" tabindex="-1" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="m_bf295423 mantine-Checkbox-icon"><path d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m_d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div><span>🥕 Carrots</span></div></div><div class="m_92253aa5 mantine-Combobox-option" data-combobox-option="true" value="🥬 Lettuce" id="_R_tpqnbcm3qvm_" role="option"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--checkbox-radius:var(--mantine-radius-sm);--checkbox-color:var(--mantine-color-blue-filled);pointer-events:none" class="m_bf2d988c mantine-Checkbox-root m_5f75b09e mantine-Checkbox-root" data-variant="filled" data-label-position="right"><div class="m_5f6e695e mantine-Checkbox-body"><div class="m_26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m_26063560 mantine-Checkbox-input" data-with-error-styles="true" id="mantine-_R_6rtpqnbcm3qvm_" aria-hidden="true" tabindex="-1" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="m_bf295423 mantine-Checkbox-icon"><path d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m_d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div><span>
200🥬 Lettuce</span></div></div></div></div></div></div></div></div></div></div></section><section class="HomePageExtensions-module__K7f5GG__root"><div style="--container-size:calc(90rem * var(--mantine-scale))" class="m_7485cace mantine-Container-root" data-strategy="block"><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="HomePageTitle-module__6jceMG__title m_8a5d1357 mantine-Title-root" data-order="2">Extensions</h2><p class="mantine-focus-auto HomePageDescription-module__9jxgeW__root HomePageExtensions-module__K7f5GG__description m_b6d8b162 mantine-Text-root">Extensions are additional packages that provide extra functionality to Mantine, such as rich text editor, notifications system, charts, modals manager and more. They are built to be easily integrated into your application and provide a seamless experience.</p><a class="mantine-focus-auto m_849cf0da HomePageLearnMore-module__XDXsfq__root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/x/extensions/"><span class="HomePageLearnMore-module__XDXsfq__inner">Browse all extensions<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></span></a><style data-mantine-styles="inline">.__m__-_R_4mbqvm_{--sg-spacing-x:var(--mantine-spacing-md);--sg-spacing-y:calc(1.875rem * var(--mantine-scale));}@media(min-width: 62em){.__m__-_R_4mbqvm_{--sg-cols:2;}}</style><div class="HomePageExtensions-module__K7f5GG__grid m_2415a157 mantine-SimpleGrid-root __m__-_R_4mbqvm_"><section class="HomePageExtensions-module__K7f5GG__demo"><header class="HomePageExtensions-module__K7f5GG__demoHeader"><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="HomePageExtensions-module__K7f5GG__demoTitle m_8a5d1357 mantine-Title-root" data-order="3">Rich text editor</h3><p class="mantine-focus-auto HomePageExtensions-module__K7f5GG__demoDescription m_b6d8b162 mantine-Text-root">TipTap based rich text editor</p></header><div class="HomePageExtensions-module__K7f5GG__demoArea"><div class="m_dd3f7539 mantine-RichTextEditor-root"><div style="--rte-sticky-offset:calc(3.5rem * var(--mantine-scale))" class="m_4574a3c4 mantine-RichTextEditor-toolbar" data-variant="default" data-sticky="true"><div class="m_2ab47ef2 mantine-RichTextEditor-controlsGroup" data-variant="default"><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Bold" title="Bold" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z"></path><path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Italic" title="Italic" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M11 5l6 0"></path><path d="M7 19l6 0"></path><path d="M14 5l-4 14"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Underline" title="Underline" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M7 5v5a5 5 0 0 0 10 0v-5"></path><path d="M5 19h14"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Str
200ikethrough" title="Strikethrough" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 12l14 0"></path><path d="M16 6.5a4 2 0 0 0 -4 -1.5h-1a3.5 3.5 0 0 0 0 7h2a3.5 3.5 0 0 1 0 7h-1.5a4 2 0 0 1 -4 -1.5"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Clear formatting" title="Clear formatting" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M17 15l4 4m0 -4l-4 4"></path><path d="M7 6v-1h11v1"></path><path d="M7 19l4 0"></path><path d="M13 5l-4 14"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Highlight text" title="Highlight text" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 19h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M12.5 5.5l4 4"></path><path d="M4.5 13.5l4 4"></path><path d="M21 15v4h-8l4 -4z"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Code" title="Code" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M7 8l-4 4l4 4"></path><path d="M17 8l4 4l-4 4"></path><path d="M14 4l-4 16"></path></svg></button></div><div class="m_2ab47ef2 mantine-RichTextEditor-controlsGroup" data-variant="default"><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Heading 1" title="Heading 1" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19 18v-8l-2 2"></path><path d="M4 6v12"></path><path d="M12 6v12"></path><path d="M11 18h2"></path><path d="M3 18h2"></path><path d="M4 12h8"></path><path d="M3 6h2"></path><path d="M11 6h2"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Heading 2" title="Heading 2" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M17 12a2 2 0 1 1 4 0c0 .591 -.417 1.318 -.816 1.858l-3.184 4.143l4 0"></path><path d="M4 6v12"></path><path d="M12 6v12"></path><path d="M11 18h2"></path><path d="M3 18h2"></path><path d="M4 12h8"></path><path d="M3 6h2"></path><path d="M11 6h2"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Heading 3" title="Heading 3" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19 14a2 2 0 1 0 -2 -2"></path><path d="M17 16a2 2 0 1 0 2 -2"></path><path d="M4 6v12"></path><path d="M12 6v12"></path><path d="M11 18h2"></path><path d="M3 18h2"></path><path d="M4 12h8"></path><path d="M3 6h2"></path><path d="M11 6h2"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Heading 4" title="Heading 4" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M20 18v-8l-4 6h5"></path><path d="M4 6v12"></path><path d="M12 6v12"></path><path d="M11 18h2"></path><path d="M3 18h2"></path><path d="M4 12h8"></path><path d="M3 6h2"></path><path d="M11 6h2"></path></svg></button></div>
200<div class="m_2ab47ef2 mantine-RichTextEditor-controlsGroup" data-variant="default"><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Blockquote" title="Blockquote" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M6 15h15"></path><path d="M21 19h-15"></path><path d="M15 11h6"></path><path d="M21 7h-6"></path><path d="M9 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2"></path><path d="M3 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Horizontal line" title="Horizontal line" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 12h2"></path><path d="M17 12h2"></path><path d="M11 12h2"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Bullet list" title="Bullet list" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 6l11 0"></path><path d="M9 12l11 0"></path><path d="M9 18l11 0"></path><path d="M5 6l0 .01"></path><path d="M5 12l0 .01"></path><path d="M5 18l0 .01"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Ordered list" title="Ordered list" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M11 6h9"></path><path d="M11 12h9"></path><path d="M12 18h8"></path><path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path><path d="M6 10v-6l-2 2"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Subscript" title="Subscript" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 7l8 10m-8 0l8 -10"></path><path d="M21 20h-4l3.5 -4a1.73 1.73 0 0 0 -3.5 -2"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Superscript" title="Superscript" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 7l8 10m-8 0l8 -10"></path><path d="M21 11h-4l3.5 -4a1.73 1.73 0 0 0 -3.5 -2"></path></svg></button></div>
200<div class="m_2ab47ef2 mantine-RichTextEditor-controlsGroup" data-variant="default"><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Link" title="Link" aria-haspopup="dialog" aria-expanded="false" id="mantine-_R_6pbcrcmbqvm_" data-rich-text-editor-control="true" tabindex="0" data-interactive="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 15l6 -6"></path><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"></path><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Remove link" title="Remove link" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M17 22v-2"></path><path d="M9 15l6 -6"></path><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"></path><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"></path><path d="M20 17h2"></path><path d="M2 7h2"></path><path d="M7 2v2"></path></svg></button></div><div class="m_2ab47ef2 mantine-RichTextEditor-controlsGroup" data-variant="default"><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Align text: left" title="Align text: left" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 6l16 0"></path><path d="M4 12l10 0"></path><path d="M4 18l14 0"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Align text: center" title="Align text: center" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 6l16 0"></path><path d="M8 12l8 0"></path><path d="M6 18l12 0"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Align text: justify" title="Align text: justify" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l12 0"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Align text: right" title="Align text: right" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 6l16 0"></path><path d="M10 12l10 0"></path><path d="M6 18l14 0"></path></svg></button></div>
200<div class="m_2ab47ef2 mantine-RichTextEditor-controlsGroup" data-variant="default"><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Undo" title="Undo" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 14l-4 -4l4 -4"></path><path d="M5 10h11a4 4 0 1 1 0 8h-1"></path></svg></button><button class="mantine-focus-auto m_c2207da6 mantine-RichTextEditor-control m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Redo" title="Redo" disabled="" data-rich-text-editor-control="true" tabindex="0" data-interactive="true" data-disabled="true"><svg class="m_9cdfeb3f mantine-RichTextEditor-controlIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M15 14l4 -4l-4 -4"></path><path d="M19 10h-11a4 4 0 1 0 0 8h1"></path></svg></button></div></div><div class="m_f2016866 mantine-RichTextEditor-Typography m_d08caa0 mantine-Typography-root"><div class="m_c2204cc2 mantine-RichTextEditor-content"></div></div></div></div></section><div><div style="--stack-gap:var(--mantine-spacing-md);--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><section class="HomePageExtensions-module__K7f5GG__demo"><header class="HomePageExtensions-module__K7f5GG__demoHeader"><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="HomePageExtensions-module__K7f5GG__demoTitle m_8a5d1357 mantine-Title-root" data-order="3">Notifications system</h3><p class="mantine-focus-auto HomePageExtensions-module__K7f5GG__demoDescription m_b6d8b162 mantine-Text-root">Show/update/hide notifications at any part of your application</p></header><div class="HomePageExtensions-module__K7f5GG__demoArea"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:center;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><button style="--button-height:var(--button-height-lg);--button-padding-x:var(--button-padding-x-lg);--button-fz:var(--mantine-font-size-lg);--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active HomePageExtensions-module__K7f5GG__demoControl m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="lg" type="button"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Show notification</span></span></button></div></div></section><section class="HomePageExtensions-module__K7f5GG__demo"><header class="HomePageExtensions-module__K7f5GG__demoHeader"><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="HomePageExtensions-module__K7f5GG__demoTitle m_8a5d1357 mantine-Title-root" data-order="3">Spotlight</h3><p class="mantine-focus-auto HomePageExtensions-module__K7f5GG__demoDescription m_b6d8b162 mantine-Text-root">Ctrl + K command palette, can be used for search or common actions</p></header><div class="HomePageExtensions-module__K7f5GG__demoArea"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:center;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><button style="--button-justify:space-between;--button-height:var(--button-height-lg);--button-padding-x:var(--button-padding-x-lg);--button-fz:var(--mantine-font-size-lg);--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);min-width:calc(18.75rem * var(--mantine-scale))" class="mantine-focus-auto mantine-active HomePageExtensions-module__K7f5GG__demoControl m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="lg" data-with-right-section="true" type="button" justify="space-between"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Open search spotlight</span><span class="m_a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="var(--mantine-color-dimmed)" viewBox="0 0 256 256"><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></span></span></button></div></div></section><section class="HomePageExtensions-module__K7f5GG__demo"><header class="HomePageExtensions-module__K7f5GG__demoHeader">
200<h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="HomePageExtensions-module__K7f5GG__demoTitle m_8a5d1357 mantine-Title-root" data-order="3">Carousel</h3><p class="mantine-focus-auto HomePageExtensions-module__K7f5GG__demoDescription m_b6d8b162 mantine-Text-root">Embla based carousel component</p></header><div class="HomePageExtensions-module__K7f5GG__demoArea"><style data-mantine-styles="inline">.__m__-_R_5rbcmbqvmH1_{--carousel-slide-gap:0rem;--carousel-slide-size:100%;}</style><div style="--carousel-control-size:calc(1.625rem * var(--mantine-scale));--carousel-controls-offset:var(--mantine-spacing-sm)" class="m_17884d0f mantine-Carousel-root __m__-_R_5rbcmbqvmH1_" data-orientation="horizontal" data-include-gap-in-size="true" role="region" aria-roledescription="carousel" id="mantine-_R_5rbcmbqvm_"><span class="m_515a97f8 mantine-VisuallyHidden-root" role="status" aria-live="polite" aria-atomic="true"></span><div class="m_39bc3463 mantine-Carousel-controls" data-orientation="horizontal"><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" aria-controls="mantine-_R_5rbcmbqvm_" aria-label="Previous slide" aria-disabled="true" data-inactive="true" data-type="previous" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" aria-controls="mantine-_R_5rbcmbqvm_" aria-label="Next slide" aria-disabled="true" data-inactive="true" data-type="next" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(-90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><div class="m_a2dae653 mantine-Carousel-viewport" data-type="media"><div class="m_fcd81474 mantine-Carousel-container __m__-_R_5rbcmbqvmH1_" data-orientation="horizontal"><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal" role="group" aria-roledescription="slide" aria-label="Carousel slide"><img style="--image-radius:var(--mantine-radius-md)" class="m_9e117634 mantine-Image-root" src="https://images.unsplash.com/photo-1598928506311-c55ded91a20c?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=720&amp;q=80" height="220" alt=""/></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal" role="group" aria-roledescription="slide" aria-label="Carousel slide"><img style="--image-radius:var(--mantine-radius-md)" class="m_9e117634 mantine-Image-root" src="https://images.unsplash.com/photo-1567767292278-a4f21aa2d36e?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=720&amp;q=80" height="220" alt=""/></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal" role="group" aria-roledescription="slide" aria-label="Carousel slide"><img style="--image-radius:var(--mantine-radius-md)" class="m_9e117634 mantine-Image-root" src="https://images.unsplash.com/photo-1605774337664-7a846e9cdf17?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=720&amp;q=80" height="220" alt=""/></div>
200<div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal" role="group" aria-roledescription="slide" aria-label="Carousel slide"><img style="--image-radius:var(--mantine-radius-md)" class="m_9e117634 mantine-Image-root" src="https://images.unsplash.com/photo-1554995207-c18c203602cb?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=720&amp;q=80" height="220" alt=""/></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal" role="group" aria-roledescription="slide" aria-label="Carousel slide"><img style="--image-radius:var(--mantine-radius-md)" class="m_9e117634 mantine-Image-root" src="https://images.unsplash.com/photo-1616486029423-aaa4789e8c9a?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=720&amp;q=80" height="220" alt=""/></div></div></div><div class="m_71ea3ab1 mantine-Carousel-indicators" role="tablist" aria-label="Slides" data-orientation="horizontal"></div></div></div></section></div></div></div></div></section><section class="HomePageForm-module__nvTQ9q__root"><div style="--container-size:calc(90rem * var(--mantine-scale))" class="m_7485cace mantine-Container-root" data-strategy="block"><style data-mantine-styles="inline">.__m__-_R_mjqvm_{--sg-spacing-x:calc(3.125rem * var(--mantine-scale));--sg-spacing-y:calc(1.875rem * var(--mantine-scale));}@media(min-width: 62em){.__m__-_R_mjqvm_{--sg-cols:2;}}</style><div class="m_2415a157 mantine-SimpleGrid-root __m__-_R_mjqvm_"><div class="HomePageForm-module__nvTQ9q__column" data-primary="true"><div class="HomePageForm-module__nvTQ9q__main"><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="HomePageTitle-module__6jceMG__title m_8a5d1357 mantine-Title-root" data-order="2">Form library</h2><p class="mantine-focus-auto HomePageDescription-module__9jxgeW__root m_b6d8b162 mantine-Text-root">@mantine/form – performant form library designed for Mantine components. Works out of the box with all Mantine inputs.</p><a class="mantine-focus-auto m_849cf0da HomePageLearnMore-module__XDXsfq__root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/package/"><span class="HomePageLearnMore-module__XDXsfq__inner">Explore all form features<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></span></a><div class="HomePageFeature-module__G3uiSa__features"><section class="HomePageFeature-module__G3uiSa__feature"><div style="--ti-size:calc(3.125rem * var(--mantine-scale));--ti-radius:var(--mantine-radius-md)" class="HomePageFeature-module__G3uiSa__featureIcon m_7341320d mantine-ThemeIcon-root" radius="md"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><path d="M220.27,158.54a8,8,0,0,0-7.7-.46,20,20,0,1,1,0-36.16A8,8,0,0,0,224,114.69V72a16,16,0,0,0-16-16H171.78a35.36,35.36,0,0,0,.22-4,36.11,36.11,0,0,0-11.36-26.24,36,36,0,0,0-60.55,23.62,36.56,36.56,0,0,0,.14,6.62H64A16,16,0,0,0,48,72v32.22a35.36,35.36,0,0,0-4-.22,36.12,36.12,0,0,0-26.24,11.36,35.7,35.7,0,0,0-9.69,27,36.08,36.08,0,0,0,33.31,33.6,35.68,35.68,0,0,0,6.62-.14V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V165.31A8,8,0,0,0,220.27,158.54ZM208,208H64V165.31a8,8,0,0,0-11.43-7.23,20,20,0,1,1,0-36.16A8,8,0,0,0,64,114.69V72h46.69a8,8,0,0,0,7.23-11.43,20,20,0,1,1,36.16,0A8,8,0,0,0,161.31,72H208v32.23a35.68,35.68,0,0,0-6.62-.14A36,36,0,0,0,204,176a35.36,35.36,0,0,0,4-.22Z"></path></svg></div><div><h3 class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureTitle m_b6d8b162 mantine-Text-root">Seamless integration</h3><p class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureDescription m_b6d8b162 mantine-Text-root">useForm hook works out of the box with all Mantine inputs</p></div></section><section class="HomePageFeature-module__G3uiSa__feature"><div style="--ti-size:calc(3.125rem * var(--mantine-scale));--ti-radius:var(--mantine-radius-md)" class="HomePageFeature-module__G3uiSa__featureIcon m_7341320d mantine-ThemeIcon-root" radius="md"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><path d="M207.06,72.67A111.24,111.24,0,0,0,128,40h-.4C66.07,40.21,16,91,16,153.13V176a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V152A111.25,111.25,0,0,0,207.06,72.67ZM224,176H119.71l54.76-75.3a8,8,0,0,0-12.94-9.42L99.92,176H32V153.13c0-3.08.15-6.12.43-9.13H56a8,8,0,0,0,0-16H35.27c10.32-38.86,44-68.24,84.73-71.66V80a8,8,0,0,0,16,0V56.33A96.14,96.14,0,0,1,221,128H200a8,8,0,0,0,0,16h23.67c.21,2.65.33,5.31.33,8Z"></path></svg></div><div><h3 class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureTitle m_b6d8b162 mantine-Text-root">Excellent performance</h3><p class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureDescription m_b6d8b162 mantine-Text-root">useForm rerenders only for validation and status changes, usually only 2-3 times per form lifecycle</p></div></section><section class="HomePageFeature-module__G3uiSa__feature"><div style="--ti-size:calc(3.125rem * var(--mantine-scale));--ti-radius:var(--mantine-radius-md)" class="HomePageFeature-module__G3uiSa__featureIcon m_7341320d mantine-ThemeIcon-root" radius="md"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><path d="M128,16a88.1,88.1,0,0,0-88,88c0,23.43,9.4,49.42,25.13,69.5,12.08,15.41,26.5,26,41.91,31.09L96.65,228.85A8,8,0,0,0,104,240h48a8,8,0,0,0,7.35-11.15L149,204.59c15.4-5.07,29.83-15.68,41.91-31.09C206.6,153.42,216,127.43,216,104A88.1,88.1,0,0,0,128,16Zm11.87,208H116.13l6.94-16.19c1.64.12,3.28.19,4.93.19s3.29-.07,4.93-.19Zm38.4-60.37C163.94,181.93,146.09,192,128,192s-35.94-10.07-50.27-28.37C64.12,146.27,56,124,56,104a72,72,0,0,1,144,0C200,124,191.88,146.27,178.27,163.63Zm-1-59.74A8.52,8.52,0,0,1,176,104a8,8,0,0,1-7.88-6.68,41.29,41.29,0,0,0-33.43-33.43,8,8,0,1,1,2.64-15.78,57.5,57.5,0,0,1,46.57,46.57A8,8,0,0,1,177.32,103.89Z"></path></svg></div><div><h3 class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureTitle m_b6d8b162 mantine-Text-root">Lightweight</h3><p class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureDescription m_b6d8b162 mantine-Text-root">
2006.3kb minified + gzipped, no dependencies except React</p></div></section><section class="HomePageFeature-module__G3uiSa__feature"><div style="--ti-size:calc(3.125rem * var(--mantine-scale));--ti-radius:var(--mantine-radius-md)" class="HomePageFeature-module__G3uiSa__featureIcon m_7341320d mantine-ThemeIcon-root" radius="md"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><path d="M223.85,47.12a16,16,0,0,0-15-15c-12.58-.75-44.73.4-71.41,27.07L132.69,64H74.36A15.91,15.91,0,0,0,63,68.68L28.7,103a16,16,0,0,0,9.07,27.16l38.47,5.37,44.21,44.21,5.37,38.49a15.94,15.94,0,0,0,10.78,12.92,16.11,16.11,0,0,0,5.1.83A15.91,15.91,0,0,0,153,227.3L187.32,193A15.91,15.91,0,0,0,192,181.64V123.31l4.77-4.77C223.45,91.86,224.6,59.71,223.85,47.12ZM74.36,80h42.33L77.16,119.52,40,114.34Zm74.41-9.45a76.65,76.65,0,0,1,59.11-22.47,76.46,76.46,0,0,1-22.42,59.16L128,164.68,91.32,128ZM176,181.64,141.67,216l-5.19-37.17L176,139.31Zm-74.16,9.5C97.34,201,82.29,224,40,224a8,8,0,0,1-8-8c0-42.29,23-57.34,32.86-61.85a8,8,0,0,1,6.64,14.56c-6.43,2.93-20.62,12.36-23.12,38.91,26.55-2.5,36-16.69,38.91-23.12a8,8,0,1,1,14.56,6.64Z"></path></svg></div><div><h3 class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureTitle m_b6d8b162 mantine-Text-root">Fully featured</h3><p class="mantine-focus-auto HomePageFeature-module__G3uiSa__featureDescription m_b6d8b162 mantine-Text-root">useForm supports lists and nested objects, multiple validation approaches (including schema based with zod) and an easy way to manage subscriptions to values updates</p></div></section></div></div></div><div class="HomePageForm-module__nvTQ9q__column"><div class="m_761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m_a3c6e060" data-with-padding="true" data-centered="true"><div class="m_ad8eb9d6"><form><div class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" data-size="sm" data-required="true" for="mantine-_R_dddmjqvm_" id="mantine-_R_dddmjqvm_-label">Email<span class="m_78a94662 mantine-InputWrapper-required mantine-TextInput-required" aria-hidden="true"> *</span></label><div style="--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm)" class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default" data-size="sm"><input class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="[email protected]" data-path="email" id="mantine-_R_dddmjqvm_" value=""/></div></div><div style="--checkbox-radius:var(--mantine-radius-sm);--checkbox-color:var(--mantine-color-blue-filled);margin-top:var(--mantine-spacing-md)" class="m_bf2d988c mantine-Checkbox-root m_5f75b09e mantine-Checkbox-root" data-variant="filled" data-label-position="right"><div class="m_5f6e695e mantine-Checkbox-body"><div class="m_26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m_26063560 mantine-Checkbox-input" data-with-error-styles="true" id="mantine-_R_lddmjqvm_" data-path="termsOfService" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="m_bf295423 mantine-Checkbox-icon"><path d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m_d3ea56bb mantine-Checkbox-labelWrapper"><label class="m_8ee546b8 mantine-Checkbox-label" for="mantine-_R_lddmjqvm_">I agree to sell my privacy</label></div></div></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-end;--group-wrap:wrap;margin-top:var(--mantine-spacing-md)" class="m_4081bf90 mantine-Group-root"><button style="--button-color:var(--mantine-color-white)" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" type="submit"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Submit</span></span></button></div></form></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.
200602-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 6.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></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="Collapse 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 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 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"><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">import { Button, Checkbox, Group, TextInput } from &#x27;@mantine/core&#x27;;
201import { useForm } from &#x27;@mantine/form&#x27;;
202
203function Demo() {
204  const form = useForm({
205    mode: &#x27;uncontrolled&#x27;,
206    initialValues: {
207      email: &#x27;&#x27;,
208      termsOfService: false,
209    },
210
211    validate: {
212      email: (value) =&gt; (/^\S+@\S+$/.test(value) ? null : &#x27;Invalid email&#x27;),
213    },
214  });
215
216  return (
217    &lt;form onSubmit={form.onSubmit((values) =&gt; console.log(values))}&gt;
218      &lt;TextInput
219        withAsterisk
220        label=&quot;Email&quot;
221        placeholder=&quot;[email protected]&quot;
222        key={form.key(&#x27;email&#x27;)}
223        {...form.getInputProps(&#x27;email&#x27;)}
224      /&gt;
225
226      &lt;Checkbox
227        mt=&quot;md&quot;
228        label=&quot;I agree to sell my privacy&quot;
229        key={form.key(&#x27;termsOfService&#x27;)}
230        {...form.getInputProps(&#x27;termsOfService&#x27;, { type: &#x27;checkbox&#x27; })}
231      /&gt;
232
233      &lt;Group justify=&quot;flex-end&quot; mt=&quot;md&quot;&gt;
234        &lt;Button type=&quot;submit&quot;&gt;Submit&lt;/Button&gt;
235      &lt;/Group&gt;
236    &lt;/form&gt;
237  );
238}</code></pre></div></div></div></div><button class="mantine-focus-auto m_c9378bc2 mantine-CodeHighlightTabs-showCodeButton m_87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div></div></div></div></div></section><div class="HomePageUI-module__TsrwGa__wrapper"><div style="--container-size:calc(90rem * var(--mantine-scale))" class="m_7485cace mantine-Container-root" data-strategy="block"><div class="HomePageUI-module__TsrwGa__image" style="background-image:url(/_next/static/media/banner.2ypxbtxbz7v0m.webp)"></div><div style="--overlay-z-index:1;opacity:1" class="HomePageUI-module__TsrwGa__overlay m_9814e45f mantine-Overlay-root"></div><div class="HomePageUI-module__TsrwGa__body"><p class="mantine-focus-auto HomePageUI-module__TsrwGa__supTitle m_b6d8b162 mantine-Text-root">Build even faster with Mantine UI</p><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="HomePageUI-module__TsrwGa__title m_8a5d1357 mantine-Title-root" data-order="1"><span class="HomePageUI-module__TsrwGa__highlight">120+ responsive components</span><br/> built with Mantine</h1><p class="mantine-focus-auto HomePageUI-module__TsrwGa__description m_b6d8b162 mantine-Text-root">Build your next website even faster with premade responsive components designed and built by Mantine maintainers and community. All components are free forever for everyone.</p><div class="HomePageUI-module__TsrwGa__controls"><a style="--button-justify:space-between;--button-height:var(--button-height-lg);--button-padding-x:var(--button-padding-x-lg);--button-fz:var(--mantine-font-size-lg);--button-radius:var(--mantine-radius-md);--button-bg:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-hover:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-color:var(--mantine-color-white);--button-bd:none;min-width:calc(18.75rem * var(--mantine-scale))" class="mantine-focus-auto mantine-active HomePageUI-module__TsrwGa__control m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-variant="gradient" data-size="lg" data-with-right-section="true" href="https://ui.mantine.dev/" justify="space-between"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Explore components</span><span class="m_a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></span></span></a></div></div></div></div><section class="HomePageCommunity-module__RpsDiq__root"><div style="--container-size:calc(90rem * var(--mantine-scale))" class="HomePageCommunity-module__RpsDiq__container m_7485cace mantine-Container-root" data-strategy="block"><style data-mantine-styles="inline">
238.__m__-_R_n3qvm_{--sg-spacing-x:calc(3.75rem * var(--mantine-scale));--sg-spacing-y:calc(3.75rem * var(--mantine-scale));}@media(min-width: 62em){.__m__-_R_n3qvm_{--sg-cols:2;}}</style><div class="m_2415a157 mantine-SimpleGrid-root __m__-_R_n3qvm_"><div><div class="HomePageCommunity-module__RpsDiq__primaryColumn"><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="HomePageTitle-module__6jceMG__title m_8a5d1357 mantine-Title-root" data-order="2">Trusted by thousands of developers</h2><p class="mantine-focus-auto HomePageDescription-module__9jxgeW__root m_b6d8b162 mantine-Text-root">30,000+ GitHub stars, 5M+ monthly downloads, 500+ contributors. Mantine is built in the open and shaped by the developers who use it every day.</p><a class="mantine-focus-auto m_849cf0da HomePageLearnMore-module__XDXsfq__root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/orgs/mantinedev/discussions/categories/kind-words"><span class="HomePageLearnMore-module__XDXsfq__inner">View all reviews from the community<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></span></a><div class="HomePageCommunity-module__RpsDiq__stats"><a href="https://github.com/mantinedev/mantine" target="_blank" class="HomePageCommunity-module__RpsDiq__stat" rel="noreferrer"><p class="mantine-focus-auto HomePageCommunity-module__RpsDiq__statValue m_b6d8b162 mantine-Text-root">30,000+</p><p class="mantine-focus-auto HomePageCommunity-module__RpsDiq__statLabel m_b6d8b162 mantine-Text-root">Stars on GitHub</p></a><a href="https://www.npmjs.com/package/@mantine/hooks" target="_blank" class="HomePageCommunity-module__RpsDiq__stat" rel="noreferrer"><p class="mantine-focus-auto HomePageCommunity-module__RpsDiq__statValue m_b6d8b162 mantine-Text-root">5M+</p><p class="mantine-focus-auto HomePageCommunity-module__RpsDiq__statLabel m_b6d8b162 mantine-Text-root">Monthly downloads</p></a><a href="https://discord.gg/wbH82zuWMN" target="_blank" class="HomePageCommunity-module__RpsDiq__stat" rel="noreferrer"><p class="mantine-focus-auto HomePageCommunity-module__RpsDiq__statValue m_b6d8b162 mantine-Text-root">12,000+</p><p class="mantine-focus-auto HomePageCommunity-module__RpsDiq__statLabel m_b6d8b162 mantine-Text-root">Discord members</p></a></div></div></div><div class="HomePageCommunity-module__RpsDiq__secondaryColumn"><article class="HomePageCommunity-module__RpsDiq__review"><div class="HomePageCommunity-module__RpsDiq__reviewHeader"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--avatar-size:calc(1.875rem * var(--mantine-scale))" class="m_f85678b6 mantine-Avatar-root"><img class="m_11f8ac07 mantine-Avatar-image" src="https://avatars.githubusercontent.com/u/16137686?v=4" alt="smsuraj100"/></div><a class="mantine-focus-auto HomePageCommunity-module__RpsDiq__reviewAuthor m_b6d8b162 mantine-Text-root" href="https://github.com/smsuraj100">@<!-- -->smsuraj100</a></div><a class="mantine-focus-auto m_849cf0da HomePageCommunity-module__RpsDiq__reviewExternalLink m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/orgs/mantinedev/discussions/5783" target="_blank"><span>Open on GitHub</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"></path></svg></a></div><a class="mantine-focus-auto HomePageCommunity-module__RpsDiq__reviewTitle m_b6d8b162 mantine-Text-root" href="https://github.com/orgs/mantinedev/discussions/5783" target="_blank">One of the best UI libraries I&#x27;ve come across.</a><div class="HomePageCommunity-module__RpsDiq__reviewBody"><p>I am a senior Frontend Developer and wanted to use something new instead of Material UI and came across this, it has been well thought of all the different scenarios you and come across, and the hooks are just pure love :)</p><p>Thank you so much for this.</p></div></article><article class="HomePageCommunity-module__RpsDiq__review"><div class="HomePageCommunity-module__RpsDiq__reviewHeader"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--avatar-size:calc(1.875rem * var(--mantine-scale))" class="m_f85678b6 mantine-Avatar-root"><img class="m_11f8ac07 mantine-Avatar-image" src="https://avatars.githubusercontent.com/u/192025?v=4" alt="sideral"/></div><a class="mantine-focus-auto HomePageCommunity-module__RpsDiq__reviewAuthor m_b6d8b162 mantine-Text-root" href="https://github.com/sideral">@<!-- -->sideral</a></div><a class="mantine-focus-auto m_849cf0da HomePageCommunity-module__RpsDiq__reviewExternalLink m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/orgs/mantinedev/discussions/6150" target="_blank"><span>Open on GitHub</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"></path></svg></a></div><a class="mantine-focus-auto HomePageCommunity-module__RpsDiq__reviewTitle m_b6d8b162 mantine-Text-root" href="https://github.com/orgs/mantinedev/discussions/6150" target="_blank">You nailed it!</a><div class="HomePageCommunity-module__RpsDiq__reviewBody"><p>Man, I've been doing Front-End for 20 years. This is, hands-down, the best component library I've ever used. What's more, the parts that I didn't like (Styling from JS Objects, slow with big forms) have been addressed in v7. Please keep it up, this library deserves more exposure, it just works and works well and beautifully. Many thanks to <a href='https://github.com/rtivital' target='_blank'>@rtivital</a> and the contributors!</p></div></article><article class="HomePageCommunity-module__RpsDiq__review"><div class="HomePageCommunity-module__RpsDiq__reviewHeader"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--avatar-size:calc(1.875rem * var(--mantine-scale))" class="m_f85678b6 mantine-Avatar-root"><img class="m_11f8ac07 mantine-Avatar-image" src="https://avatars.githubusercontent.com/u/18201458?v=4" alt="leighton-carr"/></div><a class="mantine-focus-auto HomePageCommunity-module__RpsDiq__reviewAuthor m_b6d8b162 mantine-Text-root" href="https://github.com/leighton-carr">@<!-- -->leighton-carr</a></div><a class="mantine-focus-auto m_849cf0da HomePageCommunity-module__RpsDiq__reviewExternalLink m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/orgs/mantinedev/discussions/5504" target="_blank"><span>Open on GitHub</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"></path></svg></a></div><a class="mantine-focus-auto HomePageCommunity-module__RpsDiq__reviewTitle m_b6d8b162 mantine-Text-root" href="https://github.com/orgs/mantinedev/discussions/5504" target="_blank">Absurdly good</a><div class="HomePageCommunity-module__RpsDiq__reviewBody"><p>Hope this kind of post is ok - just wanted to say thank you.</p><p>I've been writing software professionally for 25 years, with the last 15 in web (mostly internal projects in my company). This is easily the best component library I've ever used.</p><p>In every other instance I've run into the boundaries of what the library does and have to spend a lot of time and energy customizing or extending it. Not only does Mantine provide easy access to everything under the hood, but 99% the things you need are provided as default options. I've started to lose count of the "guess I'd better build my standard xyz... oh wait, they have that too" moments. Also the docs are perfect.</p><p>Bravo, thank you.</p></div></article><article class="HomePageCommunity-module__RpsDiq__review"><div class="HomePageCommunity-module__RpsDiq__reviewHeader"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--avatar-size:calc(1.875rem * var(--mantine-scale))" class="m_f85678b6 mantine-Avatar-root"><img class="m_11f8ac07 mantine-Avatar-image" src="https://avatars.githubusercontent.com/u/57042505?v=4" alt="Gitgud6969"/></div><a class="mantine-focus-auto HomePageCommunity-module__RpsDiq__reviewAuthor m_b6d8b162 mantine-Text-root" href="https://github.com/Gitgud6969">@<!-- -->Gitgud6969</a></div><a class="mantine-focus-auto m_849cf0da HomePageCommunity-module__RpsDiq__reviewExternalLink m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/orgs/mantinedev/discussions/3741" target="_blank"><span>Open on GitHub</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"></path></svg></a></div><a class="mantine-focus-auto HomePageCommunity-module__RpsDiq__reviewTitle m_b6d8b162 mantine-Text-root" href="https://github.com/orgs/mantinedev/discussions/3741" target="_blank">Thank you mantine 💘</a><div class="HomePageCommunity-module__RpsDiq__reviewBody"><p>Dear Mantine Team, thank you for putting this library together. I have started to use and love Mantine in my free time, and bringing this great library to good use in our 
238company now. All the developers are very pleased with the development experience, the time savings for any bigger project is insane. The amount of flexibility we have with our designers and developers will result in great products. All thanks to every contributor. Continue the good work!</p></div></article><article class="HomePageCommunity-module__RpsDiq__review"><div class="HomePageCommunity-module__RpsDiq__reviewHeader"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--avatar-size:calc(1.875rem * var(--mantine-scale))" class="m_f85678b6 mantine-Avatar-root"><img class="m_11f8ac07 mantine-Avatar-image" src="https://avatars.githubusercontent.com/u/10228483?v=4" alt="SeeSharpCode"/></div><a class="mantine-focus-auto HomePageCommunity-module__RpsDiq__reviewAuthor m_b6d8b162 mantine-Text-root" href="https://github.com/SeeSharpCode">@<!-- -->SeeSharpCode</a></div><a class="mantine-focus-auto m_849cf0da HomePageCommunity-module__RpsDiq__reviewExternalLink m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/orgs/mantinedev/discussions/5456" target="_blank"><span>Open on GitHub</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"></path></svg></a></div><a class="mantine-focus-auto HomePageCommunity-module__RpsDiq__reviewTitle m_b6d8b162 mantine-Text-root" href="https://github.com/orgs/mantinedev/discussions/5456" target="_blank">A solution for every problem</a><div class="HomePageCommunity-module__RpsDiq__reviewBody"><p>Mantine has a solution for every problem I’ve needed to solve in my web app. Components and props are named clearly, design choices promote simplicity, and it looks beautiful out of the box. Thank you for jump starting my application in a big way!</p></div></article><article class="HomePageCommunity-module__RpsDiq__review"><div class="HomePageCommunity-module__RpsDiq__reviewHeader"><div style="--group-gap:var(--mantine-spacing-sm);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--avatar-size:calc(1.875rem * var(--mantine-scale))" class="m_f85678b6 mantine-Avatar-root"><img class="m_11f8ac07 mantine-Avatar-image" src="https://avatars.githubusercontent.com/u/40026131?v=4" alt="OmkoBass"/></div><a class="mantine-focus-auto HomePageCommunity-module__RpsDiq__reviewAuthor m_b6d8b162 mantine-Text-root" href="https://github.com/OmkoBass">@<!-- -->OmkoBass</a></div><a class="mantine-focus-auto m_849cf0da HomePageCommunity-module__RpsDiq__reviewExternalLink m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/orgs/mantinedev/discussions/259" target="_blank"><span>Open on GitHub</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"></path></svg></a></div><a class="mantine-focus-auto HomePageCommunity-module__RpsDiq__reviewTitle m_b6d8b162 mantine-Text-root" href="https://github.com/orgs/mantinedev/discussions/259" target="_blank">Thank you Mantine!</a><div class="HomePageCommunity-module__RpsDiq__reviewBody"><p>Out of all react component libraries that I have ever seen this one is the most straight forward, easy to use, well documented and really beautiful. I plan on switching and using this full time. Just wanted to say huge thanks to the people that made this.</p></div></article></div></div></div></section><section class="HomePageJoin-module___yhS-q__root"><div style="--container-size:calc(90rem * var(--mantine-scale))" class="m_7485cace mantine-Container-root" data-strategy="block">
238<h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="HomePageTitle-module__6jceMG__title m_8a5d1357 mantine-Title-root" data-order="2">Join the community</h2><p class="mantine-focus-auto HomePageDescription-module__9jxgeW__root HomePageJoin-module___yhS-q__description m_b6d8b162 mantine-Text-root">Mantine is an open-source project with a growing community of developers and contributors. Join us on GitHub, Discord, Twitter and other platforms to stay updated and get help with your projects.</p><div class="HomePageJoin-module___yhS-q__cards"><style data-mantine-styles="inline">.__m__-_R_3nbqvm_{--sg-spacing-x:calc(0.625rem * var(--mantine-scale));--sg-spacing-y:calc(0.625rem * var(--mantine-scale));}@media(min-width: 62em){.__m__-_R_3nbqvm_{--sg-cols:2;}}</style><div class="m_2415a157 mantine-SimpleGrid-root __m__-_R_3nbqvm_"><a class="SocialCards-module__QjItPW__card SocialCards-module__QjItPW__discord" target="_blank" rel="noreferrer" href="https://discord.gg/wbH82zuWMN"><svg style="width:calc(1.875rem * var(--mantine-scale));height:calc(1.875rem * var(--mantine-scale))" class="SocialCards-module__QjItPW__icon" 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><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="SocialCards-module__QjItPW__arrow"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg><div><div class="SocialCards-module__QjItPW__title">Chat on Discord</div><div class="SocialCards-module__QjItPW__description">Join a community of 10,000+ developers to ask questions, share feedback and explore upcoming features</div></div></a><div style="--stack-gap:calc(0.625rem * var(--mantine-scale));--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><a class="SocialCards-module__QjItPW__card SocialCards-module__QjItPW__github" target="_blank" rel="noreferrer" href="https://github.com/mantinedev/mantine/discussions"><svg style="width:calc(1.875rem * var(--mantine-scale));height:calc(1.875rem * var(--mantine-scale))" class="SocialCards-module__QjItPW__icon" 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><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="SocialCards-module__QjItPW__arrow"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg><div><div class="SocialCards-module__QjItPW__title">Start a discussion</div><div class="SocialCards-module__QjItPW__description">Request new features, ask questions and provide feedback with GitHub discussions</div></div></a><a class="SocialCards-module__QjItPW__card SocialCards-module__QjItPW__twitter" target="_blank" rel="noreferrer" href="https://x.com/mantinedev"><svg style="width:30px;height:30px" class="SocialCards-module__QjItPW__icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
238<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><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="SocialCards-module__QjItPW__arrow"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg><div><div class="SocialCards-module__QjItPW__title">Follow on X</div><div class="SocialCards-module__QjItPW__description">Get notified about new minor and major releases</div></div></a></div></div></div></div></section><section class="HomePageGetStarted-module__0tIFgq__root"><div style="--container-size:calc(90rem * var(--mantine-scale))" class="m_7485cace mantine-Container-root" data-strategy="block"><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="HomePageTitle-module__6jceMG__title m_8a5d1357 mantine-Title-root" data-order="2">Ready to get started?</h2><p class="mantine-focus-auto HomePageDescription-module__9jxgeW__root HomePageGetStarted-module__0tIFgq__description m_b6d8b162 mantine-Text-root">Mantine can be used with any modern React framework or build tool: get started with Next.js, Vite, React Router and other tools in minutes by following the installation guide or using one of the available templates.</p><a class="mantine-focus-auto m_849cf0da HomePageLearnMore-module__XDXsfq__root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/"><span class="HomePageLearnMore-module__XDXsfq__inner">Get started without a framework<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></span></a><div class="HomePageGetStarted-module__0tIFgq__guides" data-dimmed="true"><style data-mantine-styles="inline">.__m__-_R_cnjqvm_{--sg-spacing-x:var(--mantine-spacing-lg);--sg-spacing-y:var(--mantine-spacing-lg);--sg-cols:1;}@container simple-grid (min-width: base){.__m__-_R_cnjqvm_{--sg-cols:1;}}@container simple-grid (min-width: 800px){.__m__-_R_cnjqvm_{--sg-cols:2;}}</style><div class="m_925c2d2c mantine-SimpleGrid-container"><div class="m_2415a157 mantine-SimpleGrid-root __m__-_R_cnjqvm_"><a style="--paper-radius:var(--mantine-radius-lg);--card-padding:var(--mantine-spacing-xl)" class="GettingStartedCard-module__uL_SyW__root m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true" data-orientation="vertical" data-type="primary" href="/guides/vite/"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="GettingStartedCard-module__uL_SyW__arrow"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg><div style="--badge-height:var(--badge-height-md);--badge-padding-x:var(--badge-padding-x-md);--badge-fz:var(--badge-fz-md);--badge-bg:var(--mantine-color-red-8);--badge-color:var(--mantine-color-white);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="GettingStartedCard-module__uL_SyW__recommended m_347db0ec mantine-Badge-root" data-size="md"><span class="m_5add502a mantine-Badge-label">Recommended</span></div><div class="GettingStartedCard-module__uL_SyW__iconWrapper" data-logo="vite"><svg style="--icon-size:40px" class="GettingStartedCard-module__uL_SyW__icon" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 87 15" data-logo="vite"><path d="M74.9427 14.6539C74.73 14.9246 74.295 14.7741 74.295 14.4301V11.127C74.295 10.7264 73.9704 10.4019 73.5698 10.4019H69.9228C69.6279 10.4019 69.4559 10.0683 69.6279 9.82865L72.0256 6.47163C72.3689 5.99166 72.0256 5.32454 71.4352 5.32454H67.0215C66.7266 5.32454 66.5547 4.99098 66.7266 4.75134L69.835 0.399
238156C69.9034 0.303852 70.0132 0.247223 70.1299 0.247223H79.393C79.6879 0.247223 79.8598 0.580784 79.6879 0.820424L77.2901 4.17745C76.9469 4.65742 77.2901 5.32454 77.8806 5.32454H81.5277C81.8301 5.32454 82 5.67329 81.8129 5.91155L74.9434 14.6546L74.9427 14.6539Z" fill="#863BFF"></path><mask id="mask0_242_20653" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="66" y="0" width="16" height="15"><path d="M74.9095 14.6538C74.6968 14.9246 74.2618 14.774 74.2618 14.4301V11.1269C74.2618 10.7264 73.9372 10.4018 73.5366 10.4018H69.8896C69.5947 10.4018 69.4227 10.0682 69.5947 9.82859L71.9924 6.47157C72.3357 5.9916 71.9924 5.32448 71.402 5.32448H66.9883C66.6934 5.32448 66.5215 4.99092 66.6934 4.75128L69.8018 0.399095C69.8702 0.303791 69.98 0.247162 70.0967 0.247162H79.3598C79.6547 0.247162 79.8266 0.580723 79.6547 0.820363L77.2569 4.17739C76.9137 4.65735 77.2569 5.32448 77.8474 5.32448H81.4945C81.7969 5.32448 81.9668 5.67323 81.7797 5.91149L74.9102 14.6545L74.9095 14.6538Z" fill="black"></path></mask><g mask="url(#mask0_242_20653)"><g filter="url(#filter0_f_242_20653)"><ellipse cx="1.76581" cy="4.71403" rx="1.76581" ry="4.71403" transform="matrix(0.00324134 0.999995 0.999995 -0.00324134 65.1924 10.3508)" fill="#EDE6FF"></ellipse></g><g filter="url(#filter1_f_242_20653)"><ellipse cx="3.33396" cy="9.57004" rx="3.33396" ry="9.57004" transform="matrix(0.00324134 0.999995 0.999995 -0.00324134 54.0166 2.77428)" fill="#EDE6FF"></ellipse></g><g filter="url(#filter2_f_242_20653)"><ellipse cx="1.76581" cy="9.77374" rx="1.76581" ry="9.77374" transform="matrix(0.00324134 0.999995 0.999995 -0.00324134 53.6514 3.87662)" fill="#7E14FF"></ellipse></g><g filter="url(#filter3_f_242_20653)"><ellipse cx="1.76581" cy="9.80957" rx="1.76581" ry="9.80957" transform="matrix(0.00324134 0.999995 0.999995 -0.00324134 55.125 9.64699)" fill="#7E14FF"></ellipse></g><g filter="url(#filter4_f_242_20653)"><ellipse cx="1.76581" cy="9.80957" rx="1.76581" ry="9.80957" transform="matrix(0.00324134 0.999995 0.999995 -0.00324134 55.6162 10.0153)" fill="#7E14FF"></ellipse></g><g filter="url(#filter5_f_242_20653)"><ellipse cx="4.51116" cy="7.07808" rx="4.51116" ry="7.07808" transform="matrix(0.0584509 -0.99829 -0.99829 -0.0584509 90.4609 8.85927)" fill="#EDE6FF"></ellipse></g><g filter="url(#filter6_f_242_20653)"><ellipse cx="1.11255" cy="6.89295" rx="1.11255" ry="6.89295" transform="matrix(-0.0172986 -0.99985 -0.99985 0.0172986 90.9238 6.03786)" fill="#7E14FF"></ellipse></g><g filter="url(#filter7_f_242_20653)"><ellipse cx="1.11255" cy="6.89295" rx="1.11255" ry="6.89295" transform="matrix(-0.0172986 -0.99985 -0.99985 0.0172986 90.9238 6.03786)" fill="#7E14FF"></ellipse></g><g filter="url(#filter8_f_242_20653)"><ellipse cx="66.7487" cy="3.12336" rx="1.41273" ry="9.3316" transform="rotate(39.5103 66.7487 3.12336)" fill="#7E14FF"></ellipse></g><g filter="url(#filter9_f_242_20653)"><ellipse cx="81.8602" cy="-1.70576" rx="1.41273" ry="9.3316" transform="rotate(37.8923 81.8602 -1.70576)" fill="#7E14FF"></ellipse></g><g filter="url(#filter10_f_242_20653)"><ellipse cx="79.9017" cy="2.27762" rx="1.9144" ry="3.09855" transform="rotate(37.8923 79.9017 2.27762)" fill="#47BFFF"></ellipse></g><g filter="url(#filter11_f_242_20653)"><ellipse cx="66.0223" cy="12.536" rx="1.41273" ry="9.3316" transform="rotate(37.8923 66.0223 12.536)" fill="#7E14FF"></ellipse></g><g filter="url(#filter12_f_242_20653)"><ellipse cx="66.0223" cy="12.536" rx="1.41273" ry="9.3316" transform="rotate(37.8923 66.0223 12.536)" fill="#7E14FF"></ellipse></g><g filter="url(#filter13_f_242_20653)"><ellipse cx="78.0545" cy="9.83499" rx="1.41273" ry="9.3316" transform="rotate(37.8923 78.0545 9.83499)" fill="#7E14FF"></ellipse></g><g filter="url(#filter14_f_242_20653)"><ellipse cx="78.9411" cy="10.6343" rx="1.9144" ry="4.90418" transform="rotate(37.8923 78.9411 10.6343)" fill="#47BFFF"></ellipse></g></g><path d="M64.2894 0C61.3405 4.22097 61.3233 10.7637 64.2894 14.9999H66.2818C63.3164 10.7637 63.3336 4.22097 66.2818 0H64.2894Z" fill="currentColor"></path><path d="M84.302 1.52588e-05H82.3096C85.2584 4.22098 85.2757 10.7638 82.3096 14.9999H84.302C87.2674 10.7638 87.2501 4.22098 84.302 1.52588e-05Z" fill="currentColor"></path><path d="M9.13672 10.6901L12.9072 0.248688H18.0664L12.3477 14.7516H5.71777L0 0.248688H5.30371L9.13672 10.6901ZM24.7578 14.7516H19.7861V0.248688H24.7578V14.7516ZM42.8174 3.81216H37.2441V14.7516H32.2715V3.81216H26.6982V0.248688H42.8174V3.81216ZM59.0742 3.77115H49.7305V5.71841H58.9287V9.13638H49.7305V11.2292H59.3438V14.7516H44.7578V0.248688H59.0742V3.77115Z" fill="currentColor"></path><defs><filter id="filter0_f_242_20653" x="60.2873" y="5.42446" width="19.2496" height="13.3537" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
238<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="2.45548" result="effect1_foregroundBlur_242_20653"></feGaussianBlur></filter><filter id="filter1_f_242_20653" x="49.1164" y="-2.16785" width="28.9616" height="16.4901" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="2.45548" result="effect1_foregroundBlur_242_20653"></feGaussianBlur></filter><filter id="filter2_f_242_20653" x="50.7107" y="0.898076" width="25.44" height="9.42533" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="1.47329" result="effect1_foregroundBlur_242_20653"></feGaussianBlur></filter><filter id="filter3_f_242_20653" x="52.1843" y="6.66832" width="25.5123" height="9.42534" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="1.47329" result="effect1_foregroundBlur_242_20653"></feGaussianBlur></filter><filter id="filter4_f_242_20653" x="52.6755" y="7.03664" width="25.5123" height="9.42534" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="1.47329" result="effect1_foregroundBlur_242_20653"></feGaussianBlur></filter><filter id="filter5_f_242_20653" x="71.6769" y="-5.49157" width="23.9635" height="18.8673" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="2.45548" result="effect1_foregroundBlur_242_20653"></feGaussianBlur></filter><filter id="filter6_f_242_20653" x="74.1745" y="0.979283" width="19.6764" height="8.13085" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="1.47329" result="effect1_foregroundBlur_242_20653"></feGaussianBlur></filter><filter id="filter7_f_242_20653" x="74.1745" y="0.979283" width="19.6764" height="8.13085" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="1.47329" result="effect1_foregroundBlur_242_20653"></feGaussianBlur></filter><filter id="filter8_f_242_20653" x="57.7653" y="-7.07928" width="17.9674" height="20.4053" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="1.47329" result="effect1_foregroundBlur_242_20653"></feGaussianBlur></filter><filter id="filter9_f_242_20653" x="73.0739" y="-12.0682" width="17.5728" height="20.7248" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="1.47329" result="effect1_foregroundBlur_242_20653"></feGaussianBlur></filter><filter id="filter10_f_242_20653" x="74.5251" y="-3.38285" width="10.7535" height="11.3209" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
238<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="1.47329" result="effect1_foregroundBlur_242_20653"></feGaussianBlur></filter><filter id="filter11_f_242_20653" x="57.236" y="2.1736" width="17.5728" height="20.7248" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="1.47329" result="effect1_foregroundBlur_242_20653"></feGaussianBlur></filter><filter id="filter12_f_242_20653" x="57.236" y="2.1736" width="17.5728" height="20.7248" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="1.47329" result="effect1_foregroundBlur_242_20653"></feGaussianBlur></filter><filter id="filter13_f_242_20653" x="69.2683" y="-0.527431" width="17.5728" height="20.7248" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="1.47329" result="effect1_foregroundBlur_242_20653"></feGaussianBlur></filter><filter id="filter14_f_242_20653" x="72.6237" y="3.64173" width="12.6344" height="13.985" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="1.47329" result="effect1_foregroundBlur_242_20653"></feGaussianBlur></filter></defs></svg></div><div><p class="mantine-focus-auto GettingStartedCard-module__uL_SyW__title m_b6d8b162 mantine-Text-root">Vite</p><p class="mantine-focus-auto GettingStartedCard-module__uL_SyW__description m_b6d8b162 mantine-Text-root">Best choice for a single page application (SPA)</p></div></a><a style="--paper-radius:var(--mantine-radius-lg);--card-padding:var(--mantine-spacing-xl)" class="GettingStartedCard-module__uL_SyW__root m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true" data-orientation="vertical" data-type="primary" href="/guides/next/"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="GettingStartedCard-module__uL_SyW__arrow"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg><div style="--badge-height:var(--badge-height-md);--badge-padding-x:var(--badge-padding-x-md);--badge-fz:var(--badge-fz-md);--badge-bg:var(--mantine-color-red-8);--badge-color:var(--mantine-color-white);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="GettingStartedCard-module__uL_SyW__recommended m_347db0ec mantine-Badge-root" data-size="md"><span class="m_5add502a mantine-Badge-label">Recommended</span></div><div class="GettingStartedCard-module__uL_SyW__iconWrapper" data-logo="next"><svg style="--icon-size:40px" class="GettingStartedCard-module__uL_SyW__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 394 80" data-large="true" data-logo="next"><path fill="currentColor" d="M261.919.033h68.628V12.7h-27.224v66.639H289.71V12.7h-27.791V.033zM149.052.033V12.7h-55.01v20.377h44.239v12.667H94.042v20.928h55.01V79.34H80.43V12.7h-.006V.033h68.628zM183.32.066h-17.814l63.806 79.306h17.866l-31.907-39.626L247.127.126l-17.815.028-22.96 28.516L183.32.066zM201.6 56.715l-8.921-11.092-27.224 33.81h17.865l18.28-22.718z"></path><path fill="currentColor" fill-rule="evenodd" d="M80.907 79.339L17.015 0H0v79.306h13.612V16.952l50.195 62.387h17.1z" clip-rule="evenodd"></path><path fill="currentColor" d="M333.607 78.855a3.528 3.528 0 01-2.555-1.036c-.71-.691-1.061-1.527-1.052-2.518-.009-.963.342-1.79 1.052-2.481a3.528 3.528 0 012.555-1.036c.959 0 1.798.345 2.508 1.036.72.69 1.079 1.518 1.089 2.481a3.44 3.44 0 01-.508 1.79 3.675 3.675 0 01-1.319 1.282 3.403 3.403 0 01-1.77.482zM356.84 45.445h6.032v23.24c-.009 2.135-.471 3.962-1.374 5.498-.913 1.536-2.177 2.708-3.8 3.535-1.614.818-3.505 1.237-5.654 1.237-1.965 0-3.726-.355-5.294-1.046-1.568-.69-2.813-1.726-3.726-3.09-.923-1.363-1.375-3.063-1.375-5.098h6.042c.009.89.212 1.663.599 2.308a3.855 3.855 0 001.
238605 1.481c.691.346 1.485.519 2.379.519.969 0 1.799-.2 2.472-.61.673-.4 1.19-1 1.55-1.799.35-.79.535-1.772.544-2.935v-23.24zM387.691 54.534c-.147-1.409-.793-2.509-1.918-3.29-1.135-.79-2.601-1.182-4.4-1.182-1.263 0-2.351.191-3.255.564-.904.382-1.605.89-2.085 1.536-.479.645-.719 1.381-.738 2.208 0 .691.166 1.29.489 1.79.323.51.756.937 1.319 1.282a8.806 8.806 0 001.845.882c.682.236 1.365.436 2.047.6l3.145.772a21.74 21.74 0 013.662 1.182 12.966 12.966 0 013.163 1.872 8.384 8.384 0 012.214 2.726c.544 1.064.821 2.309.821 3.745 0 1.936-.498 3.635-1.504 5.108-1.005 1.463-2.453 2.608-4.353 3.435-1.891.818-4.178 1.236-6.871 1.236-2.601 0-4.87-.4-6.779-1.2-1.918-.79-3.413-1.954-4.492-3.48-1.079-1.527-1.66-3.39-1.743-5.58h5.977c.083 1.144.452 2.099 1.079 2.871.636.763 1.466 1.327 2.481 1.709 1.024.372 2.167.563 3.431.563 1.319 0 2.481-.2 3.486-.59.996-.391 1.78-.937 2.343-1.646.572-.7.858-1.526.867-2.472-.009-.863-.268-1.581-.766-2.145-.507-.563-1.208-1.036-2.103-1.417a21.606 21.606 0 00-3.154-1.027l-3.818-.964c-2.758-.7-4.944-1.763-6.54-3.19-1.604-1.427-2.398-3.317-2.398-5.69 0-1.944.535-3.653 1.615-5.116 1.069-1.463 2.536-2.6 4.39-3.408 1.863-.818 3.966-1.218 6.308-1.218 2.38 0 4.464.4 6.263 1.218 1.798.809 3.21 1.936 4.233 3.372 1.024 1.436 1.559 3.08 1.587 4.944h-5.848z"></path></svg></div><div><p class="mantine-focus-auto GettingStartedCard-module__uL_SyW__title m_b6d8b162 mantine-Text-root">Next.js</p><p class="mantine-focus-auto GettingStartedCard-module__uL_SyW__description m_b6d8b162 mantine-Text-root">Best choice for an application with SSR</p></div></a></div></div><style data-mantine-styles="inline">.__m__-_R_knjqvm_{--sg-spacing-x:var(--mantine-spacing-lg);--sg-spacing-y:var(--mantine-spacing-lg);--sg-cols:1;}@container simple-grid (min-width: base){.__m__-_R_knjqvm_{--sg-cols:1;}}@container simple-grid (min-width: 580px){.__m__-_R_knjqvm_{--sg-cols:2;}}@container simple-grid (min-width: 920px){.__m__-_R_knjqvm_{--sg-cols:3;}}</style><div class="m_925c2d2c mantine-SimpleGrid-container"><div style="margin-top:var(--mantine-spacing-lg)" class="m_2415a157 mantine-SimpleGrid-root __m__-_R_knjqvm_"><a style="--paper-radius:var(--mantine-radius-lg);--card-padding:var(--mantine-spacing-xl)" class="GettingStartedCard-module__uL_SyW__root m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true" data-orientation="vertical" data-type="secondary" href="/guides/react-router/"><div class="GettingStartedCard-module__uL_SyW__iconWrapper" data-logo="react-router"><svg style="--icon-size:40px" class="GettingStartedCard-module__uL_SyW__icon" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 140" data-logo="react-router"><path d="M78.066 92.588c12.818 0 23.209-10.391 23.209-23.21 0-12.817-10.391-23.208-23.21-23.208-12.817 0-23.208 10.39-23.208 23.209 0 12.818 10.391 23.209 23.209 23.209zm-54.857 46.417c12.818 0 23.209-10.39 23.209-23.209 0-12.817-10.391-23.208-23.21-23.208C10.392 92.588 0 102.978 0 115.796c0 12.818 10.39 23.21 23.209 23.21zm209.582 0c12.818 0 23.209-10.39 23.209-23.209 0-12.817-10.39-23.208-23.209-23.208-12.818 0-23.209 10.39-23.209 23.208 0 12.818 10.391 23.21 23.21 23.21z"></path><path fill="#D0021B" d="M156.565 70.357c-.742-7.754-1.12-14.208-7.06-18.744-7.522-5.744-16.044-2.017-26.54-5.806C112.65 43.312 105 34.155 105 23.24 105 10.405 115.578 0 128.626 0c9.665 0 17.974 5.707 21.634 13.883 5.601 10.64 1.96 21.467 8.998 26.921 8.333 6.458 19.568 1.729 32.104 7.848a23.614 23.614 0 019.84 8.425A22.858 22.858 0 01205 69.718c0 10.915-7.65 20.073-17.964 22.568-10.497 3.789-19.019.062-26.541 5.806-8.46 6.46-3.931 17.267-10.826 28.682-3.913 7.518-11.867 12.663-21.043 12.663-13.048 0-23.626-10.405-23.626-23.24 0-9.323 5.582-17.364 13.638-21.066 12.536-6.12 23.77-1.39 32.104-7.848 4.807-3.726 5.823-9.473 5.823-16.926z"></path></svg></div><div><p class="mantine-focus-auto GettingStartedCard-module__uL_SyW__title m_b6d8b162 mantine-Text-root">React Router</p><p class="mantine-focus-auto GettingStartedCard-module__uL_SyW__description m_b6d8b162 mantine-Text-root">Get started with React Router</p></div></a><a style="--paper-radius:var(--mantine-radius-lg);--card-padding:var(--mantine-spacing-xl)" class="GettingStartedCard-module__uL_SyW__root m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true" data-orientation="vertical" data-type="secondary" href="/guides/redwood/"><div class="GettingStartedCard-module__uL_SyW__iconWrapper" data-logo="redwood"><svg style="--icon-size:28px" class="GettingStartedCard-module__uL_SyW__icon" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 277" data-logo="redwood"><path fill="#FFF" d="M112.39 3.928C101.983 9.164 80.046 19.36 68.16 27.493c-11.885 8.134-10.407 15.711-15.61 20.948-5.203 5.237-20.814 18.329-31.22 26.184-10.407 7.855-7.806 28.8
23803-10.407 36.658-2.602 7.855-7.806 26.184-10.407 34.04-2.602 7.855 5.203 18.329 10.407 28.802 5.203 10.474 18.211 39.277 23.415 49.75 5.203 10.474 20.813 5.237 33.822 15.71 13.009 10.475 31.22 23.568 44.229 31.423 13.008 7.855 18.212 7.855 31.22 0 13.009-7.855 31.22-20.948 44.23-31.422 13.008-10.474 28.618-5.237 33.822-15.71 5.203-10.474 18.211-39.277 23.415-49.75 5.203-10.474 13.008-20.948 10.406-28.803-2.602-7.856-7.804-26.185-10.406-34.04-2.602-7.855 0-28.803-10.407-36.658s-22.487-17.857-31.22-26.184c-8.734-8.327-5.204-13.092-15.61-20.948-10.407-7.855-33.823-18.329-44.23-23.565-10.406-5.237-20.813-5.237-31.22 0z"></path><path fill="#BF4722" d="M75.644 49.319l48.694 33.238a6.886 6.886 0 003.7 1.155 6.665 6.665 0 003.7-1.155l48.73-33.35a6.65 6.65 0 002.748-5.947 6.633 6.633 0 00-3.672-5.418L130.85 13.733a6.692 6.692 0 00-5.846 0l-48.546 24.11a6.633 6.633 0 00-3.707 5.5 6.649 6.649 0 002.893 5.976zm68.933 43.671a6.721 6.721 0 002.886 5.515l39.037 26.68a6.55 6.55 0 008.103-.522l32.746-29.288a6.654 6.654 0 002.213-5.156 6.648 6.648 0 00-2.509-5.017L195.787 60.2a6.623 6.623 0 00-7.844-.298l-40.48 27.686a6.72 6.72 0 00-2.886 5.403zm-97.09 36.293a6.696 6.696 0 012.182 5.627 6.524 6.524 0 01-3.293 5.068l-23.31 13.973a6.586 6.586 0 01-7.5-.512 6.698 6.698 0 01-2.195-7.238l8.621-27.127a6.607 6.607 0 014.551-4.397 6.406 6.406 0 016.143 1.453l14.8 13.153zm126.432 2.832l-42.144-28.84a6.622 6.622 0 00-7.4 0l-42.145 28.84a6.754 6.754 0 00-2.886 5.068 6.88 6.88 0 002.22 5.44l42.108 37.672a6.597 6.597 0 004.403 1.677 6.63 6.63 0 004.403-1.677l42.107-37.672a6.73 6.73 0 002.183-5.44 6.606 6.606 0 00-2.849-5.068zm-112.41-7.452L28.802 95.375a6.804 6.804 0 01-2.22-5.254 6.574 6.574 0 012.478-5.03l31.266-25.152a6.696 6.696 0 017.882-.298l40.442 27.685a6.682 6.682 0 013.01 5.59 6.682 6.682 0 01-3.01 5.589l-39 26.68a6.624 6.624 0 01-8.14-.522zm167.95 42.069l-33.302-19.935a6.55 6.55 0 00-7.77.745l-40.702 36.33a6.696 6.696 0 00-2.13 6.13 6.66 6.66 0 004.055 5.05l56.463 22.878a6.333 6.333 0 002.442.485c2.621.008 5-1.54 6.069-3.95l17.501-39.2c1.425-3.102.29-6.787-2.627-8.533zm4.624-47.658l8.622 27.127h-.074a6.71 6.71 0 01-.975 5.958 6.61 6.61 0 01-5.353 2.724 6.478 6.478 0 01-3.367-.932l-23.348-13.973a6.489 6.489 0 01-3.182-5.068 6.62 6.62 0 012.183-5.627l14.8-13.19a6.59 6.59 0 016.143-1.454 6.72 6.72 0 014.551 4.435zm-123.51 70.91a6.66 6.66 0 00-2.109-6.111l-40.701-36.331a6.55 6.55 0 00-7.77-.745L26.69 166.732c-2.883 1.754-4.024 5.392-2.664 8.496l17.539 39.2c1.453 3.268 5.21 4.798 8.51 3.465l56.427-22.88a6.659 6.659 0 004.07-5.03zm19.98 11.178l45.29 18.333a6.665 6.665 0 013.997 5.44 6.614 6.614 0 01-2.813 6.223l-45.326 31.488a6.551 6.551 0 01-3.7 1.191 6.682 6.682 0 01-3.7-1.191l-45.29-31.488a6.651 6.651 0 01-2.849-6.222 6.775 6.775 0 014.144-5.44l45.29-18.334a6.69 6.69 0 014.958 0z"></path></svg></div><div><p class="mantine-focus-auto GettingStartedCard-module__uL_SyW__title m_b6d8b162 mantine-Text-root">Redwood</p><p class="mantine-focus-auto GettingStartedCard-module__uL_SyW__description m_b6d8b162 mantine-Text-root">Get started with RedwoodJS</p></div></a><a style="--paper-radius:var(--mantine-radius-lg);--card-padding:var(--mantine-spacing-xl)" class="GettingStartedCard-module__uL_SyW__root m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true" data-orientation="vertical" data-type="secondary" href="/guides/gatsby/"><div class="GettingStartedCard-module__uL_SyW__iconWrapper" data-logo="gatsby"><svg style="--icon-size:28px" class="GettingStartedCard-module__uL_SyW__icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 256" data-logo="gatsby"><rect width="250" height="250" x="3" y="3" fill="#fff" rx="125"></rect><path fill="#744C9E" d="M128 0C57.308 0 0 57.307 0 128s57.308 128 128 128c70.693 0 128-57.307 128-128S198.693 0 128 0zM27.504 129.334l99.161 99.162c-54.45-.71-98.452-44.711-99.161-99.162zm122.992 96.649L30.016 105.504C40.234 60.824 80.223 27.487 128 27.487c33.397 0 62.985 16.293 81.263 41.36l-13.917 12.279C180.52 59.864 155.887 45.949 128 45.949c-35.505 0-65.74 22.552-77.169 54.113L155.94 205.169c25.525-9.243 45.156-30.79 51.731-57.477h-43.567V128h64.41c0 47.778-33.336 87.767-78.017 97.983z"></path></svg></div><div><p class="mantine-focus-auto GettingStartedCard-module__uL_SyW__title m_b6d8b162 mantine-Text-root">Gatsby</p><p class="mantine-focus-auto GettingStartedCard-module__uL_SyW__description m_b6d8b162 mantine-Text-root">Get started with Gatsby</p></div></a></div></div><div style="height:var(--mantine-spacing-xl);min-height:var(--mantine-spacing-xl)" class=""></div></div></div></section></div><div class="DocsFooter-module__IQhwVq__root"><div class="DocsFooter-module__IQhwVq__spacer"></div><footer class="DocsFooter-module__IQhwVq__wrapper width-before-scroll-bar"><div style="--container-size:calc(90rem * 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>
238<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.
238095-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">
238<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>
238<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"Znu12BTkm3tzbiqqkSQF7","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script>
238</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.