diff --git a/404.html b/404.html index 9d52506c7a..8b89eee7aa 100644 --- a/404.html +++ b/404.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

404

+
Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

404

Nothing found. If some of the Mantine documentation pages are linking to this page, please let us know by opening an issue. -Otherwise, get back to the home page.

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on XFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people

\ No newline at end of file +Otherwise, get back to the home page.

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on XFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people

\ No newline at end of file diff --git a/404/index.html b/404/index.html index 9d52506c7a..8b89eee7aa 100644 --- a/404/index.html +++ b/404/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

404

+
Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

404

Nothing found. If some of the Mantine documentation pages are linking to this page, please let us know by opening an issue. -Otherwise, get back to the home page.

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on XFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people

\ No newline at end of file +Otherwise, get back to the home page.

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on XFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people

\ No newline at end of file diff --git a/_next/static/chunks/3309-1904491a84967ff3.js b/_next/static/chunks/3309-1904491a84967ff3.js new file mode 100644 index 0000000000..16b2343f3c --- /dev/null +++ b/_next/static/chunks/3309-1904491a84967ff3.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3309],{3309:function(e,t,a){"use strict";a.d(t,{p:function(){return c}});var n=a(52322),i=(0,a(73681).Z)("outline","file-invoice","IconFileInvoice",[["path",{d:"M14 3v4a1 1 0 0 0 1 1h4",key:"svg-0"}],["path",{d:"M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z",key:"svg-1"}],["path",{d:"M9 7l1 0",key:"svg-2"}],["path",{d:"M9 13l6 0",key:"svg-3"}],["path",{d:"M13 17l2 0",key:"svg-4"}]]),s=a(45909),r=a(93010),o=a(17115),v=a(8582),d=a(13444);let h=[{version:"7.14.0",date:"November 12, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.14.0",link:"https://mantine.dev/changelog/7-14-0",patches:[]},{version:"7.13.0",date:"September 26, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.13.0",link:"https://mantine.dev/changelog/7-13-0",patches:[{version:"7.13.1",date:"September 30, 2024"},{version:"7.13.2",date:"October 3, 2024"},{version:"7.13.3",date:"October 17, 2024"},{version:"7.13.4",date:"October 23, 2024"},{version:"7.13.5",date:"November 8, 2024"}]},{version:"7.12.0",date:"August 6, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.12.0",link:"https://mantine.dev/changelog/7-12-0",patches:[{version:"7.11.1",date:"August 12, 2024"},{version:"7.11.1",date:"August 30, 2024"}]},{version:"7.11.0",date:"June 26, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.11.0",link:"https://mantine.dev/changelog/7-11-0",patches:[{version:"7.11.1",date:"July 2, 2024"},{version:"7.11.2",date:"July 13, 2024"}]},{version:"7.10.0",date:"May 23, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.10.0",link:"https://mantine.dev/changelog/7-10-0",patches:[{version:"7.10.1",date:"May 30, 2024"},{version:"7.10.2",date:"June 13, 2024"}]},{version:"7.9.0",date:"May 2, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.9.0",link:"https://mantine.dev/changelog/7-9-0",patches:[{version:"7.9.1",date:"May 8, 2024"},{version:"7.9.2",date:"May 17, 2024"}]},{version:"7.8.0",date:"April 12, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.8.0",link:"https://mantine.dev/changelog/7-8-0",patches:[{version:"7.8.1",date:"April 24, 2024"}]},{version:"7.7.0",date:"March 26, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.7.0",link:"https://mantine.dev/changelog/7-7-0",patches:[{version:"7.7.2",date:"April 11, 2024"},{version:"7.7.1",date:"March 29, 2024"}]},{version:"7.6.0",date:"February 27, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.6.0",link:"https://mantine.dev/changelog/7-6-0",patches:[{version:"7.6.1",date:"February 28, 2024"},{version:"7.6.2",date:"March 12, 2024"}]},{version:"7.5.0",date:"January 26, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.5.0",link:"https://mantine.dev/changelog/7-5-0",patches:[{version:"7.5.1",date:"February 2, 2024"},{version:"7.5.2",date:"February 9, 2024"},{version:"7.5.3",date:"February 16, 2024"}]},{version:"7.4.0",date:"January 3, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.4.0",link:"https://mantine.dev/changelog/7-4-0",patches:[{version:"7.4.1",date:"January 9, 2024"},{version:"7.4.2",date:"January 18, 2024"}]},{version:"7.3.0",date:"December 5, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/7.3.0",link:"https://mantine.dev/changelog/7-3-0",patches:[{version:"7.3.1",date:"December 7, 2023"},{version:"7.3.2",date:"December 14, 2023"}]},{version:"7.2.0",date:"November 6, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/7.2.0",link:"https://mantine.dev/changelog/7-2-0",patches:[{version:"7.2.2",date:"November 13, 2023"},{version:"7.2.1",date:"November 7, 2023"},{version:"7.2.0",date:"November 6, 2023"}]},{version:"7.1.0",date:"September 28, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/7.1.0",link:"https://mantine.dev/changelog/7-1-0",patches:[{version:"7.1.6",date:"October 26, 2023"},{version:"7.1.5",date:"October 19, 2023"},{version:"7.1.3",date:"October 12, 2023"},{version:"7.1.2",date:"October 2, 2023"},{version:"7.1.1",date:"October 2, 2023"},{version:"7.1.0",date:"September 28, 2023"}]},{version:"7.0.0",date:"September 18, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/7.0.0",link:"https://mantine.dev/changelog/7-0-0",patches:[{version:"7.0.2",date:"September 26, 2023"},{version:"7.0.1",date:"September 25, 2023"},{version:"7.0.0",date:"September 18, 2023"}]},{version:"6.0.0",date:"March 2, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/6.0.0",link:"https://v6.mantine.dev/changelog/6-0-0",patches:[{version:"6.0.21",date:"September 17, 2023"},{version:"6.0.20",date:"September 5, 2023"},{version:"6.0.19",date:"August 10, 2023"},{version:"6.0.18",date:"August 7, 2023"},{version:"6.0.17",date:"July 18, 2023"},{version:"6.0.16",date:"July 4, 2023"},{version:"6.0.15",date:"June 27, 2023"},{version:"6.0.14",date:"June 20, 2023"},{version:"6.0.13",date:"May 30, 2023"},{version:"6.0.11",date:"May 16, 2023"},{version:"6.0.10",date:"May 2, 2023"},{version:"6.0.9",date:"April 25, 2023"},{version:"6.0.8",date:"April 18, 2023"},{version:"6.0.7",date:"April 11, 2023"},{version:"6.0.6",date:"April 4, 2023"},{version:"6.0.5",date:"March 28, 2023"},{version:"6.0.3",date:"March 21, 2023"},{version:"6.0.2",date:"March 14, 2023"},{version:"6.0.1",date:"March 8, 2023"},{version:"6.0.0",date:"March 2, 2023"}]},{version:"5.10.0",date:"January 3, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/5.10.0",link:"https://v5.mantine.dev/changelog/5-10-0",patches:[{version:"5.10.5",date:"February 26, 2023"},{version:"5.10.4",date:"February 15, 2023"},{version:"5.10.3",date:"February 3, 2023"},{version:"5.10.2",date:"January 25, 2023"},{version:"5.10.1",date:"January 17, 2023"},{version:"5.10.0",date:"January 3, 2023"}]},{version:"5.9.0",date:"December 1, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.9.0",link:"https://v5.mantine.dev/changelog/5-9-0",patches:[{version:"5.9.6",date:"December 31, 2022"},{version:"5.9.5",date:"December 17, 2022"},{version:"5.9.4",date:"December 12, 2022"},{version:"5.9.3",date:"December 10, 2022"},{version:"5.9.2",date:"December 5, 2022"},{version:"5.9.1",date:"December 4, 2022"},{version:"5.9.0",date:"December 1, 2022"}]},{version:"5.8.0",date:"November 16, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.8.0",link:"https://v5.mantine.dev/changelog/5-8-0",patches:[{version:"5.8.4",date:"November 28, 2022"},{version:"5.8.3",date:"November 23, 2022"},{version:"5.8.2",date:"November 19, 2022"},{version:"5.8.0",date:"November 16, 2022"}]},{version:"5.7.0",date:"November 4, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.7.0",link:"https://v5.mantine.dev/changelog/5-7-0",patches:[{version:"5.7.2",date:"November 12, 2022"},{version:"5.7.1",date:"November 6, 2022"},{version:"5.7.0",date:"November 4, 2022"}]},{version:"5.6.0",date:"October 20, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.6.0",link:"https://v5.mantine.dev/changelog/5-6-0",patches:[{version:"5.6.4",date:"November 2, 2022"},{version:"5.6.3",date:"October 27, 2022"},{version:"5.6.2",date:"October 24, 2022"},{version:"5.6.1",date:"October 22, 2022"},{version:"5.6.0",date:"October 20, 2022"}]},{version:"5.5.0",date:"October 2, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.5.0",link:"https://v5.mantine.dev/changelog/5-5-0",patches:[{version:"5.5.6",date:"October 18, 2022"},{version:"5.5.5",date:"October 11, 2022"},{version:"5.5.4",date:"October 5, 2022"},{version:"5.5.2",date:"October 4, 2022"},{version:"5.5.1",date:"October 3, 2022"},{version:"5.5.0",date:"October 2, 2022"}]},{version:"5.4.0",date:"September 19, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.4.0",link:"https://v5.mantine.dev/changelog/5-4-0",patches:[{version:"5.4.2",date:"September 29, 2022"},{version:"5.4.1",date:"September 24, 2022"},{version:"5.4.0",date:"September 19, 2022"}]},{version:"5.3.0",date:"September 9, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.3.0",link:"https://v5.mantine.dev/changelog/5-3-0",patches:[{version:"5.3.3",date:"September 17, 2022"},{version:"5.3.2",date:"September 15, 2022"},{version:"5.3.1",date:"September 14, 2022"},{version:"5.3.0",date:"September 9, 2022"}]},{version:"5.2.0",date:"August 18, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.2.0",link:"https://v5.mantine.dev/changelog/5-2-0",patches:[{version:"5.2.7",date:"September 8, 2022"},{version:"5.2.6",date:"September 6, 2022"},{version:"5.2.5",date:"September 3, 2022"},{version:"5.2.4",date:"August 27, 2022"},{version:"5.2.3",date:"August 22, 2022"},{version:"5.2.2",date:"August 22, 2022"},{version:"5.2.0",date:"August 18, 2022"}]},{version:"5.1.0",date:"August 8, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.1.0",link:"https://v5.mantine.dev/changelog/5-1-0",patches:[{version:"5.1.7",date:"August 18, 2022"},{version:"5.1.6",date:"August 14, 2022"},{version:"5.1.5",date:"August 13, 2022"},{version:"5.1.4",date:"August 12, 2022"},{version:"5.1.3",date:"August 11, 2022"},{version:"5.1.1",date:"August 9, 2022"},{version:"5.1.0",date:"August 8, 2022"}]},{version:"5.0.0",date:"July 25, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.0.0",link:"https://v5.mantine.dev/changelog/5-0-0",patches:[{version:"5.0.3",date:"August 5, 2022"},{version:"5.0.2",date:"July 30, 2022"},{version:"5.0.0",date:"July 25, 2022"}]},{version:"4.2.0",date:"April 27, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/4.2.0",link:"https://v4.mantine.dev/changelog/4-2-0",patches:[{version:"4.2.12",date:"July 3, 2022"},{version:"4.2.11",date:"June 26, 2022"},{version:"4.2.10",date:"June 19, 2022"},{version:"4.2.9",date:"June 12, 2022"},{version:"4.2.8",date:"June 5, 2022"},{version:"4.2.7",date:"May 29, 2022"},{version:"4.2.6",date:"May 22, 2022"},{version:"4.2.5",date:"May 15, 2022"},{version:"4.2.3",date:"May 8, 2022"},{version:"4.2.2",date:"May 1, 2022"},{version:"4.2.0",date:"April 27, 2022"}]},{version:"4.1.0",date:"March 28, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/4.1.0",link:"https://v4.mantine.dev/changelog/4-1-0",patches:[{version:"4.1.5",date:"April 24, 2022"},{version:"4.1.4",date:"April 17, 2022"},{version:"4.1.3",date:"April 9, 2022"},{version:"4.1.2",date:"April 3, 2022"},{version:"4.1.1",date:"April 1, 2022"},{version:"4.1.0",date:"March 28, 2022"}]},{version:"4.0.0",date:"March 10, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/4.0.0",link:"https://v4.mantine.dev/changelog/4-0-0",patches:[{version:"4.0.9",date:"March 27, 2022"},{version:"4.0.8",date:"March 24, 2022"},{version:"4.0.7",date:"March 20, 2022"},{version:"4.0.6",date:"March 18, 2022"},{version:"4.0.5",date:"March 16, 2022"},{version:"4.0.4",date:"March 13, 2022"},{version:"4.0.3",date:"March 13, 2022"},{version:"4.0.2",date:"March 12, 2022"},{version:"4.0.1",date:"March 11, 2022"},{version:"4.0.0",date:"March 10, 2022"}]},{version:"3.6.0",date:"January 14, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/3.6.0",link:"https://v3.mantine.dev/changelog/3-6-0",patches:[{version:"3.6.14",date:"March 3, 2022"},{version:"3.6.13",date:"March 2, 2022"},{version:"3.6.12",date:"March 1, 2022"},{version:"3.6.11",date:"February 25, 2022"},{version:"3.6.10",date:"February 24, 2022"},{version:"3.6.9",date:"February 17, 2022"},{version:"3.6.8",date:"February 16, 2022"},{version:"3.6.7",date:"February 9, 2022"},{version:"3.6.6",date:"February 5, 2022"},{version:"3.6.5",date:"February 2, 2022"},{version:"3.6.4",date:"January 30, 2022"},{version:"3.6.3",date:"January 25, 2022"},{version:"3.6.2",date:"January 20, 2022"},{version:"3.6.1",date:"January 17, 2022"},{version:"3.6.0",date:"January 14, 2022"}]},{version:"3.5.0",date:"January 3, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/3.5.0",link:"https://v3.mantine.dev/changelog/3-5-0",patches:[{version:"3.5.5",date:"January 12, 2022"},{version:"3.5.4",date:"January 9, 2022"},{version:"3.5.3",date:"January 8, 2022"},{version:"3.5.2",date:"January 7, 2022"},{version:"3.5.1",date:"January 6, 2022"},{version:"3.5.0",date:"January 3, 2022"}]},{version:"3.4.0",date:"December 14, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.4.0",link:"https://v3.mantine.dev/changelog/3-4-0",patches:[{version:"3.4.3",date:"December 20, 2021"},{version:"3.4.2",date:"December 18, 2021"},{version:"3.4.1",date:"December 16, 2021"},{version:"3.4.0",date:"December 14, 2021"}]},{version:"3.3.0",date:"December 2, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.3.0",link:"https://v3.mantine.dev/changelog/3-3-0",patches:[{version:"3.3.5",date:"December 7, 2021"},{version:"3.3.4",date:"December 6, 2021"},{version:"3.3.3",date:"December 6, 2021"},{version:"3.3.2",date:"December 4, 2021"},{version:"3.3.1",date:"December 3, 2021"},{version:"3.3.0",date:"December 2, 2021"}]},{version:"3.2.0",date:"November 13, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.2.0",link:"https://v3.mantine.dev/changelog/3-2-0",patches:[{version:"3.2.3",date:"November 26, 2021"},{version:"3.2.2",date:"November 22, 2021"},{version:"3.2.1",date:"November 19, 2021"},{version:"3.2.0",date:"November 13, 2021"}]},{version:"3.1.0",date:"October 28, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.1.0",link:"https://v3.mantine.dev/changelog/3-1-0",patches:[{version:"3.1.9",date:"November 13, 2021"},{version:"3.1.8",date:"November 10, 2021"},{version:"3.1.7",date:"November 8, 2021"},{version:"3.1.6",date:"November 5, 2021"},{version:"3.1.5",date:"November 5, 2021"},{version:"3.1.4",date:"November 3, 2021"},{version:"3.1.3",date:"November 2, 2021"},{version:"3.1.2",date:"November 1, 2021"},{version:"3.1.1",date:"November 1, 2021"},{version:"3.1.0",date:"October 28, 2021"}]},{version:"3.0.0",date:"October 10, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.0.0",link:"https://v3.mantine.dev/changelog/3-0-0",patches:[{version:"3.0.5",date:"October 16, 2021"},{version:"3.0.4",date:"October 14, 2021"},{version:"3.0.3",date:"October 13, 2021"},{version:"3.0.2",date:"October 12, 2021"},{version:"3.0.1",date:"October 11, 2021"},{version:"3.0.0",date:"October 10, 2021"}]},{version:"2.5.0",date:"September 16, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.5.0",link:"https://v2.mantine.dev/changelog/2-5-0",patches:[{version:"2.5.1",date:"September 17, 2021"},{version:"2.5.0",date:"September 16, 2021"}]},{version:"2.4.0",date:"August 24, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.4.0",link:"https://v2.mantine.dev/changelog/2-4-0",patches:[{version:"2.4.3",date:"September 5, 2021"},{version:"2.4.2",date:"September 5, 2021"},{version:"2.4.1",date:"September 1, 2021"},{version:"2.4.0",date:"August 24, 2021"}]},{version:"2.3.0",date:"August 15, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.3.0",link:"https://v2.mantine.dev/changelog/2-3-0",patches:[{version:"2.3.2",date:"August 24, 2021"},{version:"2.3.1",date:"August 19, 2021"},{version:"2.3.0",date:"August 15, 2021"}]},{version:"2.2.0",date:"August 2, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.2.0",link:"https://v2.mantine.dev/changelog/2-2-0",patches:[{version:"2.2.3",date:"August 15, 2021"},{version:"2.2.2",date:"August 12, 2021"},{version:"2.2.1",date:"August 4, 2021"},{version:"2.2.0",date:"August 2, 2021"}]},{version:"2.1.0",date:"July 20, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.1.0",link:"https://v2.mantine.dev/changelog/2-1-0",patches:[{version:"2.1.5",date:"July 30, 2021"},{version:"2.1.4",date:"July 27, 2021"},{version:"2.1.3",date:"July 26, 2021"},{version:"2.1.2",date:"July 24, 2021"},{version:"2.1.1",date:"July 21, 2021"},{version:"2.1.0",date:"July 20, 2021"}]},{version:"2.0.0",date:"July 5, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.0.0",link:"https://v2.mantine.dev/changelog/2-0-0",patches:[{version:"2.0.7",date:"July 18, 2021"},{version:"2.0.6",date:"July 16, 2021"},{version:"2.0.5",date:"July 14, 2021"},{version:"2.0.4",date:"July 13, 2021"},{version:"2.0.3",date:"July 11, 2021"},{version:"2.0.2",date:"July 6, 2021"},{version:"2.0.0",date:"July 5, 2021"}]},{version:"1.3.0",date:"June 1, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/1.3.0",link:"https://v2.mantine.dev/changelog/1-3-0",patches:[{version:"1.3.1",date:"June 2, 2021"},{version:"1.3.0",date:"June 1, 2021"}]},{version:"1.1.0",date:"May 19, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/1.1.0",link:"https://v2.mantine.dev/changelog/1-1-0",patches:[{version:"1.1.1",date:"May 20, 2021"},{version:"1.1.0",date:"May 19, 2021"}]},{version:"1.0.0",date:"May 3, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/1.0.0",link:"https://v2.mantine.dev/changelog/1-0-0",patches:[{version:"1.0.6",date:"May 9, 2021"},{version:"1.0.5",date:"May 8, 2021"},{version:"1.0.4",date:"May 8, 2021"},{version:"1.0.3",date:"May 5, 2021"},{version:"1.0.2",date:"May 5, 2021"},{version:"1.0.0",date:"May 3, 2021"}]}];var m=a(1353),g=a.n(m);function c(){let e=h.map(e=>{var t;let a=e.patches.filter(e=>!e.version.endsWith("0")).map(e=>(0,n.jsx)("li",{children:(0,n.jsxs)("a",{href:"https://github.com/mantinedev/mantine/releases/tag/".concat(e.version),target:"_blank",className:g().patchLink,rel:"noreferrer",children:[(0,n.jsx)(s.E,{className:g().patchBadge,children:e.version})," –"," ",(0,n.jsx)("span",{className:g().patchLinkLabel,children:e.date})]})},e.version));return(0,n.jsxs)("div",{className:g().minorVersion,children:[(0,n.jsxs)(r.Z,{className:g().versionHeader,children:[(0,n.jsx)("a",{href:"1.0.0"!==e.version?e.link:e.github,className:g().minorVersionBadgeWrapper,target:"_blank",rel:"noreferrer",children:(0,n.jsx)(s.E,{className:g().minorVersionBadge,children:e.version})}),(0,n.jsxs)(r.Z,{gap:"xs",children:["1.0.0"!==e.version&&(0,n.jsx)(o.z,{variant:"default",component:"a",href:e.link,radius:"md",size:"xs",target:"_blank",leftSection:(0,n.jsx)(i,{size:14}),children:"Changelog"}),(0,n.jsx)(o.z,{component:"a",variant:"default",href:e.github,target:"_blank",radius:"md",size:"xs",className:g().githubControl,leftSection:(0,n.jsx)(d.E,{size:12}),children:"GitHub release"})]}),(0,n.jsx)(v.x,{className:g().minorVersionDate,children:e.date})]}),a.length>0?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(v.x,{mt:"1.5rem",fz:15,children:[(0,n.jsx)("b",{children:(t=e.version,"".concat(t.split(".").slice(0,2).join("."),".X"))})," patches:"]}),(0,n.jsx)("ul",{children:a})]}):(0,n.jsxs)(v.x,{mt:"1rem",fz:15,children:["Version ",e.version," does not have associated patch releases yet."]})]},e.version)});return(0,n.jsx)("div",{className:g().root,children:e})}},1353:function(e){e.exports={root:"VersionsList_root__NkvIm",minorVersion:"VersionsList_minorVersion___wjoQ",minorVersionBadgeWrapper:"VersionsList_minorVersionBadgeWrapper__vEYlh",minorVersionBadge:"VersionsList_minorVersionBadge__Y3CXf",minorVersionDate:"VersionsList_minorVersionDate__hWtXB",patchLink:"VersionsList_patchLink__VosIW",patchLinkLabel:"VersionsList_patchLinkLabel__6Hrrb",patchBadge:"VersionsList_patchBadge__sq3MK",versionHeader:"VersionsList_versionHeader__KpvGy"}}}]); \ No newline at end of file diff --git a/_next/static/chunks/3309-269972c4785ed80f.js b/_next/static/chunks/3309-269972c4785ed80f.js deleted file mode 100644 index 41534d3d1e..0000000000 --- a/_next/static/chunks/3309-269972c4785ed80f.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3309],{3309:function(e,t,a){"use strict";a.d(t,{p:function(){return c}});var n=a(52322),i=(0,a(73681).Z)("outline","file-invoice","IconFileInvoice",[["path",{d:"M14 3v4a1 1 0 0 0 1 1h4",key:"svg-0"}],["path",{d:"M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z",key:"svg-1"}],["path",{d:"M9 7l1 0",key:"svg-2"}],["path",{d:"M9 13l6 0",key:"svg-3"}],["path",{d:"M13 17l2 0",key:"svg-4"}]]),s=a(45909),r=a(93010),o=a(17115),v=a(8582),d=a(13444);let h=[{version:"7.15.0",date:"January 14, 2025",github:"https://github.com/mantinedev/mantine/releases/tag/7.15.0",link:"https://mantine.dev/changelog/7-15-0",patches:[]},{version:"7.14.0",date:"November 12, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.14.0",link:"https://mantine.dev/changelog/7-14-0",patches:[]},{version:"7.13.0",date:"September 26, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.13.0",link:"https://mantine.dev/changelog/7-13-0",patches:[{version:"7.13.1",date:"September 30, 2024"},{version:"7.13.2",date:"October 3, 2024"},{version:"7.13.3",date:"October 17, 2024"},{version:"7.13.4",date:"October 23, 2024"},{version:"7.13.5",date:"November 8, 2024"}]},{version:"7.12.0",date:"August 6, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.12.0",link:"https://mantine.dev/changelog/7-12-0",patches:[{version:"7.11.1",date:"August 12, 2024"},{version:"7.11.1",date:"August 30, 2024"}]},{version:"7.11.0",date:"June 26, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.11.0",link:"https://mantine.dev/changelog/7-11-0",patches:[{version:"7.11.1",date:"July 2, 2024"},{version:"7.11.2",date:"July 13, 2024"}]},{version:"7.10.0",date:"May 23, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.10.0",link:"https://mantine.dev/changelog/7-10-0",patches:[{version:"7.10.1",date:"May 30, 2024"},{version:"7.10.2",date:"June 13, 2024"}]},{version:"7.9.0",date:"May 2, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.9.0",link:"https://mantine.dev/changelog/7-9-0",patches:[{version:"7.9.1",date:"May 8, 2024"},{version:"7.9.2",date:"May 17, 2024"}]},{version:"7.8.0",date:"April 12, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.8.0",link:"https://mantine.dev/changelog/7-8-0",patches:[{version:"7.8.1",date:"April 24, 2024"}]},{version:"7.7.0",date:"March 26, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.7.0",link:"https://mantine.dev/changelog/7-7-0",patches:[{version:"7.7.2",date:"April 11, 2024"},{version:"7.7.1",date:"March 29, 2024"}]},{version:"7.6.0",date:"February 27, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.6.0",link:"https://mantine.dev/changelog/7-6-0",patches:[{version:"7.6.1",date:"February 28, 2024"},{version:"7.6.2",date:"March 12, 2024"}]},{version:"7.5.0",date:"January 26, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.5.0",link:"https://mantine.dev/changelog/7-5-0",patches:[{version:"7.5.1",date:"February 2, 2024"},{version:"7.5.2",date:"February 9, 2024"},{version:"7.5.3",date:"February 16, 2024"}]},{version:"7.4.0",date:"January 3, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.4.0",link:"https://mantine.dev/changelog/7-4-0",patches:[{version:"7.4.1",date:"January 9, 2024"},{version:"7.4.2",date:"January 18, 2024"}]},{version:"7.3.0",date:"December 5, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/7.3.0",link:"https://mantine.dev/changelog/7-3-0",patches:[{version:"7.3.1",date:"December 7, 2023"},{version:"7.3.2",date:"December 14, 2023"}]},{version:"7.2.0",date:"November 6, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/7.2.0",link:"https://mantine.dev/changelog/7-2-0",patches:[{version:"7.2.2",date:"November 13, 2023"},{version:"7.2.1",date:"November 7, 2023"},{version:"7.2.0",date:"November 6, 2023"}]},{version:"7.1.0",date:"September 28, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/7.1.0",link:"https://mantine.dev/changelog/7-1-0",patches:[{version:"7.1.6",date:"October 26, 2023"},{version:"7.1.5",date:"October 19, 2023"},{version:"7.1.3",date:"October 12, 2023"},{version:"7.1.2",date:"October 2, 2023"},{version:"7.1.1",date:"October 2, 2023"},{version:"7.1.0",date:"September 28, 2023"}]},{version:"7.0.0",date:"September 18, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/7.0.0",link:"https://mantine.dev/changelog/7-0-0",patches:[{version:"7.0.2",date:"September 26, 2023"},{version:"7.0.1",date:"September 25, 2023"},{version:"7.0.0",date:"September 18, 2023"}]},{version:"6.0.0",date:"March 2, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/6.0.0",link:"https://v6.mantine.dev/changelog/6-0-0",patches:[{version:"6.0.21",date:"September 17, 2023"},{version:"6.0.20",date:"September 5, 2023"},{version:"6.0.19",date:"August 10, 2023"},{version:"6.0.18",date:"August 7, 2023"},{version:"6.0.17",date:"July 18, 2023"},{version:"6.0.16",date:"July 4, 2023"},{version:"6.0.15",date:"June 27, 2023"},{version:"6.0.14",date:"June 20, 2023"},{version:"6.0.13",date:"May 30, 2023"},{version:"6.0.11",date:"May 16, 2023"},{version:"6.0.10",date:"May 2, 2023"},{version:"6.0.9",date:"April 25, 2023"},{version:"6.0.8",date:"April 18, 2023"},{version:"6.0.7",date:"April 11, 2023"},{version:"6.0.6",date:"April 4, 2023"},{version:"6.0.5",date:"March 28, 2023"},{version:"6.0.3",date:"March 21, 2023"},{version:"6.0.2",date:"March 14, 2023"},{version:"6.0.1",date:"March 8, 2023"},{version:"6.0.0",date:"March 2, 2023"}]},{version:"5.10.0",date:"January 3, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/5.10.0",link:"https://v5.mantine.dev/changelog/5-10-0",patches:[{version:"5.10.5",date:"February 26, 2023"},{version:"5.10.4",date:"February 15, 2023"},{version:"5.10.3",date:"February 3, 2023"},{version:"5.10.2",date:"January 25, 2023"},{version:"5.10.1",date:"January 17, 2023"},{version:"5.10.0",date:"January 3, 2023"}]},{version:"5.9.0",date:"December 1, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.9.0",link:"https://v5.mantine.dev/changelog/5-9-0",patches:[{version:"5.9.6",date:"December 31, 2022"},{version:"5.9.5",date:"December 17, 2022"},{version:"5.9.4",date:"December 12, 2022"},{version:"5.9.3",date:"December 10, 2022"},{version:"5.9.2",date:"December 5, 2022"},{version:"5.9.1",date:"December 4, 2022"},{version:"5.9.0",date:"December 1, 2022"}]},{version:"5.8.0",date:"November 16, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.8.0",link:"https://v5.mantine.dev/changelog/5-8-0",patches:[{version:"5.8.4",date:"November 28, 2022"},{version:"5.8.3",date:"November 23, 2022"},{version:"5.8.2",date:"November 19, 2022"},{version:"5.8.0",date:"November 16, 2022"}]},{version:"5.7.0",date:"November 4, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.7.0",link:"https://v5.mantine.dev/changelog/5-7-0",patches:[{version:"5.7.2",date:"November 12, 2022"},{version:"5.7.1",date:"November 6, 2022"},{version:"5.7.0",date:"November 4, 2022"}]},{version:"5.6.0",date:"October 20, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.6.0",link:"https://v5.mantine.dev/changelog/5-6-0",patches:[{version:"5.6.4",date:"November 2, 2022"},{version:"5.6.3",date:"October 27, 2022"},{version:"5.6.2",date:"October 24, 2022"},{version:"5.6.1",date:"October 22, 2022"},{version:"5.6.0",date:"October 20, 2022"}]},{version:"5.5.0",date:"October 2, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.5.0",link:"https://v5.mantine.dev/changelog/5-5-0",patches:[{version:"5.5.6",date:"October 18, 2022"},{version:"5.5.5",date:"October 11, 2022"},{version:"5.5.4",date:"October 5, 2022"},{version:"5.5.2",date:"October 4, 2022"},{version:"5.5.1",date:"October 3, 2022"},{version:"5.5.0",date:"October 2, 2022"}]},{version:"5.4.0",date:"September 19, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.4.0",link:"https://v5.mantine.dev/changelog/5-4-0",patches:[{version:"5.4.2",date:"September 29, 2022"},{version:"5.4.1",date:"September 24, 2022"},{version:"5.4.0",date:"September 19, 2022"}]},{version:"5.3.0",date:"September 9, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.3.0",link:"https://v5.mantine.dev/changelog/5-3-0",patches:[{version:"5.3.3",date:"September 17, 2022"},{version:"5.3.2",date:"September 15, 2022"},{version:"5.3.1",date:"September 14, 2022"},{version:"5.3.0",date:"September 9, 2022"}]},{version:"5.2.0",date:"August 18, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.2.0",link:"https://v5.mantine.dev/changelog/5-2-0",patches:[{version:"5.2.7",date:"September 8, 2022"},{version:"5.2.6",date:"September 6, 2022"},{version:"5.2.5",date:"September 3, 2022"},{version:"5.2.4",date:"August 27, 2022"},{version:"5.2.3",date:"August 22, 2022"},{version:"5.2.2",date:"August 22, 2022"},{version:"5.2.0",date:"August 18, 2022"}]},{version:"5.1.0",date:"August 8, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.1.0",link:"https://v5.mantine.dev/changelog/5-1-0",patches:[{version:"5.1.7",date:"August 18, 2022"},{version:"5.1.6",date:"August 14, 2022"},{version:"5.1.5",date:"August 13, 2022"},{version:"5.1.4",date:"August 12, 2022"},{version:"5.1.3",date:"August 11, 2022"},{version:"5.1.1",date:"August 9, 2022"},{version:"5.1.0",date:"August 8, 2022"}]},{version:"5.0.0",date:"July 25, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.0.0",link:"https://v5.mantine.dev/changelog/5-0-0",patches:[{version:"5.0.3",date:"August 5, 2022"},{version:"5.0.2",date:"July 30, 2022"},{version:"5.0.0",date:"July 25, 2022"}]},{version:"4.2.0",date:"April 27, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/4.2.0",link:"https://v4.mantine.dev/changelog/4-2-0",patches:[{version:"4.2.12",date:"July 3, 2022"},{version:"4.2.11",date:"June 26, 2022"},{version:"4.2.10",date:"June 19, 2022"},{version:"4.2.9",date:"June 12, 2022"},{version:"4.2.8",date:"June 5, 2022"},{version:"4.2.7",date:"May 29, 2022"},{version:"4.2.6",date:"May 22, 2022"},{version:"4.2.5",date:"May 15, 2022"},{version:"4.2.3",date:"May 8, 2022"},{version:"4.2.2",date:"May 1, 2022"},{version:"4.2.0",date:"April 27, 2022"}]},{version:"4.1.0",date:"March 28, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/4.1.0",link:"https://v4.mantine.dev/changelog/4-1-0",patches:[{version:"4.1.5",date:"April 24, 2022"},{version:"4.1.4",date:"April 17, 2022"},{version:"4.1.3",date:"April 9, 2022"},{version:"4.1.2",date:"April 3, 2022"},{version:"4.1.1",date:"April 1, 2022"},{version:"4.1.0",date:"March 28, 2022"}]},{version:"4.0.0",date:"March 10, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/4.0.0",link:"https://v4.mantine.dev/changelog/4-0-0",patches:[{version:"4.0.9",date:"March 27, 2022"},{version:"4.0.8",date:"March 24, 2022"},{version:"4.0.7",date:"March 20, 2022"},{version:"4.0.6",date:"March 18, 2022"},{version:"4.0.5",date:"March 16, 2022"},{version:"4.0.4",date:"March 13, 2022"},{version:"4.0.3",date:"March 13, 2022"},{version:"4.0.2",date:"March 12, 2022"},{version:"4.0.1",date:"March 11, 2022"},{version:"4.0.0",date:"March 10, 2022"}]},{version:"3.6.0",date:"January 14, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/3.6.0",link:"https://v3.mantine.dev/changelog/3-6-0",patches:[{version:"3.6.14",date:"March 3, 2022"},{version:"3.6.13",date:"March 2, 2022"},{version:"3.6.12",date:"March 1, 2022"},{version:"3.6.11",date:"February 25, 2022"},{version:"3.6.10",date:"February 24, 2022"},{version:"3.6.9",date:"February 17, 2022"},{version:"3.6.8",date:"February 16, 2022"},{version:"3.6.7",date:"February 9, 2022"},{version:"3.6.6",date:"February 5, 2022"},{version:"3.6.5",date:"February 2, 2022"},{version:"3.6.4",date:"January 30, 2022"},{version:"3.6.3",date:"January 25, 2022"},{version:"3.6.2",date:"January 20, 2022"},{version:"3.6.1",date:"January 17, 2022"},{version:"3.6.0",date:"January 14, 2022"}]},{version:"3.5.0",date:"January 3, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/3.5.0",link:"https://v3.mantine.dev/changelog/3-5-0",patches:[{version:"3.5.5",date:"January 12, 2022"},{version:"3.5.4",date:"January 9, 2022"},{version:"3.5.3",date:"January 8, 2022"},{version:"3.5.2",date:"January 7, 2022"},{version:"3.5.1",date:"January 6, 2022"},{version:"3.5.0",date:"January 3, 2022"}]},{version:"3.4.0",date:"December 14, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.4.0",link:"https://v3.mantine.dev/changelog/3-4-0",patches:[{version:"3.4.3",date:"December 20, 2021"},{version:"3.4.2",date:"December 18, 2021"},{version:"3.4.1",date:"December 16, 2021"},{version:"3.4.0",date:"December 14, 2021"}]},{version:"3.3.0",date:"December 2, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.3.0",link:"https://v3.mantine.dev/changelog/3-3-0",patches:[{version:"3.3.5",date:"December 7, 2021"},{version:"3.3.4",date:"December 6, 2021"},{version:"3.3.3",date:"December 6, 2021"},{version:"3.3.2",date:"December 4, 2021"},{version:"3.3.1",date:"December 3, 2021"},{version:"3.3.0",date:"December 2, 2021"}]},{version:"3.2.0",date:"November 13, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.2.0",link:"https://v3.mantine.dev/changelog/3-2-0",patches:[{version:"3.2.3",date:"November 26, 2021"},{version:"3.2.2",date:"November 22, 2021"},{version:"3.2.1",date:"November 19, 2021"},{version:"3.2.0",date:"November 13, 2021"}]},{version:"3.1.0",date:"October 28, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.1.0",link:"https://v3.mantine.dev/changelog/3-1-0",patches:[{version:"3.1.9",date:"November 13, 2021"},{version:"3.1.8",date:"November 10, 2021"},{version:"3.1.7",date:"November 8, 2021"},{version:"3.1.6",date:"November 5, 2021"},{version:"3.1.5",date:"November 5, 2021"},{version:"3.1.4",date:"November 3, 2021"},{version:"3.1.3",date:"November 2, 2021"},{version:"3.1.2",date:"November 1, 2021"},{version:"3.1.1",date:"November 1, 2021"},{version:"3.1.0",date:"October 28, 2021"}]},{version:"3.0.0",date:"October 10, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.0.0",link:"https://v3.mantine.dev/changelog/3-0-0",patches:[{version:"3.0.5",date:"October 16, 2021"},{version:"3.0.4",date:"October 14, 2021"},{version:"3.0.3",date:"October 13, 2021"},{version:"3.0.2",date:"October 12, 2021"},{version:"3.0.1",date:"October 11, 2021"},{version:"3.0.0",date:"October 10, 2021"}]},{version:"2.5.0",date:"September 16, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.5.0",link:"https://v2.mantine.dev/changelog/2-5-0",patches:[{version:"2.5.1",date:"September 17, 2021"},{version:"2.5.0",date:"September 16, 2021"}]},{version:"2.4.0",date:"August 24, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.4.0",link:"https://v2.mantine.dev/changelog/2-4-0",patches:[{version:"2.4.3",date:"September 5, 2021"},{version:"2.4.2",date:"September 5, 2021"},{version:"2.4.1",date:"September 1, 2021"},{version:"2.4.0",date:"August 24, 2021"}]},{version:"2.3.0",date:"August 15, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.3.0",link:"https://v2.mantine.dev/changelog/2-3-0",patches:[{version:"2.3.2",date:"August 24, 2021"},{version:"2.3.1",date:"August 19, 2021"},{version:"2.3.0",date:"August 15, 2021"}]},{version:"2.2.0",date:"August 2, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.2.0",link:"https://v2.mantine.dev/changelog/2-2-0",patches:[{version:"2.2.3",date:"August 15, 2021"},{version:"2.2.2",date:"August 12, 2021"},{version:"2.2.1",date:"August 4, 2021"},{version:"2.2.0",date:"August 2, 2021"}]},{version:"2.1.0",date:"July 20, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.1.0",link:"https://v2.mantine.dev/changelog/2-1-0",patches:[{version:"2.1.5",date:"July 30, 2021"},{version:"2.1.4",date:"July 27, 2021"},{version:"2.1.3",date:"July 26, 2021"},{version:"2.1.2",date:"July 24, 2021"},{version:"2.1.1",date:"July 21, 2021"},{version:"2.1.0",date:"July 20, 2021"}]},{version:"2.0.0",date:"July 5, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.0.0",link:"https://v2.mantine.dev/changelog/2-0-0",patches:[{version:"2.0.7",date:"July 18, 2021"},{version:"2.0.6",date:"July 16, 2021"},{version:"2.0.5",date:"July 14, 2021"},{version:"2.0.4",date:"July 13, 2021"},{version:"2.0.3",date:"July 11, 2021"},{version:"2.0.2",date:"July 6, 2021"},{version:"2.0.0",date:"July 5, 2021"}]},{version:"1.3.0",date:"June 1, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/1.3.0",link:"https://v2.mantine.dev/changelog/1-3-0",patches:[{version:"1.3.1",date:"June 2, 2021"},{version:"1.3.0",date:"June 1, 2021"}]},{version:"1.1.0",date:"May 19, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/1.1.0",link:"https://v2.mantine.dev/changelog/1-1-0",patches:[{version:"1.1.1",date:"May 20, 2021"},{version:"1.1.0",date:"May 19, 2021"}]},{version:"1.0.0",date:"May 3, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/1.0.0",link:"https://v2.mantine.dev/changelog/1-0-0",patches:[{version:"1.0.6",date:"May 9, 2021"},{version:"1.0.5",date:"May 8, 2021"},{version:"1.0.4",date:"May 8, 2021"},{version:"1.0.3",date:"May 5, 2021"},{version:"1.0.2",date:"May 5, 2021"},{version:"1.0.0",date:"May 3, 2021"}]}];var m=a(1353),g=a.n(m);function c(){let e=h.map(e=>{var t;let a=e.patches.filter(e=>!e.version.endsWith("0")).map(e=>(0,n.jsx)("li",{children:(0,n.jsxs)("a",{href:"https://github.com/mantinedev/mantine/releases/tag/".concat(e.version),target:"_blank",className:g().patchLink,rel:"noreferrer",children:[(0,n.jsx)(s.E,{className:g().patchBadge,children:e.version})," –"," ",(0,n.jsx)("span",{className:g().patchLinkLabel,children:e.date})]})},e.version));return(0,n.jsxs)("div",{className:g().minorVersion,children:[(0,n.jsxs)(r.Z,{className:g().versionHeader,children:[(0,n.jsx)("a",{href:"1.0.0"!==e.version?e.link:e.github,className:g().minorVersionBadgeWrapper,target:"_blank",rel:"noreferrer",children:(0,n.jsx)(s.E,{className:g().minorVersionBadge,children:e.version})}),(0,n.jsxs)(r.Z,{gap:"xs",children:["1.0.0"!==e.version&&(0,n.jsx)(o.z,{variant:"default",component:"a",href:e.link,radius:"md",size:"xs",target:"_blank",leftSection:(0,n.jsx)(i,{size:14}),children:"Changelog"}),(0,n.jsx)(o.z,{component:"a",variant:"default",href:e.github,target:"_blank",radius:"md",size:"xs",className:g().githubControl,leftSection:(0,n.jsx)(d.E,{size:12}),children:"GitHub release"})]}),(0,n.jsx)(v.x,{className:g().minorVersionDate,children:e.date})]}),a.length>0?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(v.x,{mt:"1.5rem",fz:15,children:[(0,n.jsx)("b",{children:(t=e.version,"".concat(t.split(".").slice(0,2).join("."),".X"))})," patches:"]}),(0,n.jsx)("ul",{children:a})]}):(0,n.jsxs)(v.x,{mt:"1rem",fz:15,children:["Version ",e.version," does not have associated patch releases yet."]})]},e.version)});return(0,n.jsx)("div",{className:g().root,children:e})}},1353:function(e){e.exports={root:"VersionsList_root__NkvIm",minorVersion:"VersionsList_minorVersion___wjoQ",minorVersionBadgeWrapper:"VersionsList_minorVersionBadgeWrapper__vEYlh",minorVersionBadge:"VersionsList_minorVersionBadge__Y3CXf",minorVersionDate:"VersionsList_minorVersionDate__hWtXB",patchLink:"VersionsList_patchLink__VosIW",patchLinkLabel:"VersionsList_patchLinkLabel__6Hrrb",patchBadge:"VersionsList_patchBadge__sq3MK",versionHeader:"VersionsList_versionHeader__KpvGy"}}}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/styles/css-files-list-9ecd7291f1b99b4d.js b/_next/static/chunks/pages/styles/css-files-list-129b0bc3ed8d7f12.js similarity index 79% rename from _next/static/chunks/pages/styles/css-files-list-9ecd7291f1b99b4d.js rename to _next/static/chunks/pages/styles/css-files-list-129b0bc3ed8d7f12.js index 958ce27fcc..c202af5bd7 100644 --- a/_next/static/chunks/pages/styles/css-files-list-9ecd7291f1b99b4d.js +++ b/_next/static/chunks/pages/styles/css-files-list-129b0bc3ed8d7f12.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[26337],{3962:function(s,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/styles/css-files-list",function(){return n(91269)}])},91269:function(s,e,n){"use strict";n.r(e),n.d(e,{default:function(){return j}});var t=n(52322),o=n(45392),c=n(9705),r=n(51732),i=n(93010),l=n(45909),a=n(87385),d=n(54813),p=JSON.parse('{"q":["Accordion.css","ActionIcon.css","Affix.css","Alert.css","Anchor.css","AngleSlider.css","AppShell.css","AspectRatio.css","Avatar.css","BackgroundImage.css","Badge.css","Blockquote.css","Breadcrumbs.css","Burger.css","Card.css","Button.css","Center.css","Checkbox.css","CloseButton.css","Chip.css","Code.css","ColorInput.css","ColorPicker.css","ColorSwatch.css","Combobox.css","Container.css","Dialog.css","Divider.css","Fieldset.css","Drawer.css","FloatingIndicator.css","Flex.css","Group.css","Grid.css","Image.css","Indicator.css","InlineInput.css","Input.css","Loader.css","Kbd.css","List.css","LoadingOverlay.css","ModalBase.css","Mark.css","Menu.css","Modal.css","Notification.css","NavLink.css","NumberInput.css","Overlay.css","Paper.css","Pagination.css","PasswordInput.css","Popover.css","PinInput.css","PillsInput.css","Pill.css","Rating.css","Progress.css","Radio.css","RingProgress.css","SemiCircleProgress.css","ScrollArea.css","SegmentedControl.css","SimpleGrid.css","Spoiler.css","Slider.css","Skeleton.css","Stack.css","Tabs.css","Switch.css","Table.css","Stepper.css","Text.css","ThemeIcon.css","Timeline.css","Title.css","Tooltip.css","Tree.css","VisuallyHidden.css","TypographyStylesProvider.css","UnstyledButton.css","CheckboxCard.css","CheckboxIndicator.css","RadioIndicator.css","RadioCard.css"]}'),u=n(52905);function m(){let s=["global.css",...p.q].map(s=>[s.replace(".css",""),(0,t.jsxs)(i.Z,{children:[(0,t.jsx)(l.E,{style:{whiteSpace:"nowrap"},children:"import '@mantine/core/styles/".concat(s,"';")}),(0,t.jsx)(a.q,{value:"import '@mantine/core/styles/".concat(s,"';"),children:s=>{let{copy:e,copied:n}=s;return(0,t.jsx)(d.A,{variant:n?"filled":"default",color:n?"teal":void 0,onClick:e,size:"sm",children:n?(0,t.jsx)(c.Z,{size:12}):(0,t.jsx)(r.Z,{size:12})})}})]})]);return(0,t.jsx)(u.gw,{data:s,head:["Component","Import"]})}var h=n(25071),y=n(15019);let x=(0,h.A)(y.us.CSSFilesList);function f(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...s.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{id:"css-files-list",children:"CSS files list"}),"\n",(0,t.jsxs)(e.p,{children:["This page contains a list of CSS files that you can import from ",(0,t.jsx)(e.code,{children:"@mantine/core"})," package\nas a replacement for ",(0,t.jsx)(e.code,{children:"@mantine/core/styles.css"}),"."]}),"\n",(0,t.jsx)(e.h2,{id:"components-dependencies",children:"Components dependencies"}),"\n",(0,t.jsxs)(e.p,{children:["Some components require additional styles to work properly. For example, ",(0,t.jsx)(e.a,{href:"/core/button/",children:"Button"}),"\ncomponent is based on ",(0,t.jsx)(e.a,{href:"/core/unstyled-button/",children:"UnstyledButton"}),". If you want to use ",(0,t.jsx)(e.a,{href:"/core/button/",children:"Button"}),",\nyou need to import styles for ",(0,t.jsx)(e.code,{children:"UnstyledButton"})," as well."]}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"import '@mantine/core/styles/UnstyledButton.css';\nimport '@mantine/core/styles/Button.css';\n"})}),"\n",(0,t.jsxs)(e.p,{children:["Some components like ",(0,t.jsx)(e.a,{href:"/core/select/",children:"Select"})," do not have any styles on their own – they are built\non top of other components. To find out which components are used in a particular component, check\nthe component source code."]}),"\n",(0,t.jsx)(e.p,{children:"If you are not sure which components are used in a particular component, you can import\nall styles for components that are reused in other components:"}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"import '@mantine/core/styles/ScrollArea.css';\nimport '@mantine/core/styles/UnstyledButton.css';\nimport '@mantine/core/styles/VisuallyHidden.css';\nimport '@mantine/core/styles/Paper.css';\nimport '@mantine/core/styles/Popover.css';\nimport '@mantine/core/styles/CloseButton.css';\nimport '@mantine/core/styles/Group.css';\nimport '@mantine/core/styles/Loader.css';\nimport '@mantine/core/styles/Overlay.css';\nimport '@mantine/core/styles/ModalBase.css';\nimport '@mantine/core/styles/Input.css';\nimport '@mantine/core/styles/InlineInput.css';\nimport '@mantine/core/styles/Flex.css';\n"})}),"\n",(0,t.jsx)(e.h2,{id:"global-styles",children:"Global styles"}),"\n",(0,t.jsx)(e.p,{children:"All Mantine components depend on global styles, you need to import them before\nall other styles:"}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"import '@mantine/core/styles/global.css';\n"})}),"\n",(0,t.jsx)(e.h2,{id:"import-order",children:"Import order"}),"\n",(0,t.jsxs)(e.p,{children:["It is important to keep correct styles import order. For example, if you want to use\n",(0,t.jsx)(e.a,{href:"/core/button/",children:"Button"})," component, you need to import styles for\n",(0,t.jsx)(e.a,{href:"/core/unstyled-button/",children:"UnstyledButton"})," first and then import styles for ",(0,t.jsx)(e.a,{href:"/core/button/",children:"Button"}),"."]}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"// ✅ Correct order – Button styles will override UnstyledButton styles\nimport '@mantine/core/styles/UnstyledButton.css';\nimport '@mantine/core/styles/Button.css';\n"})}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"// ❌ Incorrect order – UnstyledButton styles will override Button styles\nimport '@mantine/core/styles/Button.css';\nimport '@mantine/core/styles/UnstyledButton.css';\n"})}),"\n",(0,t.jsx)(e.h2,{id:"files-list",children:"Files list"}),"\n",(0,t.jsx)(m,{})]})}function j(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,t.jsx)(x,{...s,children:(0,t.jsx)(f,{...s})})}},51732:function(s,e,n){"use strict";n.d(e,{Z:function(){return t}});var t=(0,n(73681).Z)("outline","copy","IconCopy",[["path",{d:"M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z",key:"svg-0"}],["path",{d:"M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1",key:"svg-1"}]])}},function(s){s.O(0,[61177,66748,11340,92888,49774,40179],function(){return s(s.s=3962)}),_N_E=s.O()}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[26337],{3962:function(s,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/styles/css-files-list",function(){return n(91269)}])},91269:function(s,e,n){"use strict";n.r(e),n.d(e,{default:function(){return j}});var t=n(52322),o=n(45392),c=n(9705),r=n(51732),i=n(93010),l=n(45909),a=n(87385),d=n(54813),p=JSON.parse('{"q":["ActionIcon.css","Accordion.css","Affix.css","Alert.css","AngleSlider.css","Anchor.css","AppShell.css","AspectRatio.css","Badge.css","Avatar.css","BackgroundImage.css","Blockquote.css","Button.css","Card.css","Burger.css","Breadcrumbs.css","Center.css","Chip.css","CloseButton.css","Checkbox.css","Code.css","ColorInput.css","ColorPicker.css","ColorSwatch.css","Container.css","Combobox.css","Dialog.css","Divider.css","Fieldset.css","Drawer.css","Flex.css","Grid.css","FloatingIndicator.css","Image.css","Group.css","InlineInput.css","Input.css","Indicator.css","Kbd.css","List.css","Loader.css","LoadingOverlay.css","Mark.css","Menu.css","Modal.css","ModalBase.css","NavLink.css","Notification.css","NumberInput.css","Overlay.css","Paper.css","PasswordInput.css","Pill.css","Pagination.css","Popover.css","PillsInput.css","PinInput.css","Progress.css","Radio.css","RingProgress.css","Rating.css","ScrollArea.css","SegmentedControl.css","SemiCircleProgress.css","SimpleGrid.css","Skeleton.css","Slider.css","Stack.css","Spoiler.css","Stepper.css","Switch.css","Table.css","Tabs.css","Text.css","ThemeIcon.css","Timeline.css","Title.css","Tooltip.css","Tree.css","TypographyStylesProvider.css","UnstyledButton.css","VisuallyHidden.css","CheckboxCard.css","CheckboxIndicator.css","RadioCard.css","RadioIndicator.css"]}'),u=n(52905);function m(){let s=["global.css",...p.q].map(s=>[s.replace(".css",""),(0,t.jsxs)(i.Z,{children:[(0,t.jsx)(l.E,{style:{whiteSpace:"nowrap"},children:"import '@mantine/core/styles/".concat(s,"';")}),(0,t.jsx)(a.q,{value:"import '@mantine/core/styles/".concat(s,"';"),children:s=>{let{copy:e,copied:n}=s;return(0,t.jsx)(d.A,{variant:n?"filled":"default",color:n?"teal":void 0,onClick:e,size:"sm",children:n?(0,t.jsx)(c.Z,{size:12}):(0,t.jsx)(r.Z,{size:12})})}})]})]);return(0,t.jsx)(u.gw,{data:s,head:["Component","Import"]})}var h=n(25071),y=n(15019);let x=(0,h.A)(y.us.CSSFilesList);function f(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...s.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{id:"css-files-list",children:"CSS files list"}),"\n",(0,t.jsxs)(e.p,{children:["This page contains a list of CSS files that you can import from ",(0,t.jsx)(e.code,{children:"@mantine/core"})," package\nas a replacement for ",(0,t.jsx)(e.code,{children:"@mantine/core/styles.css"}),"."]}),"\n",(0,t.jsx)(e.h2,{id:"components-dependencies",children:"Components dependencies"}),"\n",(0,t.jsxs)(e.p,{children:["Some components require additional styles to work properly. For example, ",(0,t.jsx)(e.a,{href:"/core/button/",children:"Button"}),"\ncomponent is based on ",(0,t.jsx)(e.a,{href:"/core/unstyled-button/",children:"UnstyledButton"}),". If you want to use ",(0,t.jsx)(e.a,{href:"/core/button/",children:"Button"}),",\nyou need to import styles for ",(0,t.jsx)(e.code,{children:"UnstyledButton"})," as well."]}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"import '@mantine/core/styles/UnstyledButton.css';\nimport '@mantine/core/styles/Button.css';\n"})}),"\n",(0,t.jsxs)(e.p,{children:["Some components like ",(0,t.jsx)(e.a,{href:"/core/select/",children:"Select"})," do not have any styles on their own – they are built\non top of other components. To find out which components are used in a particular component, check\nthe component source code."]}),"\n",(0,t.jsx)(e.p,{children:"If you are not sure which components are used in a particular component, you can import\nall styles for components that are reused in other components:"}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"import '@mantine/core/styles/ScrollArea.css';\nimport '@mantine/core/styles/UnstyledButton.css';\nimport '@mantine/core/styles/VisuallyHidden.css';\nimport '@mantine/core/styles/Paper.css';\nimport '@mantine/core/styles/Popover.css';\nimport '@mantine/core/styles/CloseButton.css';\nimport '@mantine/core/styles/Group.css';\nimport '@mantine/core/styles/Loader.css';\nimport '@mantine/core/styles/Overlay.css';\nimport '@mantine/core/styles/ModalBase.css';\nimport '@mantine/core/styles/Input.css';\nimport '@mantine/core/styles/InlineInput.css';\nimport '@mantine/core/styles/Flex.css';\n"})}),"\n",(0,t.jsx)(e.h2,{id:"global-styles",children:"Global styles"}),"\n",(0,t.jsx)(e.p,{children:"All Mantine components depend on global styles, you need to import them before\nall other styles:"}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"import '@mantine/core/styles/global.css';\n"})}),"\n",(0,t.jsx)(e.h2,{id:"import-order",children:"Import order"}),"\n",(0,t.jsxs)(e.p,{children:["It is important to keep correct styles import order. For example, if you want to use\n",(0,t.jsx)(e.a,{href:"/core/button/",children:"Button"})," component, you need to import styles for\n",(0,t.jsx)(e.a,{href:"/core/unstyled-button/",children:"UnstyledButton"})," first and then import styles for ",(0,t.jsx)(e.a,{href:"/core/button/",children:"Button"}),"."]}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"// ✅ Correct order – Button styles will override UnstyledButton styles\nimport '@mantine/core/styles/UnstyledButton.css';\nimport '@mantine/core/styles/Button.css';\n"})}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"// ❌ Incorrect order – UnstyledButton styles will override Button styles\nimport '@mantine/core/styles/Button.css';\nimport '@mantine/core/styles/UnstyledButton.css';\n"})}),"\n",(0,t.jsx)(e.h2,{id:"files-list",children:"Files list"}),"\n",(0,t.jsx)(m,{})]})}function j(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,t.jsx)(x,{...s,children:(0,t.jsx)(f,{...s})})}},51732:function(s,e,n){"use strict";n.d(e,{Z:function(){return t}});var t=(0,n(73681).Z)("outline","copy","IconCopy",[["path",{d:"M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z",key:"svg-0"}],["path",{d:"M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1",key:"svg-1"}]])}},function(s){s.O(0,[61177,66748,11340,92888,49774,40179],function(){return s(s.s=3962)}),_N_E=s.O()}]); \ No newline at end of file diff --git a/_next/static/WcLKBKEz7t8F6ChRk6Rqo/_buildManifest.js b/_next/static/vwrDpi4AJygXkv_2bQT5X/_buildManifest.js similarity index 99% rename from _next/static/WcLKBKEz7t8F6ChRk6Rqo/_buildManifest.js rename to _next/static/vwrDpi4AJygXkv_2bQT5X/_buildManifest.js index 6f13185208..7f89f7b7d5 100644 --- a/_next/static/WcLKBKEz7t8F6ChRk6Rqo/_buildManifest.js +++ b/_next/static/vwrDpi4AJygXkv_2bQT5X/_buildManifest.js @@ -1 +1 @@ -self.__BUILD_MANIFEST=function(s,e,c,t,a,o,r,i,h,u,n,d,k,p,g,l,f,b,j,m,y,v,x,w,z,_,q,I,B,F,A,D,E,L,M,N,S,T,U,C,P,G,H,J,K,O){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[m,y,v,x,w,D,"static/chunks/50864-8db2b23b348d3b18.js",s,a,i,h,p,f,z,_,E,L,"static/css/ae6de2a1a6f5a03d.css","static/chunks/pages/index-8242c8beeed19e67.js"],"/404":[e,s,c,t,"static/chunks/pages/404-801f418b703fdd8f.js"],"/_error":["static/chunks/pages/_error-95d51db2fb6a2e23.js"],"/about":[e,s,c,t,"static/css/7c164d03fceab98f.css","static/chunks/pages/about-c2303e16dc6d35ad.js"],"/app-shell":[f,"static/css/dc549a3d8b9a0209.css","static/chunks/pages/app-shell-37837ba329f8a33e.js"],"/changelog/7-0-0":[e,u,w,s,c,t,h,b,M,"static/chunks/pages/changelog/7-0-0-33bca1282f1b12aa.js"],"/changelog/7-1-0":[e,s,c,t,"static/chunks/pages/changelog/7-1-0-d106ff05f83d05a5.js"],"/changelog/7-10-0":[e,s,c,t,a,q,N,"static/chunks/pages/changelog/7-10-0-b9822f2a3b91951c.js"],"/changelog/7-11-0":[e,o,r,n,g,l,I,s,c,t,h,k,b,"static/chunks/pages/changelog/7-11-0-bdcccf5ffc7e7205.js"],"/changelog/7-12-0":[e,s,c,t,q,"static/chunks/pages/changelog/7-12-0-24aa1a8ed66cd2ac.js"],"/changelog/7-13-0":[e,o,r,d,g,l,s,c,t,k,"static/chunks/pages/changelog/7-13-0-43548a55396dc429.js"],"/changelog/7-14-0":[e,o,r,n,S,T,s,c,t,k,U,"static/chunks/pages/changelog/7-14-0-99815526c8b626d1.js"],"/changelog/7-2-0":[e,u,s,c,t,a,B,"static/chunks/pages/changelog/7-2-0-78503be85ea9ae6a.js"],"/changelog/7-3-0":[e,s,c,t,a,f,C,"static/chunks/pages/changelog/7-3-0-db4ce6200288b4f2.js"],"/changelog/7-4-0":[e,o,r,u,d,l,s,c,t,a,k,F,"static/chunks/pages/changelog/7-4-0-a9bb1706177e8b88.js"],"/changelog/7-5-0":[e,o,r,n,d,j,"static/chunks/90673-a5e0146a12332df1.js",s,c,t,i,p,P,"static/chunks/pages/changelog/7-5-0-368c4df2084043b0.js"],"/changelog/7-6-0":[m,y,v,e,o,r,n,d,j,x,I,"static/chunks/65712-a59f09c708d14841.js",s,c,t,h,k,b,z,"static/chunks/pages/changelog/7-6-0-c41dc3729fc4197b.js"],"/changelog/7-7-0":[e,o,r,d,g,"static/chunks/95995-2a4a45dd3b7c71dd.js",s,c,t,G,"static/chunks/pages/changelog/7-7-0-a3697cde6662bcc4.js"],"/changelog/7-8-0":[e,s,c,t,a,"static/chunks/pages/changelog/7-8-0-fc870783058673cc.js"],"/changelog/7-9-0":[e,o,r,s,c,t,k,"static/chunks/pages/changelog/7-9-0-af41631d58f6578e.js"],"/changelog/all-releases":[e,s,c,t,H,J,"static/chunks/pages/changelog/all-releases-ba9509eb98e67a8d.js"],"/changelog/previous-versions":[e,s,c,t,H,J,"static/chunks/pages/changelog/previous-versions-e4214f76d6356c6e.js"],"/charts/area-chart":[e,o,r,d,s,c,t,P,"static/chunks/pages/charts/area-chart-72d6bff31b0fc712.js"],"/charts/bar-chart":[e,o,r,s,c,t,k,U,"static/chunks/pages/charts/bar-chart-2d19ab9ecac3d7aa.js"],"/charts/bubble-chart":[e,o,r,g,s,c,t,"static/chunks/pages/charts/bubble-chart-a8998a348f13b41b.js"],"/charts/composite-chart":[e,o,r,d,g,l,s,c,t,"static/chunks/pages/charts/composite-chart-caba0a4c116186df.js"],"/charts/donut-chart":[e,o,n,j,s,c,t,"static/chunks/pages/charts/donut-chart-73eca2a92aa8f89c.js"],"/charts/funnel-chart":[e,o,S,s,c,t,"static/chunks/pages/charts/funnel-chart-1af1b8bdfec4739b.js"],"/charts/getting-started":[e,s,c,t,"static/chunks/pages/charts/getting-started-daff1f25fb834dec.js"],"/charts/line-chart":[e,o,r,l,s,c,t,"static/chunks/pages/charts/line-chart-da167fee413c016c.js"],"/charts/pie-chart":[e,o,n,j,s,c,t,"static/chunks/pages/charts/pie-chart-6d944693a5b032ef.js"],"/charts/radar-chart":[e,o,n,I,s,c,t,"static/chunks/pages/charts/radar-chart-f7487ff75865ca03.js"],"/charts/radial-bar-chart":[e,o,n,T,s,c,t,"static/chunks/pages/charts/radial-bar-chart-a92d70309f2cfc33.js"],"/charts/scatter-chart":[e,o,r,g,s,c,t,G,"static/chunks/pages/charts/scatter-chart-2c4bdd5ebd6e2da4.js"],"/charts/sparkline":[e,o,r,d,s,c,t,"static/chunks/pages/charts/sparkline-d83e0d55d32453df.js"],"/colors-generator":["static/chunks/73227-b0f14b8ed2c49bd4.js","static/css/05cf04530a1ea457.css","static/chunks/pages/colors-generator-1ae7bbcec2ab63d3.js"],"/combobox":[h,"static/css/f928343dfc69fe64.css","static/chunks/pages/combobox-c968ba75f218794f.js"],"/contribute":[e,s,c,t,"static/chunks/pages/contribute-b01610800bd6930f.js"],"/core/accordion":[e,s,c,t,L,"static/chunks/pages/core/accordion-d2357a1c6c236003.js"],"/core/action-icon":[e,s,c,t,"static/chunks/pages/core/action-icon-8c43e4e6b56d7607.js"],"/core/affix":[e,s,c,t,"static/chunks/pages/core/affix-1ab29d18a9458f96.js"],"/core/alert":[e,s,c,t,"static/chunks/pages/core/alert-c545c35a84a20a7d.js"],"/core/anchor":[e,s,c,t,"static/chunks/pages/core/anchor-f2b97baf241e94a1.js"],"/core/angle-slider":[e,s,c,t,"static/chunks/pages/core/angle-slider-c7b293c0c0503e3c.js"],"/core/app-shell":[e,s,c,t,"static/chunks/pages/core/app-shell-5fff14c1bbeaea14.js"],"/core/aspect-ratio":[e,s,c,t,"static/chunks/pages/core/aspect-ratio-81eef1f994456cf4.js"],"/core/autocomplete":[e,s,c,t,h,"static/chunks/pages/core/autocomplete-f45e7b58fcfcb7ce.js"],"/core/avatar":[e,s,c,t,"static/chunks/pages/core/avatar-86f337c5a35e6642.js"],"/core/background-image":[e,s,c,t,"static/chunks/pages/core/background-image-40889aae8aad6917.js"],"/core/badge":[e,s,c,t,"static/chunks/pages/core/badge-da24976fd57e5c78.js"],"/core/blockquote":[e,s,c,t,"static/chunks/pages/core/blockquote-3c34d3f0d9e47694.js"],"/core/box":[e,s,c,t,"static/chunks/pages/core/box-cc4612f4ab2ad236.js"],"/core/breadcrumbs":[e,s,c,t,"static/chunks/pages/core/breadcrumbs-7c76b51444175f4c.js"],"/core/burger":[e,s,c,t,"static/chunks/pages/core/burger-59c7ddad419c61d6.js"],"/core/button":[e,s,c,t,"static/chunks/pages/core/button-07cc712cc54e5720.js"],"/core/card":[e,s,c,t,"static/chunks/pages/core/card-c0dfba85c04f83fd.js"],"/core/center":[e,s,c,t,"static/chunks/pages/core/center-ec5cd73a9634b056.js"],"/core/checkbox":[e,s,c,t,"static/chunks/pages/core/checkbox-e304f0f26e5f7381.js"],"/core/chip":[e,s,c,t,"static/chunks/pages/core/chip-17c79bea04285f31.js"],"/core/close-button":[e,s,c,t,"static/chunks/pages/core/close-button-5d36fee32cea002c.js"],"/core/code":[e,s,c,t,"static/chunks/pages/core/code-f96ff96b5de1482d.js"],"/core/collapse":[e,s,c,t,"static/chunks/pages/core/collapse-bf74ce469b131320.js"],"/core/color-input":[e,s,c,t,"static/chunks/pages/core/color-input-34d4bb8ea2cb0d0f.js"],"/core/color-picker":[e,s,c,t,"static/chunks/pages/core/color-picker-a3e4316343c39179.js"],"/core/color-swatch":[e,s,c,t,"static/chunks/pages/core/color-swatch-b3c80ac6ff7bca08.js"],"/core/combobox":[e,s,c,t,h,"static/chunks/pages/core/combobox-f54373ef6b169648.js"],"/core/container":[e,s,c,t,"static/chunks/pages/core/container-3180514e655550a4.js"],"/core/copy-button":[e,s,c,t,"static/chunks/pages/core/copy-button-a5b10d37604011c0.js"],"/core/dialog":[e,s,c,t,"static/chunks/pages/core/dialog-0ee2ad0daa988ca8.js"],"/core/divider":[e,s,c,t,"static/chunks/pages/core/divider-3ae17ab9835b3fe2.js"],"/core/drawer":[e,s,c,t,a,f,C,"static/chunks/pages/core/drawer-ac32cbb0d83fa528.js"],"/core/fieldset":[e,s,c,t,"static/chunks/pages/core/fieldset-2927990a25b75381.js"],"/core/file-button":[e,s,c,t,"static/chunks/pages/core/file-button-de3f62b19a7a8e64.js"],"/core/file-input":[e,s,c,t,"static/chunks/pages/core/file-input-5d5a058032b7ad66.js"],"/core/flex":[e,s,c,t,"static/chunks/pages/core/flex-52f4cc394a8d9a6e.js"],"/core/floating-indicator":[e,s,c,t,"static/chunks/pages/core/floating-indicator-3fad57dfa117bf59.js"],"/core/focus-trap":[e,s,c,t,"static/chunks/pages/core/focus-trap-44a5c072b43bd219.js"],"/core/grid":[e,s,c,t,"static/chunks/pages/core/grid-6f5b1b0244e57ebd.js"],"/core/group":[e,s,c,t,"static/chunks/pages/core/group-6bc9884caa2fb84e.js"],"/core/highlight":[e,s,c,t,"static/chunks/pages/core/highlight-023a355f22761bc9.js"],"/core/hover-card":[e,s,c,t,"static/chunks/pages/core/hover-card-55ebeb53b37e7bec.js"],"/core/image":[e,s,c,t,"static/chunks/pages/core/image-5712fe9ab35fe431.js"],"/core/indicator":[e,s,c,t,"static/chunks/pages/core/indicator-550d4dfd66713f69.js"],"/core/input":[e,"static/chunks/41329-30dd406b3f5410e2.js",s,c,t,"static/chunks/pages/core/input-aca9997c7cc76ee0.js"],"/core/json-input":[e,s,c,t,"static/chunks/pages/core/json-input-31060c4f395e1bcd.js"],"/core/kbd":[e,s,c,t,"static/chunks/pages/core/kbd-248ccd62118ff161.js"],"/core/list":[e,s,c,t,"static/chunks/pages/core/list-9f54dc768f7e2ece.js"],"/core/loader":[e,s,c,t,a,B,"static/chunks/pages/core/loader-236210afd91a5321.js"],"/core/loading-overlay":[e,s,c,t,a,B,"static/chunks/pages/core/loading-overlay-b6520ce2ffc292f5.js"],"/core/mark":[e,s,c,t,"static/chunks/pages/core/mark-e32ff4aaeaa9a58d.js"],"/core/menu":[e,s,c,t,"static/chunks/pages/core/menu-b9b2c0a019f1bb9e.js"],"/core/modal":[e,s,c,t,a,K,"static/chunks/pages/core/modal-87193cd803ed7b97.js"],"/core/multi-select":[e,s,c,t,h,E,"static/chunks/pages/core/multi-select-de417aa3d59a2c0d.js"],"/core/native-select":[e,s,c,t,"static/chunks/pages/core/native-select-39cc01eb3e99fb4e.js"],"/core/nav-link":[e,s,c,t,"static/chunks/pages/core/nav-link-a8e30dd223bda465.js"],"/core/notification":[e,s,c,t,"static/chunks/pages/core/notification-5d3a882d78f7c49e.js"],"/core/number-formatter":[e,u,s,c,t,"static/chunks/pages/core/number-formatter-b9bfce4030a60b95.js"],"/core/number-input":[e,u,s,c,t,"static/chunks/pages/core/number-input-5d025bcea57b7257.js"],"/core/overlay":[e,s,c,t,"static/chunks/pages/core/overlay-c10c8183933e27b6.js"],"/core/pagination":[e,s,c,t,_,"static/chunks/pages/core/pagination-364fa94e7ced3fb6.js"],"/core/paper":[e,s,c,t,"static/chunks/pages/core/paper-d6d7e481657db4fc.js"],"/core/password-input":[e,s,c,t,"static/chunks/pages/core/password-input-6162082f0d96ae0c.js"],"/core/pill":[e,s,c,t,"static/chunks/pages/core/pill-2097c74c603a8991.js"],"/core/pills-input":[e,s,c,t,h,"static/chunks/pages/core/pills-input-ed810da8948952e5.js"],"/core/pin-input":[e,s,c,t,"static/chunks/pages/core/pin-input-fa6b08e862999535.js"],"/core/popover":[e,s,c,t,i,h,p,"static/chunks/pages/core/popover-2b42018c0f09d9db.js"],"/core/portal":[e,s,c,t,"static/chunks/pages/core/portal-1363dd519609aebe.js"],"/core/progress":[e,s,c,t,"static/chunks/pages/core/progress-368b33421f67f1a4.js"],"/core/radio":[e,s,c,t,N,"static/chunks/pages/core/radio-e445ffc09012534f.js"],"/core/rating":[e,s,c,t,"static/chunks/pages/core/rating-eab9e1b99a33fdca.js"],"/core/ring-progress":[e,s,c,t,"static/chunks/pages/core/ring-progress-24d085167967dccc.js"],"/core/scroll-area":[e,s,c,t,"static/chunks/pages/core/scroll-area-2df61ddda7d87d54.js"],"/core/segmented-control":[e,s,c,t,"static/chunks/pages/core/segmented-control-3768acd6baa301f1.js"],"/core/select":[e,s,c,t,h,"static/chunks/pages/core/select-4343cf58d42090e5.js"],"/core/semi-circle-progress":[e,s,c,t,"static/chunks/pages/core/semi-circle-progress-c56a865eda73afa8.js"],"/core/simple-grid":[e,s,c,t,"static/chunks/pages/core/simple-grid-1198dc1ebd4b1ed1.js"],"/core/skeleton":[e,s,c,t,"static/chunks/pages/core/skeleton-76487ba047b11b16.js"],"/core/slider":[e,s,c,t,"static/chunks/pages/core/slider-53fc46a485ad05ac.js"],"/core/space":[e,s,c,t,"static/chunks/pages/core/space-350955f817db0e9e.js"],"/core/spoiler":[e,s,c,t,"static/chunks/pages/core/spoiler-3d8204bbdffc37e3.js"],"/core/stack":[e,s,c,t,"static/chunks/pages/core/stack-e39b9605b73e6334.js"],"/core/stepper":[e,s,c,t,"static/chunks/pages/core/stepper-00a045ace2734751.js"],"/core/switch":[e,s,c,t,"static/chunks/pages/core/switch-09c4d48e4d261ed9.js"],"/core/table":[e,s,c,t,"static/chunks/pages/core/table-7e6090ae919dc8c0.js"],"/core/tabs":[e,s,c,t,"static/chunks/pages/core/tabs-79b1f0850b5591cc.js"],"/core/tags-input":[e,s,c,t,h,b,"static/chunks/pages/core/tags-input-3e8c2f565383a4d3.js"],"/core/text":[e,s,c,t,"static/chunks/pages/core/text-a89d2abfca4ac9eb.js"],"/core/text-input":[e,s,c,t,"static/chunks/pages/core/text-input-2470b0f90f1b4a4c.js"],"/core/textarea":[e,s,c,t,"static/chunks/pages/core/textarea-3368d19102324c5d.js"],"/core/theme-icon":[e,s,c,t,"static/chunks/pages/core/theme-icon-1820dd1495efd15f.js"],"/core/timeline":[e,s,c,t,"static/chunks/pages/core/timeline-14aa39c89d096a71.js"],"/core/title":[e,s,c,t,"static/chunks/pages/core/title-ee755ea11837e030.js"],"/core/tooltip":[e,s,c,t,"static/chunks/pages/core/tooltip-1bc5e1dcf932773c.js"],"/core/transition":[e,s,c,t,"static/chunks/pages/core/transition-f4627d2aae83664c.js"],"/core/tree":[e,s,c,t,q,"static/chunks/pages/core/tree-0fde4c1781c97035.js"],"/core/typography-styles-provider":[e,s,c,t,"static/chunks/pages/core/typography-styles-provider-85a3aaa109485004.js"],"/core/unstyled-button":[e,s,c,t,"static/chunks/pages/core/unstyled-button-74f2c84f98b28047.js"],"/core/visually-hidden":[e,s,c,t,"static/chunks/pages/core/visually-hidden-ffe148fc33cb6140.js"],"/dates/calendar":[e,s,c,t,i,"static/chunks/pages/dates/calendar-5bf6c0666d478efc.js"],"/dates/date-input":[e,s,c,t,i,"static/chunks/pages/dates/date-input-0f3a64be0a9edcf7.js"],"/dates/date-picker":[e,s,c,t,i,A,"static/chunks/pages/dates/date-picker-ce01bb6a04eebdf6.js"],"/dates/date-picker-input":[e,s,c,t,i,p,"static/chunks/pages/dates/date-picker-input-52ad5e4044fd626e.js"],"/dates/date-time-picker":[e,s,c,t,i,"static/chunks/pages/dates/date-time-picker-fa8eb6e20452c609.js"],"/dates/dates-provider":[e,s,c,t,i,p,"static/chunks/pages/dates/dates-provider-6ca695eb3f3f0eda.js"],"/dates/getting-started":[e,s,c,t,i,p,"static/chunks/pages/dates/getting-started-298dee6eb0cbe39b.js"],"/dates/month-picker":[e,s,c,t,i,A,"static/chunks/pages/dates/month-picker-416aed0a699fe8d7.js"],"/dates/month-picker-input":[e,s,c,t,i,"static/chunks/pages/dates/month-picker-input-82cc73da75c93fd3.js"],"/dates/time-input":[e,s,c,t,"static/chunks/pages/dates/time-input-b51d95537f01a966.js"],"/dates/year-picker":[e,s,c,t,i,A,"static/chunks/pages/dates/year-picker-ca359eb1d8ab6c4b.js"],"/dates/year-picker-input":[e,s,c,t,i,"static/chunks/pages/dates/year-picker-input-0affaf9622e81b34.js"],"/form/actions":[e,s,c,t,"static/chunks/pages/form/actions-8b2e861bb00853eb.js"],"/form/create-form-context":[e,s,c,t,"static/chunks/pages/form/create-form-context-7140909fbc3f9831.js"],"/form/errors":[e,s,c,t,"static/chunks/pages/form/errors-746f76565d294cec.js"],"/form/get-input-props":[e,u,s,c,t,a,F,"static/chunks/pages/form/get-input-props-e60ca32a1285444b.js"],"/form/nested":[e,s,c,t,a,"static/chunks/pages/form/nested-9bbeb03bada2e3dd.js"],"/form/recipes":["static/chunks/e1533f8b-7153877f366db892.js",e,"static/chunks/8511-fa797d70bcfd6e85.js",s,c,t,a,"static/chunks/pages/form/recipes-adb6d892568b2e66.js"],"/form/schema-validation":[e,s,c,t,"static/chunks/pages/form/schema-validation-3b344e31ca7b87c4.js"],"/form/status":[e,s,c,t,a,"static/chunks/pages/form/status-ad3fa31fc4ac5005.js"],"/form/uncontrolled":[e,s,c,t,a,"static/chunks/pages/form/uncontrolled-e9e943328e07bf11.js"],"/form/use-field":[e,s,c,t,"static/chunks/pages/form/use-field-5ff3c777d28d15ee.js"],"/form/use-form":[e,s,c,t,a,"static/chunks/pages/form/use-form-95b7650dff08dddd.js"],"/form/validation":[e,u,s,c,t,a,"static/chunks/pages/form/validation-290145268cea29ad.js"],"/form/validators":[e,u,s,c,t,a,"static/chunks/pages/form/validators-31fa9c737bac2a52.js"],"/form/values":[e,u,s,c,t,a,F,"static/chunks/pages/form/values-23aecd0c3a6cbff4.js"],"/getting-started":[e,s,c,t,"static/css/0ab03061551e1328.css","static/chunks/pages/getting-started-547eb75b6b303c17.js"],"/guides/6x-to-7x":[e,s,c,t,"static/chunks/pages/guides/6x-to-7x-d00e21fdad68cae9.js"],"/guides/functions-reference":[e,s,c,t,"static/chunks/pages/guides/functions-reference-a01ff09834e7a430.js"],"/guides/gatsby":[e,s,c,t,"static/chunks/pages/guides/gatsby-bcf5bdd3f6fcecb3.js"],"/guides/icons":[e,s,c,t,"static/chunks/pages/guides/icons-11f4e715f4433df8.js"],"/guides/javascript":[e,s,c,t,"static/chunks/pages/guides/javascript-439389dc78da3ace.js"],"/guides/jest":[e,s,c,t,"static/chunks/pages/guides/jest-18e1e6e6b5fbb25d.js"],"/guides/next":[e,s,c,t,"static/chunks/pages/guides/next-8f6faa0f438214b2.js"],"/guides/polymorphic":[e,s,c,t,"static/chunks/pages/guides/polymorphic-09adc4fd0e06180b.js"],"/guides/redwood":[e,s,c,t,"static/chunks/pages/guides/redwood-e67f05edc9e4bcc4.js"],"/guides/remix":[e,s,c,t,"static/chunks/pages/guides/remix-d99651d38754d963.js"],"/guides/storybook":[e,s,c,t,"static/chunks/pages/guides/storybook-c9ed984535571945.js"],"/guides/typescript":[e,s,c,t,"static/chunks/pages/guides/typescript-81ef866e51f9fcb6.js"],"/guides/vite":[e,s,c,t,"static/chunks/pages/guides/vite-5f3ff15cc405bf27.js"],"/guides/vitest":[e,s,c,t,"static/chunks/pages/guides/vitest-e99ff163fad05f17.js"],"/hooks/use-click-outside":[e,s,c,t,"static/chunks/pages/hooks/use-click-outside-2f5646e1d0b60e30.js"],"/hooks/use-clipboard":[e,s,c,t,"static/chunks/pages/hooks/use-clipboard-4aeabb10d4e8e146.js"],"/hooks/use-color-scheme":[e,s,c,t,"static/chunks/pages/hooks/use-color-scheme-6b90c7aad43e3c57.js"],"/hooks/use-counter":[e,s,c,t,"static/chunks/pages/hooks/use-counter-4b9fc8dd8f135f88.js"],"/hooks/use-debounced-callback":[e,s,c,t,"static/chunks/pages/hooks/use-debounced-callback-4ac3871f0a5653a5.js"],"/hooks/use-debounced-state":[e,s,c,t,"static/chunks/pages/hooks/use-debounced-state-38887c94e3ddeb11.js"],"/hooks/use-debounced-value":[e,s,c,t,"static/chunks/pages/hooks/use-debounced-value-46578fb2028d657c.js"],"/hooks/use-did-update":[e,s,c,t,"static/chunks/pages/hooks/use-did-update-94312ecc04744c93.js"],"/hooks/use-disclosure":[e,s,c,t,"static/chunks/pages/hooks/use-disclosure-b9404e4de1440386.js"],"/hooks/use-document-title":[e,s,c,t,"static/chunks/pages/hooks/use-document-title-4c8bf8dcb3b8aeac.js"],"/hooks/use-document-visibility":[e,s,c,t,"static/chunks/pages/hooks/use-document-visibility-3c75dbb7778367d3.js"],"/hooks/use-element-size":[e,s,c,t,"static/chunks/pages/hooks/use-element-size-13d9a4d76a44fbd3.js"],"/hooks/use-event-listener":[e,s,c,t,"static/chunks/pages/hooks/use-event-listener-19a810ee7a311677.js"],"/hooks/use-eye-dropper":[e,s,c,t,"static/chunks/pages/hooks/use-eye-dropper-debe1655edf687d3.js"],"/hooks/use-favicon":[e,s,c,t,"static/chunks/pages/hooks/use-favicon-c3f20febea4e32a8.js"],"/hooks/use-fetch":[e,s,c,t,"static/chunks/pages/hooks/use-fetch-9692f9ecafba9998.js"],"/hooks/use-focus-return":[e,s,c,t,a,K,"static/chunks/pages/hooks/use-focus-return-aa8a2fb306744b81.js"],"/hooks/use-focus-trap":[e,s,c,t,"static/chunks/pages/hooks/use-focus-trap-eeef8e033d4c04cd.js"],"/hooks/use-focus-within":[e,s,c,t,"static/chunks/pages/hooks/use-focus-within-3979b0940d05c9d1.js"],"/hooks/use-force-update":[e,s,c,t,"static/chunks/pages/hooks/use-force-update-ef3c48e3ede39310.js"],"/hooks/use-fullscreen":[e,s,c,t,"static/chunks/pages/hooks/use-fullscreen-88e6525c7a84cf9e.js"],"/hooks/use-hash":[e,s,c,t,"static/chunks/pages/hooks/use-hash-21e52ed7fc0ffcaa.js"],"/hooks/use-headroom":[e,s,c,t,"static/chunks/pages/hooks/use-headroom-e672cc7034c43a7a.js"],"/hooks/use-hotkeys":[e,s,c,t,"static/chunks/pages/hooks/use-hotkeys-98142066e0baa92e.js"],"/hooks/use-hover":[e,s,c,t,"static/chunks/pages/hooks/use-hover-c990c8d3b18cfb32.js"],"/hooks/use-id":[e,s,c,t,"static/chunks/pages/hooks/use-id-d078042d1940aa5f.js"],"/hooks/use-idle":[e,s,c,t,"static/chunks/pages/hooks/use-idle-440ae33549849135.js"],"/hooks/use-in-viewport":[e,s,c,t,"static/chunks/pages/hooks/use-in-viewport-25983a6eba236d52.js"],"/hooks/use-input-state":[e,s,c,t,"static/chunks/pages/hooks/use-input-state-2e9c004ac9c7bdd2.js"],"/hooks/use-intersection":[e,s,c,t,"static/chunks/pages/hooks/use-intersection-3a0cb1cf5f673d04.js"],"/hooks/use-interval":[e,s,c,t,"static/chunks/pages/hooks/use-interval-c744f849bfc913db.js"],"/hooks/use-is-first-render":[e,s,c,t,"static/chunks/pages/hooks/use-is-first-render-d9886a0ee2aead07.js"],"/hooks/use-isomorphic-effect":[e,s,c,t,"static/chunks/pages/hooks/use-isomorphic-effect-b40df0620cdd1f36.js"],"/hooks/use-list-state":[e,s,c,t,"static/chunks/pages/hooks/use-list-state-c3ddb1bb583f9a84.js"],"/hooks/use-local-storage":[e,s,c,t,"static/chunks/pages/hooks/use-local-storage-70e3ae4d7633d198.js"],"/hooks/use-logger":[e,s,c,t,"static/chunks/pages/hooks/use-logger-1212db923be64687.js"],"/hooks/use-map":[e,s,c,t,"static/chunks/pages/hooks/use-map-4f2e7cf4eb2faed2.js"],"/hooks/use-media-query":[e,s,c,t,"static/chunks/pages/hooks/use-media-query-2f7473d413c1fd3f.js"],"/hooks/use-merged-ref":[e,s,c,t,"static/chunks/pages/hooks/use-merged-ref-e27af8970a7de905.js"],"/hooks/use-mounted":[e,s,c,t,"static/chunks/pages/hooks/use-mounted-cd564ce782436e25.js"],"/hooks/use-mouse":[e,s,c,t,"static/chunks/pages/hooks/use-mouse-206ef53a6dfb0118.js"],"/hooks/use-move":[e,s,c,t,"static/chunks/pages/hooks/use-move-5e2b1f2fd34dd909.js"],"/hooks/use-mutation-observer":[e,s,c,t,"static/chunks/pages/hooks/use-mutation-observer-9ef3a64eb008ede8.js"],"/hooks/use-network":[e,s,c,t,"static/chunks/pages/hooks/use-network-dbdd07bcbb8bd888.js"],"/hooks/use-orientation":[e,s,c,t,"static/chunks/pages/hooks/use-orientation-96bd965065016026.js"],"/hooks/use-os":[e,s,c,t,"static/chunks/pages/hooks/use-os-46e82c190858013f.js"],"/hooks/use-page-leave":[e,s,c,t,"static/chunks/pages/hooks/use-page-leave-903940657c24a842.js"],"/hooks/use-pagination":[e,s,c,t,_,"static/chunks/pages/hooks/use-pagination-2a2954905c114f2b.js"],"/hooks/use-previous":[e,s,c,t,"static/chunks/pages/hooks/use-previous-5aaf31cdff99911a.js"],"/hooks/use-queue":[e,s,c,t,"static/chunks/pages/hooks/use-queue-2f6910e7d053cc5c.js"],"/hooks/use-reduced-motion":[e,s,c,t,"static/chunks/pages/hooks/use-reduced-motion-973ab4f99fec647a.js"],"/hooks/use-resize-observer":[e,s,c,t,"static/chunks/pages/hooks/use-resize-observer-6e271a63ca2a113e.js"],"/hooks/use-scroll-into-view":[e,s,c,t,"static/chunks/pages/hooks/use-scroll-into-view-be578346c8e7e9a5.js"],"/hooks/use-set":[e,s,c,t,"static/chunks/pages/hooks/use-set-1e98e97dc0bfdd5f.js"],"/hooks/use-set-state":[e,s,c,t,"static/chunks/pages/hooks/use-set-state-844b29242247d46e.js"],"/hooks/use-shallow-effect":[e,s,c,t,"static/chunks/pages/hooks/use-shallow-effect-b7c8581b17f6e7bc.js"],"/hooks/use-state-history":[e,s,c,t,"static/chunks/pages/hooks/use-state-history-d0010c3285a143f8.js"],"/hooks/use-text-selection":[e,s,c,t,"static/chunks/pages/hooks/use-text-selection-2890b601fc9af1c3.js"],"/hooks/use-throttled-callback":[e,s,c,t,"static/chunks/pages/hooks/use-throttled-callback-90e550759ee81736.js"],"/hooks/use-throttled-state":[e,s,c,t,"static/chunks/pages/hooks/use-throttled-state-d7e0dd2415defd7d.js"],"/hooks/use-throttled-value":[e,s,c,t,"static/chunks/pages/hooks/use-throttled-value-e280da5fdae32fad.js"],"/hooks/use-timeout":[e,s,c,t,"static/chunks/pages/hooks/use-timeout-d179d6ed11962a03.js"],"/hooks/use-toggle":[e,s,c,t,"static/chunks/pages/hooks/use-toggle-af63a725fa876b7e.js"],"/hooks/use-uncontrolled":[e,s,c,t,"static/chunks/pages/hooks/use-uncontrolled-215db08718cfdc4d.js"],"/hooks/use-validated-state":[e,s,c,t,"static/chunks/pages/hooks/use-validated-state-229172c19f6b706b.js"],"/hooks/use-viewport-size":[e,s,c,t,"static/chunks/pages/hooks/use-viewport-size-138c068215ac87c8.js"],"/hooks/use-window-event":[e,s,c,t,"static/chunks/pages/hooks/use-window-event-c681e1e1ddea839e.js"],"/hooks/use-window-scroll":[e,s,c,t,"static/chunks/pages/hooks/use-window-scroll-a554de6ba44c2595.js"],"/others/carousel":["static/chunks/pages/others/carousel-eb74f9b7c9ae1531.js"],"/others/code-highlight":["static/chunks/pages/others/code-highlight-6d174f46988db106.js"],"/others/dropzone":["static/chunks/pages/others/dropzone-631ae8ff0c176f3e.js"],"/others/modals":["static/chunks/pages/others/modals-cc2d05791f79a270.js"],"/others/notifications":["static/chunks/pages/others/notifications-7bfa61e17429abde.js"],"/others/nprogress":["static/chunks/pages/others/nprogress-f3da9995b1d8cf29.js"],"/others/spotlight":["static/chunks/pages/others/spotlight-4f6db25aff3c961c.js"],"/others/tiptap":["static/chunks/pages/others/tiptap-d577a4e2f1df177d.js"],"/overview":[e,s,c,t,O,"static/chunks/pages/overview-4970e35bf3409374.js"],"/styles/color-functions":[e,s,c,t,"static/chunks/pages/styles/color-functions-8ca4a8159b3ef5e5.js"],"/styles/css-files-list":[e,s,c,t,"static/chunks/pages/styles/css-files-list-9ecd7291f1b99b4d.js"],"/styles/css-modules":[e,s,c,t,"static/chunks/pages/styles/css-modules-c6539d6827e76caa.js"],"/styles/css-variables":[e,s,c,t,"static/css/b49f69e19f867ec9.css","static/chunks/pages/styles/css-variables-ababb513e3203375.js"],"/styles/css-variables-list":[e,s,c,t,"static/chunks/pages/styles/css-variables-list-cf1e22365d8da0f6.js"],"/styles/data-attributes":[e,s,c,t,"static/chunks/pages/styles/data-attributes-02d6ba7135d02dd0.js"],"/styles/emotion":[e,s,c,t,"static/chunks/pages/styles/emotion-5ab6cdf58fbcaf97.js"],"/styles/global-styles":[e,s,c,t,"static/chunks/pages/styles/global-styles-3be5f2e9382bfd6e.js"],"/styles/mantine-styles":[e,s,c,t,"static/chunks/pages/styles/mantine-styles-06ee7a43d54014d1.js"],"/styles/postcss-preset":[e,s,c,t,"static/chunks/pages/styles/postcss-preset-871afb371e7f8201.js"],"/styles/rem":[e,s,c,t,"static/chunks/pages/styles/rem-0fbcd61032045fbb.js"],"/styles/responsive":[e,s,c,t,"static/chunks/pages/styles/responsive-654ac2141ba7fe55.js"],"/styles/rtl":[e,s,c,t,"static/chunks/pages/styles/rtl-2a91ab9450218ce9.js"],"/styles/sass":[e,s,c,t,"static/chunks/pages/styles/sass-9a7dd793c3a36394.js"],"/styles/style":[e,s,c,t,"static/chunks/pages/styles/style-728ce369dd1d6547.js"],"/styles/style-props":[e,s,c,t,"static/chunks/pages/styles/style-props-65f82e227eb1f01b.js"],"/styles/styles-api":[e,s,c,t,"static/chunks/pages/styles/styles-api-6c0d5ed6a360b961.js"],"/styles/styles-overview":[e,s,c,t,"static/chunks/pages/styles/styles-overview-41246265d929784d.js"],"/styles/styles-performance":[e,s,c,t,"static/chunks/pages/styles/styles-performance-fa284ede9d4ae939.js"],"/styles/unstyled":[e,s,c,t,"static/chunks/pages/styles/unstyled-0b91fed15b251603.js"],"/styles/vanilla-extract":[e,s,c,t,"static/chunks/pages/styles/vanilla-extract-fa3014db9a4a360e.js"],"/styles/variants-sizes":[e,s,c,t,"static/chunks/pages/styles/variants-sizes-d4335752a799e630.js"],"/submit-template":[e,s,c,t,"static/chunks/pages/submit-template-64cc2ec4e71fe555.js"],"/templates-usage":[e,s,c,t,"static/chunks/pages/templates-usage-f3f22fc613280a19.js"],"/theming/color-schemes":[e,s,c,t,"static/chunks/pages/theming/color-schemes-494c32e4e8d26396.js"],"/theming/colors":[e,s,c,t,O,"static/chunks/pages/theming/colors-2fb8e91668e1c317.js"],"/theming/default-props":[e,s,c,t,"static/chunks/pages/theming/default-props-73d59eae3c4e98b0.js"],"/theming/default-theme":[e,s,c,t,"static/chunks/pages/theming/default-theme-790479def9a93f59.js"],"/theming/mantine-provider":[e,s,c,t,"static/chunks/pages/theming/mantine-provider-5a28ccf9d311354f.js"],"/theming/theme-object":[e,s,c,t,"static/chunks/pages/theming/theme-object-f7ab103599fd385f.js"],"/theming/typography":[e,s,c,t,"static/chunks/pages/theming/typography-9d5bf55922571f56.js"],"/x/carousel":[e,w,s,c,t,M,"static/chunks/pages/x/carousel-016be074e0dbbae5.js"],"/x/code-highlight":[e,s,c,t,"static/chunks/pages/x/code-highlight-eaa83ee9fbedb3ad.js"],"/x/dropzone":[e,"static/chunks/40798-5a9d8f9feaa93443.js",s,c,t,"static/chunks/pages/x/dropzone-a2c189f1233b3fca.js"],"/x/modals":[e,s,c,t,"static/chunks/pages/x/modals-d3d227b42eab2342.js"],"/x/notifications":[e,s,c,t,"static/chunks/pages/x/notifications-f997be645fa3e8ec.js"],"/x/nprogress":[e,s,c,t,"static/chunks/pages/x/nprogress-134b5b955ca456e8.js"],"/x/spotlight":[e,s,c,t,"static/chunks/pages/x/spotlight-da45e07aaab1c199.js"],"/x/tiptap":[m,y,v,e,x,D,"static/chunks/12794-ec6db165506141f9.js",s,c,t,z,"static/chunks/pages/x/tiptap-22c54eeba08126fc.js"],sortedPages:["/","/404","/_app","/_error","/about","/app-shell","/changelog/7-0-0","/changelog/7-1-0","/changelog/7-10-0","/changelog/7-11-0","/changelog/7-12-0","/changelog/7-13-0","/changelog/7-14-0","/changelog/7-2-0","/changelog/7-3-0","/changelog/7-4-0","/changelog/7-5-0","/changelog/7-6-0","/changelog/7-7-0","/changelog/7-8-0","/changelog/7-9-0","/changelog/all-releases","/changelog/previous-versions","/charts/area-chart","/charts/bar-chart","/charts/bubble-chart","/charts/composite-chart","/charts/donut-chart","/charts/funnel-chart","/charts/getting-started","/charts/line-chart","/charts/pie-chart","/charts/radar-chart","/charts/radial-bar-chart","/charts/scatter-chart","/charts/sparkline","/colors-generator","/combobox","/contribute","/core/accordion","/core/action-icon","/core/affix","/core/alert","/core/anchor","/core/angle-slider","/core/app-shell","/core/aspect-ratio","/core/autocomplete","/core/avatar","/core/background-image","/core/badge","/core/blockquote","/core/box","/core/breadcrumbs","/core/burger","/core/button","/core/card","/core/center","/core/checkbox","/core/chip","/core/close-button","/core/code","/core/collapse","/core/color-input","/core/color-picker","/core/color-swatch","/core/combobox","/core/container","/core/copy-button","/core/dialog","/core/divider","/core/drawer","/core/fieldset","/core/file-button","/core/file-input","/core/flex","/core/floating-indicator","/core/focus-trap","/core/grid","/core/group","/core/highlight","/core/hover-card","/core/image","/core/indicator","/core/input","/core/json-input","/core/kbd","/core/list","/core/loader","/core/loading-overlay","/core/mark","/core/menu","/core/modal","/core/multi-select","/core/native-select","/core/nav-link","/core/notification","/core/number-formatter","/core/number-input","/core/overlay","/core/pagination","/core/paper","/core/password-input","/core/pill","/core/pills-input","/core/pin-input","/core/popover","/core/portal","/core/progress","/core/radio","/core/rating","/core/ring-progress","/core/scroll-area","/core/segmented-control","/core/select","/core/semi-circle-progress","/core/simple-grid","/core/skeleton","/core/slider","/core/space","/core/spoiler","/core/stack","/core/stepper","/core/switch","/core/table","/core/tabs","/core/tags-input","/core/text","/core/text-input","/core/textarea","/core/theme-icon","/core/timeline","/core/title","/core/tooltip","/core/transition","/core/tree","/core/typography-styles-provider","/core/unstyled-button","/core/visually-hidden","/dates/calendar","/dates/date-input","/dates/date-picker","/dates/date-picker-input","/dates/date-time-picker","/dates/dates-provider","/dates/getting-started","/dates/month-picker","/dates/month-picker-input","/dates/time-input","/dates/year-picker","/dates/year-picker-input","/form/actions","/form/create-form-context","/form/errors","/form/get-input-props","/form/nested","/form/recipes","/form/schema-validation","/form/status","/form/uncontrolled","/form/use-field","/form/use-form","/form/validation","/form/validators","/form/values","/getting-started","/guides/6x-to-7x","/guides/functions-reference","/guides/gatsby","/guides/icons","/guides/javascript","/guides/jest","/guides/next","/guides/polymorphic","/guides/redwood","/guides/remix","/guides/storybook","/guides/typescript","/guides/vite","/guides/vitest","/hooks/use-click-outside","/hooks/use-clipboard","/hooks/use-color-scheme","/hooks/use-counter","/hooks/use-debounced-callback","/hooks/use-debounced-state","/hooks/use-debounced-value","/hooks/use-did-update","/hooks/use-disclosure","/hooks/use-document-title","/hooks/use-document-visibility","/hooks/use-element-size","/hooks/use-event-listener","/hooks/use-eye-dropper","/hooks/use-favicon","/hooks/use-fetch","/hooks/use-focus-return","/hooks/use-focus-trap","/hooks/use-focus-within","/hooks/use-force-update","/hooks/use-fullscreen","/hooks/use-hash","/hooks/use-headroom","/hooks/use-hotkeys","/hooks/use-hover","/hooks/use-id","/hooks/use-idle","/hooks/use-in-viewport","/hooks/use-input-state","/hooks/use-intersection","/hooks/use-interval","/hooks/use-is-first-render","/hooks/use-isomorphic-effect","/hooks/use-list-state","/hooks/use-local-storage","/hooks/use-logger","/hooks/use-map","/hooks/use-media-query","/hooks/use-merged-ref","/hooks/use-mounted","/hooks/use-mouse","/hooks/use-move","/hooks/use-mutation-observer","/hooks/use-network","/hooks/use-orientation","/hooks/use-os","/hooks/use-page-leave","/hooks/use-pagination","/hooks/use-previous","/hooks/use-queue","/hooks/use-reduced-motion","/hooks/use-resize-observer","/hooks/use-scroll-into-view","/hooks/use-set","/hooks/use-set-state","/hooks/use-shallow-effect","/hooks/use-state-history","/hooks/use-text-selection","/hooks/use-throttled-callback","/hooks/use-throttled-state","/hooks/use-throttled-value","/hooks/use-timeout","/hooks/use-toggle","/hooks/use-uncontrolled","/hooks/use-validated-state","/hooks/use-viewport-size","/hooks/use-window-event","/hooks/use-window-scroll","/others/carousel","/others/code-highlight","/others/dropzone","/others/modals","/others/notifications","/others/nprogress","/others/spotlight","/others/tiptap","/overview","/styles/color-functions","/styles/css-files-list","/styles/css-modules","/styles/css-variables","/styles/css-variables-list","/styles/data-attributes","/styles/emotion","/styles/global-styles","/styles/mantine-styles","/styles/postcss-preset","/styles/rem","/styles/responsive","/styles/rtl","/styles/sass","/styles/style","/styles/style-props","/styles/styles-api","/styles/styles-overview","/styles/styles-performance","/styles/unstyled","/styles/vanilla-extract","/styles/variants-sizes","/submit-template","/templates-usage","/theming/color-schemes","/theming/colors","/theming/default-props","/theming/default-theme","/theming/mantine-provider","/theming/theme-object","/theming/typography","/x/carousel","/x/code-highlight","/x/dropzone","/x/modals","/x/notifications","/x/nprogress","/x/spotlight","/x/tiptap"]}}("static/chunks/66748-37cb84b370da03e8.js","static/chunks/61177-5995aa811b13875d.js","static/css/2a6a1327ff7ff197.css","static/chunks/11340-41a5c1bac219b9f7.js","static/chunks/43092-1db17847f8c7e6c6.js","static/chunks/5248-18fddaa777fda32c.js","static/chunks/90160-bdbcba06fedfd5c8.js","static/chunks/11204-349c2f2040e95d48.js","static/chunks/61324-c3d8f7294950ecf3.js","static/chunks/9462-0d71094376fa046e.js","static/chunks/59966-48fe9d5ace19581d.js","static/chunks/81073-a92a67525ccf96e9.js","static/chunks/40296-7af66c03a9a85d25.js","static/chunks/18738-54ec5a1cb743e05a.js","static/chunks/1510-c44ceb96af3d30b8.js","static/chunks/91097-7c4d104b1bf7edb2.js","static/chunks/70231-9eff3dab14a70ca4.js","static/chunks/77413-e470dbf103d60797.js","static/chunks/43454-7d196b18afa632af.js","static/chunks/087dc132-867bf609b65f51f1.js","static/chunks/b155a556-1333d837f9d1c5a0.js","static/chunks/b779bb5e-af8eb4b7ea5dce3e.js","static/chunks/95607-18e590bce2aa7490.js","static/chunks/26601-33e8287835f81f06.js","static/chunks/76124-f2d71a58b8a4a91c.js","static/chunks/46159-1843392b4ae73b0a.js","static/chunks/59133-8b29fd587f332990.js","static/chunks/37355-b6188015b9308ab0.js","static/chunks/36503-bf7ecf48500d49bd.js","static/chunks/74736-8d385500aa653861.js","static/chunks/36386-bf72153cebe9e85d.js","static/chunks/94323-7d6797194de6808c.js","static/chunks/59750-74d44d47aa88fe9a.js","static/chunks/91062-5f0862d5fe444848.js","static/chunks/82605-bb51aa96cceafaca.js","static/chunks/7763-40a8806abc6c8ee6.js","static/chunks/21836-5022cc5b8948ff19.js","static/chunks/43470-f5ed8ab1f1c20e7d.js","static/chunks/87325-3128e76194818126.js","static/chunks/57902-fd815be4296a49ae.js","static/chunks/60214-2d05e94c50e1e4a6.js","static/chunks/89882-fd04d079d29bb71e.js","static/chunks/3309-269972c4785ed80f.js","static/css/d2e82f58d1b5e6b3.css","static/chunks/64485-4e59a41eae0567fa.js","static/css/74f4115ba6605d28.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file +self.__BUILD_MANIFEST=function(s,e,c,t,a,o,r,i,h,u,n,d,k,p,g,l,f,b,j,m,y,v,x,w,z,_,q,I,B,F,A,D,E,L,M,N,S,T,U,C,P,G,H,J,K,O){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[m,y,v,x,w,D,"static/chunks/50864-8db2b23b348d3b18.js",s,a,i,h,p,f,z,_,E,L,"static/css/ae6de2a1a6f5a03d.css","static/chunks/pages/index-8242c8beeed19e67.js"],"/404":[e,s,c,t,"static/chunks/pages/404-801f418b703fdd8f.js"],"/_error":["static/chunks/pages/_error-95d51db2fb6a2e23.js"],"/about":[e,s,c,t,"static/css/7c164d03fceab98f.css","static/chunks/pages/about-c2303e16dc6d35ad.js"],"/app-shell":[f,"static/css/dc549a3d8b9a0209.css","static/chunks/pages/app-shell-37837ba329f8a33e.js"],"/changelog/7-0-0":[e,u,w,s,c,t,h,b,M,"static/chunks/pages/changelog/7-0-0-33bca1282f1b12aa.js"],"/changelog/7-1-0":[e,s,c,t,"static/chunks/pages/changelog/7-1-0-d106ff05f83d05a5.js"],"/changelog/7-10-0":[e,s,c,t,a,q,N,"static/chunks/pages/changelog/7-10-0-b9822f2a3b91951c.js"],"/changelog/7-11-0":[e,o,r,n,g,l,I,s,c,t,h,k,b,"static/chunks/pages/changelog/7-11-0-bdcccf5ffc7e7205.js"],"/changelog/7-12-0":[e,s,c,t,q,"static/chunks/pages/changelog/7-12-0-24aa1a8ed66cd2ac.js"],"/changelog/7-13-0":[e,o,r,d,g,l,s,c,t,k,"static/chunks/pages/changelog/7-13-0-43548a55396dc429.js"],"/changelog/7-14-0":[e,o,r,n,S,T,s,c,t,k,U,"static/chunks/pages/changelog/7-14-0-99815526c8b626d1.js"],"/changelog/7-2-0":[e,u,s,c,t,a,B,"static/chunks/pages/changelog/7-2-0-78503be85ea9ae6a.js"],"/changelog/7-3-0":[e,s,c,t,a,f,C,"static/chunks/pages/changelog/7-3-0-db4ce6200288b4f2.js"],"/changelog/7-4-0":[e,o,r,u,d,l,s,c,t,a,k,F,"static/chunks/pages/changelog/7-4-0-a9bb1706177e8b88.js"],"/changelog/7-5-0":[e,o,r,n,d,j,"static/chunks/90673-a5e0146a12332df1.js",s,c,t,i,p,P,"static/chunks/pages/changelog/7-5-0-368c4df2084043b0.js"],"/changelog/7-6-0":[m,y,v,e,o,r,n,d,j,x,I,"static/chunks/65712-a59f09c708d14841.js",s,c,t,h,k,b,z,"static/chunks/pages/changelog/7-6-0-c41dc3729fc4197b.js"],"/changelog/7-7-0":[e,o,r,d,g,"static/chunks/95995-2a4a45dd3b7c71dd.js",s,c,t,G,"static/chunks/pages/changelog/7-7-0-a3697cde6662bcc4.js"],"/changelog/7-8-0":[e,s,c,t,a,"static/chunks/pages/changelog/7-8-0-fc870783058673cc.js"],"/changelog/7-9-0":[e,o,r,s,c,t,k,"static/chunks/pages/changelog/7-9-0-af41631d58f6578e.js"],"/changelog/all-releases":[e,s,c,t,H,J,"static/chunks/pages/changelog/all-releases-ba9509eb98e67a8d.js"],"/changelog/previous-versions":[e,s,c,t,H,J,"static/chunks/pages/changelog/previous-versions-e4214f76d6356c6e.js"],"/charts/area-chart":[e,o,r,d,s,c,t,P,"static/chunks/pages/charts/area-chart-72d6bff31b0fc712.js"],"/charts/bar-chart":[e,o,r,s,c,t,k,U,"static/chunks/pages/charts/bar-chart-2d19ab9ecac3d7aa.js"],"/charts/bubble-chart":[e,o,r,g,s,c,t,"static/chunks/pages/charts/bubble-chart-a8998a348f13b41b.js"],"/charts/composite-chart":[e,o,r,d,g,l,s,c,t,"static/chunks/pages/charts/composite-chart-caba0a4c116186df.js"],"/charts/donut-chart":[e,o,n,j,s,c,t,"static/chunks/pages/charts/donut-chart-73eca2a92aa8f89c.js"],"/charts/funnel-chart":[e,o,S,s,c,t,"static/chunks/pages/charts/funnel-chart-1af1b8bdfec4739b.js"],"/charts/getting-started":[e,s,c,t,"static/chunks/pages/charts/getting-started-daff1f25fb834dec.js"],"/charts/line-chart":[e,o,r,l,s,c,t,"static/chunks/pages/charts/line-chart-da167fee413c016c.js"],"/charts/pie-chart":[e,o,n,j,s,c,t,"static/chunks/pages/charts/pie-chart-6d944693a5b032ef.js"],"/charts/radar-chart":[e,o,n,I,s,c,t,"static/chunks/pages/charts/radar-chart-f7487ff75865ca03.js"],"/charts/radial-bar-chart":[e,o,n,T,s,c,t,"static/chunks/pages/charts/radial-bar-chart-a92d70309f2cfc33.js"],"/charts/scatter-chart":[e,o,r,g,s,c,t,G,"static/chunks/pages/charts/scatter-chart-2c4bdd5ebd6e2da4.js"],"/charts/sparkline":[e,o,r,d,s,c,t,"static/chunks/pages/charts/sparkline-d83e0d55d32453df.js"],"/colors-generator":["static/chunks/73227-b0f14b8ed2c49bd4.js","static/css/05cf04530a1ea457.css","static/chunks/pages/colors-generator-1ae7bbcec2ab63d3.js"],"/combobox":[h,"static/css/f928343dfc69fe64.css","static/chunks/pages/combobox-c968ba75f218794f.js"],"/contribute":[e,s,c,t,"static/chunks/pages/contribute-b01610800bd6930f.js"],"/core/accordion":[e,s,c,t,L,"static/chunks/pages/core/accordion-d2357a1c6c236003.js"],"/core/action-icon":[e,s,c,t,"static/chunks/pages/core/action-icon-8c43e4e6b56d7607.js"],"/core/affix":[e,s,c,t,"static/chunks/pages/core/affix-1ab29d18a9458f96.js"],"/core/alert":[e,s,c,t,"static/chunks/pages/core/alert-c545c35a84a20a7d.js"],"/core/anchor":[e,s,c,t,"static/chunks/pages/core/anchor-f2b97baf241e94a1.js"],"/core/angle-slider":[e,s,c,t,"static/chunks/pages/core/angle-slider-c7b293c0c0503e3c.js"],"/core/app-shell":[e,s,c,t,"static/chunks/pages/core/app-shell-5fff14c1bbeaea14.js"],"/core/aspect-ratio":[e,s,c,t,"static/chunks/pages/core/aspect-ratio-81eef1f994456cf4.js"],"/core/autocomplete":[e,s,c,t,h,"static/chunks/pages/core/autocomplete-f45e7b58fcfcb7ce.js"],"/core/avatar":[e,s,c,t,"static/chunks/pages/core/avatar-86f337c5a35e6642.js"],"/core/background-image":[e,s,c,t,"static/chunks/pages/core/background-image-40889aae8aad6917.js"],"/core/badge":[e,s,c,t,"static/chunks/pages/core/badge-da24976fd57e5c78.js"],"/core/blockquote":[e,s,c,t,"static/chunks/pages/core/blockquote-3c34d3f0d9e47694.js"],"/core/box":[e,s,c,t,"static/chunks/pages/core/box-cc4612f4ab2ad236.js"],"/core/breadcrumbs":[e,s,c,t,"static/chunks/pages/core/breadcrumbs-7c76b51444175f4c.js"],"/core/burger":[e,s,c,t,"static/chunks/pages/core/burger-59c7ddad419c61d6.js"],"/core/button":[e,s,c,t,"static/chunks/pages/core/button-07cc712cc54e5720.js"],"/core/card":[e,s,c,t,"static/chunks/pages/core/card-c0dfba85c04f83fd.js"],"/core/center":[e,s,c,t,"static/chunks/pages/core/center-ec5cd73a9634b056.js"],"/core/checkbox":[e,s,c,t,"static/chunks/pages/core/checkbox-e304f0f26e5f7381.js"],"/core/chip":[e,s,c,t,"static/chunks/pages/core/chip-17c79bea04285f31.js"],"/core/close-button":[e,s,c,t,"static/chunks/pages/core/close-button-5d36fee32cea002c.js"],"/core/code":[e,s,c,t,"static/chunks/pages/core/code-f96ff96b5de1482d.js"],"/core/collapse":[e,s,c,t,"static/chunks/pages/core/collapse-bf74ce469b131320.js"],"/core/color-input":[e,s,c,t,"static/chunks/pages/core/color-input-34d4bb8ea2cb0d0f.js"],"/core/color-picker":[e,s,c,t,"static/chunks/pages/core/color-picker-a3e4316343c39179.js"],"/core/color-swatch":[e,s,c,t,"static/chunks/pages/core/color-swatch-b3c80ac6ff7bca08.js"],"/core/combobox":[e,s,c,t,h,"static/chunks/pages/core/combobox-f54373ef6b169648.js"],"/core/container":[e,s,c,t,"static/chunks/pages/core/container-3180514e655550a4.js"],"/core/copy-button":[e,s,c,t,"static/chunks/pages/core/copy-button-a5b10d37604011c0.js"],"/core/dialog":[e,s,c,t,"static/chunks/pages/core/dialog-0ee2ad0daa988ca8.js"],"/core/divider":[e,s,c,t,"static/chunks/pages/core/divider-3ae17ab9835b3fe2.js"],"/core/drawer":[e,s,c,t,a,f,C,"static/chunks/pages/core/drawer-ac32cbb0d83fa528.js"],"/core/fieldset":[e,s,c,t,"static/chunks/pages/core/fieldset-2927990a25b75381.js"],"/core/file-button":[e,s,c,t,"static/chunks/pages/core/file-button-de3f62b19a7a8e64.js"],"/core/file-input":[e,s,c,t,"static/chunks/pages/core/file-input-5d5a058032b7ad66.js"],"/core/flex":[e,s,c,t,"static/chunks/pages/core/flex-52f4cc394a8d9a6e.js"],"/core/floating-indicator":[e,s,c,t,"static/chunks/pages/core/floating-indicator-3fad57dfa117bf59.js"],"/core/focus-trap":[e,s,c,t,"static/chunks/pages/core/focus-trap-44a5c072b43bd219.js"],"/core/grid":[e,s,c,t,"static/chunks/pages/core/grid-6f5b1b0244e57ebd.js"],"/core/group":[e,s,c,t,"static/chunks/pages/core/group-6bc9884caa2fb84e.js"],"/core/highlight":[e,s,c,t,"static/chunks/pages/core/highlight-023a355f22761bc9.js"],"/core/hover-card":[e,s,c,t,"static/chunks/pages/core/hover-card-55ebeb53b37e7bec.js"],"/core/image":[e,s,c,t,"static/chunks/pages/core/image-5712fe9ab35fe431.js"],"/core/indicator":[e,s,c,t,"static/chunks/pages/core/indicator-550d4dfd66713f69.js"],"/core/input":[e,"static/chunks/41329-30dd406b3f5410e2.js",s,c,t,"static/chunks/pages/core/input-aca9997c7cc76ee0.js"],"/core/json-input":[e,s,c,t,"static/chunks/pages/core/json-input-31060c4f395e1bcd.js"],"/core/kbd":[e,s,c,t,"static/chunks/pages/core/kbd-248ccd62118ff161.js"],"/core/list":[e,s,c,t,"static/chunks/pages/core/list-9f54dc768f7e2ece.js"],"/core/loader":[e,s,c,t,a,B,"static/chunks/pages/core/loader-236210afd91a5321.js"],"/core/loading-overlay":[e,s,c,t,a,B,"static/chunks/pages/core/loading-overlay-b6520ce2ffc292f5.js"],"/core/mark":[e,s,c,t,"static/chunks/pages/core/mark-e32ff4aaeaa9a58d.js"],"/core/menu":[e,s,c,t,"static/chunks/pages/core/menu-b9b2c0a019f1bb9e.js"],"/core/modal":[e,s,c,t,a,K,"static/chunks/pages/core/modal-87193cd803ed7b97.js"],"/core/multi-select":[e,s,c,t,h,E,"static/chunks/pages/core/multi-select-de417aa3d59a2c0d.js"],"/core/native-select":[e,s,c,t,"static/chunks/pages/core/native-select-39cc01eb3e99fb4e.js"],"/core/nav-link":[e,s,c,t,"static/chunks/pages/core/nav-link-a8e30dd223bda465.js"],"/core/notification":[e,s,c,t,"static/chunks/pages/core/notification-5d3a882d78f7c49e.js"],"/core/number-formatter":[e,u,s,c,t,"static/chunks/pages/core/number-formatter-b9bfce4030a60b95.js"],"/core/number-input":[e,u,s,c,t,"static/chunks/pages/core/number-input-5d025bcea57b7257.js"],"/core/overlay":[e,s,c,t,"static/chunks/pages/core/overlay-c10c8183933e27b6.js"],"/core/pagination":[e,s,c,t,_,"static/chunks/pages/core/pagination-364fa94e7ced3fb6.js"],"/core/paper":[e,s,c,t,"static/chunks/pages/core/paper-d6d7e481657db4fc.js"],"/core/password-input":[e,s,c,t,"static/chunks/pages/core/password-input-6162082f0d96ae0c.js"],"/core/pill":[e,s,c,t,"static/chunks/pages/core/pill-2097c74c603a8991.js"],"/core/pills-input":[e,s,c,t,h,"static/chunks/pages/core/pills-input-ed810da8948952e5.js"],"/core/pin-input":[e,s,c,t,"static/chunks/pages/core/pin-input-fa6b08e862999535.js"],"/core/popover":[e,s,c,t,i,h,p,"static/chunks/pages/core/popover-2b42018c0f09d9db.js"],"/core/portal":[e,s,c,t,"static/chunks/pages/core/portal-1363dd519609aebe.js"],"/core/progress":[e,s,c,t,"static/chunks/pages/core/progress-368b33421f67f1a4.js"],"/core/radio":[e,s,c,t,N,"static/chunks/pages/core/radio-e445ffc09012534f.js"],"/core/rating":[e,s,c,t,"static/chunks/pages/core/rating-eab9e1b99a33fdca.js"],"/core/ring-progress":[e,s,c,t,"static/chunks/pages/core/ring-progress-24d085167967dccc.js"],"/core/scroll-area":[e,s,c,t,"static/chunks/pages/core/scroll-area-2df61ddda7d87d54.js"],"/core/segmented-control":[e,s,c,t,"static/chunks/pages/core/segmented-control-3768acd6baa301f1.js"],"/core/select":[e,s,c,t,h,"static/chunks/pages/core/select-4343cf58d42090e5.js"],"/core/semi-circle-progress":[e,s,c,t,"static/chunks/pages/core/semi-circle-progress-c56a865eda73afa8.js"],"/core/simple-grid":[e,s,c,t,"static/chunks/pages/core/simple-grid-1198dc1ebd4b1ed1.js"],"/core/skeleton":[e,s,c,t,"static/chunks/pages/core/skeleton-76487ba047b11b16.js"],"/core/slider":[e,s,c,t,"static/chunks/pages/core/slider-53fc46a485ad05ac.js"],"/core/space":[e,s,c,t,"static/chunks/pages/core/space-350955f817db0e9e.js"],"/core/spoiler":[e,s,c,t,"static/chunks/pages/core/spoiler-3d8204bbdffc37e3.js"],"/core/stack":[e,s,c,t,"static/chunks/pages/core/stack-e39b9605b73e6334.js"],"/core/stepper":[e,s,c,t,"static/chunks/pages/core/stepper-00a045ace2734751.js"],"/core/switch":[e,s,c,t,"static/chunks/pages/core/switch-09c4d48e4d261ed9.js"],"/core/table":[e,s,c,t,"static/chunks/pages/core/table-7e6090ae919dc8c0.js"],"/core/tabs":[e,s,c,t,"static/chunks/pages/core/tabs-79b1f0850b5591cc.js"],"/core/tags-input":[e,s,c,t,h,b,"static/chunks/pages/core/tags-input-3e8c2f565383a4d3.js"],"/core/text":[e,s,c,t,"static/chunks/pages/core/text-a89d2abfca4ac9eb.js"],"/core/text-input":[e,s,c,t,"static/chunks/pages/core/text-input-2470b0f90f1b4a4c.js"],"/core/textarea":[e,s,c,t,"static/chunks/pages/core/textarea-3368d19102324c5d.js"],"/core/theme-icon":[e,s,c,t,"static/chunks/pages/core/theme-icon-1820dd1495efd15f.js"],"/core/timeline":[e,s,c,t,"static/chunks/pages/core/timeline-14aa39c89d096a71.js"],"/core/title":[e,s,c,t,"static/chunks/pages/core/title-ee755ea11837e030.js"],"/core/tooltip":[e,s,c,t,"static/chunks/pages/core/tooltip-1bc5e1dcf932773c.js"],"/core/transition":[e,s,c,t,"static/chunks/pages/core/transition-f4627d2aae83664c.js"],"/core/tree":[e,s,c,t,q,"static/chunks/pages/core/tree-0fde4c1781c97035.js"],"/core/typography-styles-provider":[e,s,c,t,"static/chunks/pages/core/typography-styles-provider-85a3aaa109485004.js"],"/core/unstyled-button":[e,s,c,t,"static/chunks/pages/core/unstyled-button-74f2c84f98b28047.js"],"/core/visually-hidden":[e,s,c,t,"static/chunks/pages/core/visually-hidden-ffe148fc33cb6140.js"],"/dates/calendar":[e,s,c,t,i,"static/chunks/pages/dates/calendar-5bf6c0666d478efc.js"],"/dates/date-input":[e,s,c,t,i,"static/chunks/pages/dates/date-input-0f3a64be0a9edcf7.js"],"/dates/date-picker":[e,s,c,t,i,A,"static/chunks/pages/dates/date-picker-ce01bb6a04eebdf6.js"],"/dates/date-picker-input":[e,s,c,t,i,p,"static/chunks/pages/dates/date-picker-input-52ad5e4044fd626e.js"],"/dates/date-time-picker":[e,s,c,t,i,"static/chunks/pages/dates/date-time-picker-fa8eb6e20452c609.js"],"/dates/dates-provider":[e,s,c,t,i,p,"static/chunks/pages/dates/dates-provider-6ca695eb3f3f0eda.js"],"/dates/getting-started":[e,s,c,t,i,p,"static/chunks/pages/dates/getting-started-298dee6eb0cbe39b.js"],"/dates/month-picker":[e,s,c,t,i,A,"static/chunks/pages/dates/month-picker-416aed0a699fe8d7.js"],"/dates/month-picker-input":[e,s,c,t,i,"static/chunks/pages/dates/month-picker-input-82cc73da75c93fd3.js"],"/dates/time-input":[e,s,c,t,"static/chunks/pages/dates/time-input-b51d95537f01a966.js"],"/dates/year-picker":[e,s,c,t,i,A,"static/chunks/pages/dates/year-picker-ca359eb1d8ab6c4b.js"],"/dates/year-picker-input":[e,s,c,t,i,"static/chunks/pages/dates/year-picker-input-0affaf9622e81b34.js"],"/form/actions":[e,s,c,t,"static/chunks/pages/form/actions-8b2e861bb00853eb.js"],"/form/create-form-context":[e,s,c,t,"static/chunks/pages/form/create-form-context-7140909fbc3f9831.js"],"/form/errors":[e,s,c,t,"static/chunks/pages/form/errors-746f76565d294cec.js"],"/form/get-input-props":[e,u,s,c,t,a,F,"static/chunks/pages/form/get-input-props-e60ca32a1285444b.js"],"/form/nested":[e,s,c,t,a,"static/chunks/pages/form/nested-9bbeb03bada2e3dd.js"],"/form/recipes":["static/chunks/e1533f8b-7153877f366db892.js",e,"static/chunks/8511-fa797d70bcfd6e85.js",s,c,t,a,"static/chunks/pages/form/recipes-adb6d892568b2e66.js"],"/form/schema-validation":[e,s,c,t,"static/chunks/pages/form/schema-validation-3b344e31ca7b87c4.js"],"/form/status":[e,s,c,t,a,"static/chunks/pages/form/status-ad3fa31fc4ac5005.js"],"/form/uncontrolled":[e,s,c,t,a,"static/chunks/pages/form/uncontrolled-e9e943328e07bf11.js"],"/form/use-field":[e,s,c,t,"static/chunks/pages/form/use-field-5ff3c777d28d15ee.js"],"/form/use-form":[e,s,c,t,a,"static/chunks/pages/form/use-form-95b7650dff08dddd.js"],"/form/validation":[e,u,s,c,t,a,"static/chunks/pages/form/validation-290145268cea29ad.js"],"/form/validators":[e,u,s,c,t,a,"static/chunks/pages/form/validators-31fa9c737bac2a52.js"],"/form/values":[e,u,s,c,t,a,F,"static/chunks/pages/form/values-23aecd0c3a6cbff4.js"],"/getting-started":[e,s,c,t,"static/css/0ab03061551e1328.css","static/chunks/pages/getting-started-547eb75b6b303c17.js"],"/guides/6x-to-7x":[e,s,c,t,"static/chunks/pages/guides/6x-to-7x-d00e21fdad68cae9.js"],"/guides/functions-reference":[e,s,c,t,"static/chunks/pages/guides/functions-reference-a01ff09834e7a430.js"],"/guides/gatsby":[e,s,c,t,"static/chunks/pages/guides/gatsby-bcf5bdd3f6fcecb3.js"],"/guides/icons":[e,s,c,t,"static/chunks/pages/guides/icons-11f4e715f4433df8.js"],"/guides/javascript":[e,s,c,t,"static/chunks/pages/guides/javascript-439389dc78da3ace.js"],"/guides/jest":[e,s,c,t,"static/chunks/pages/guides/jest-18e1e6e6b5fbb25d.js"],"/guides/next":[e,s,c,t,"static/chunks/pages/guides/next-8f6faa0f438214b2.js"],"/guides/polymorphic":[e,s,c,t,"static/chunks/pages/guides/polymorphic-09adc4fd0e06180b.js"],"/guides/redwood":[e,s,c,t,"static/chunks/pages/guides/redwood-e67f05edc9e4bcc4.js"],"/guides/remix":[e,s,c,t,"static/chunks/pages/guides/remix-d99651d38754d963.js"],"/guides/storybook":[e,s,c,t,"static/chunks/pages/guides/storybook-c9ed984535571945.js"],"/guides/typescript":[e,s,c,t,"static/chunks/pages/guides/typescript-81ef866e51f9fcb6.js"],"/guides/vite":[e,s,c,t,"static/chunks/pages/guides/vite-5f3ff15cc405bf27.js"],"/guides/vitest":[e,s,c,t,"static/chunks/pages/guides/vitest-e99ff163fad05f17.js"],"/hooks/use-click-outside":[e,s,c,t,"static/chunks/pages/hooks/use-click-outside-2f5646e1d0b60e30.js"],"/hooks/use-clipboard":[e,s,c,t,"static/chunks/pages/hooks/use-clipboard-4aeabb10d4e8e146.js"],"/hooks/use-color-scheme":[e,s,c,t,"static/chunks/pages/hooks/use-color-scheme-6b90c7aad43e3c57.js"],"/hooks/use-counter":[e,s,c,t,"static/chunks/pages/hooks/use-counter-4b9fc8dd8f135f88.js"],"/hooks/use-debounced-callback":[e,s,c,t,"static/chunks/pages/hooks/use-debounced-callback-4ac3871f0a5653a5.js"],"/hooks/use-debounced-state":[e,s,c,t,"static/chunks/pages/hooks/use-debounced-state-38887c94e3ddeb11.js"],"/hooks/use-debounced-value":[e,s,c,t,"static/chunks/pages/hooks/use-debounced-value-46578fb2028d657c.js"],"/hooks/use-did-update":[e,s,c,t,"static/chunks/pages/hooks/use-did-update-94312ecc04744c93.js"],"/hooks/use-disclosure":[e,s,c,t,"static/chunks/pages/hooks/use-disclosure-b9404e4de1440386.js"],"/hooks/use-document-title":[e,s,c,t,"static/chunks/pages/hooks/use-document-title-4c8bf8dcb3b8aeac.js"],"/hooks/use-document-visibility":[e,s,c,t,"static/chunks/pages/hooks/use-document-visibility-3c75dbb7778367d3.js"],"/hooks/use-element-size":[e,s,c,t,"static/chunks/pages/hooks/use-element-size-13d9a4d76a44fbd3.js"],"/hooks/use-event-listener":[e,s,c,t,"static/chunks/pages/hooks/use-event-listener-19a810ee7a311677.js"],"/hooks/use-eye-dropper":[e,s,c,t,"static/chunks/pages/hooks/use-eye-dropper-debe1655edf687d3.js"],"/hooks/use-favicon":[e,s,c,t,"static/chunks/pages/hooks/use-favicon-c3f20febea4e32a8.js"],"/hooks/use-fetch":[e,s,c,t,"static/chunks/pages/hooks/use-fetch-9692f9ecafba9998.js"],"/hooks/use-focus-return":[e,s,c,t,a,K,"static/chunks/pages/hooks/use-focus-return-aa8a2fb306744b81.js"],"/hooks/use-focus-trap":[e,s,c,t,"static/chunks/pages/hooks/use-focus-trap-eeef8e033d4c04cd.js"],"/hooks/use-focus-within":[e,s,c,t,"static/chunks/pages/hooks/use-focus-within-3979b0940d05c9d1.js"],"/hooks/use-force-update":[e,s,c,t,"static/chunks/pages/hooks/use-force-update-ef3c48e3ede39310.js"],"/hooks/use-fullscreen":[e,s,c,t,"static/chunks/pages/hooks/use-fullscreen-88e6525c7a84cf9e.js"],"/hooks/use-hash":[e,s,c,t,"static/chunks/pages/hooks/use-hash-21e52ed7fc0ffcaa.js"],"/hooks/use-headroom":[e,s,c,t,"static/chunks/pages/hooks/use-headroom-e672cc7034c43a7a.js"],"/hooks/use-hotkeys":[e,s,c,t,"static/chunks/pages/hooks/use-hotkeys-98142066e0baa92e.js"],"/hooks/use-hover":[e,s,c,t,"static/chunks/pages/hooks/use-hover-c990c8d3b18cfb32.js"],"/hooks/use-id":[e,s,c,t,"static/chunks/pages/hooks/use-id-d078042d1940aa5f.js"],"/hooks/use-idle":[e,s,c,t,"static/chunks/pages/hooks/use-idle-440ae33549849135.js"],"/hooks/use-in-viewport":[e,s,c,t,"static/chunks/pages/hooks/use-in-viewport-25983a6eba236d52.js"],"/hooks/use-input-state":[e,s,c,t,"static/chunks/pages/hooks/use-input-state-2e9c004ac9c7bdd2.js"],"/hooks/use-intersection":[e,s,c,t,"static/chunks/pages/hooks/use-intersection-3a0cb1cf5f673d04.js"],"/hooks/use-interval":[e,s,c,t,"static/chunks/pages/hooks/use-interval-c744f849bfc913db.js"],"/hooks/use-is-first-render":[e,s,c,t,"static/chunks/pages/hooks/use-is-first-render-d9886a0ee2aead07.js"],"/hooks/use-isomorphic-effect":[e,s,c,t,"static/chunks/pages/hooks/use-isomorphic-effect-b40df0620cdd1f36.js"],"/hooks/use-list-state":[e,s,c,t,"static/chunks/pages/hooks/use-list-state-c3ddb1bb583f9a84.js"],"/hooks/use-local-storage":[e,s,c,t,"static/chunks/pages/hooks/use-local-storage-70e3ae4d7633d198.js"],"/hooks/use-logger":[e,s,c,t,"static/chunks/pages/hooks/use-logger-1212db923be64687.js"],"/hooks/use-map":[e,s,c,t,"static/chunks/pages/hooks/use-map-4f2e7cf4eb2faed2.js"],"/hooks/use-media-query":[e,s,c,t,"static/chunks/pages/hooks/use-media-query-2f7473d413c1fd3f.js"],"/hooks/use-merged-ref":[e,s,c,t,"static/chunks/pages/hooks/use-merged-ref-e27af8970a7de905.js"],"/hooks/use-mounted":[e,s,c,t,"static/chunks/pages/hooks/use-mounted-cd564ce782436e25.js"],"/hooks/use-mouse":[e,s,c,t,"static/chunks/pages/hooks/use-mouse-206ef53a6dfb0118.js"],"/hooks/use-move":[e,s,c,t,"static/chunks/pages/hooks/use-move-5e2b1f2fd34dd909.js"],"/hooks/use-mutation-observer":[e,s,c,t,"static/chunks/pages/hooks/use-mutation-observer-9ef3a64eb008ede8.js"],"/hooks/use-network":[e,s,c,t,"static/chunks/pages/hooks/use-network-dbdd07bcbb8bd888.js"],"/hooks/use-orientation":[e,s,c,t,"static/chunks/pages/hooks/use-orientation-96bd965065016026.js"],"/hooks/use-os":[e,s,c,t,"static/chunks/pages/hooks/use-os-46e82c190858013f.js"],"/hooks/use-page-leave":[e,s,c,t,"static/chunks/pages/hooks/use-page-leave-903940657c24a842.js"],"/hooks/use-pagination":[e,s,c,t,_,"static/chunks/pages/hooks/use-pagination-2a2954905c114f2b.js"],"/hooks/use-previous":[e,s,c,t,"static/chunks/pages/hooks/use-previous-5aaf31cdff99911a.js"],"/hooks/use-queue":[e,s,c,t,"static/chunks/pages/hooks/use-queue-2f6910e7d053cc5c.js"],"/hooks/use-reduced-motion":[e,s,c,t,"static/chunks/pages/hooks/use-reduced-motion-973ab4f99fec647a.js"],"/hooks/use-resize-observer":[e,s,c,t,"static/chunks/pages/hooks/use-resize-observer-6e271a63ca2a113e.js"],"/hooks/use-scroll-into-view":[e,s,c,t,"static/chunks/pages/hooks/use-scroll-into-view-be578346c8e7e9a5.js"],"/hooks/use-set":[e,s,c,t,"static/chunks/pages/hooks/use-set-1e98e97dc0bfdd5f.js"],"/hooks/use-set-state":[e,s,c,t,"static/chunks/pages/hooks/use-set-state-844b29242247d46e.js"],"/hooks/use-shallow-effect":[e,s,c,t,"static/chunks/pages/hooks/use-shallow-effect-b7c8581b17f6e7bc.js"],"/hooks/use-state-history":[e,s,c,t,"static/chunks/pages/hooks/use-state-history-d0010c3285a143f8.js"],"/hooks/use-text-selection":[e,s,c,t,"static/chunks/pages/hooks/use-text-selection-2890b601fc9af1c3.js"],"/hooks/use-throttled-callback":[e,s,c,t,"static/chunks/pages/hooks/use-throttled-callback-90e550759ee81736.js"],"/hooks/use-throttled-state":[e,s,c,t,"static/chunks/pages/hooks/use-throttled-state-d7e0dd2415defd7d.js"],"/hooks/use-throttled-value":[e,s,c,t,"static/chunks/pages/hooks/use-throttled-value-e280da5fdae32fad.js"],"/hooks/use-timeout":[e,s,c,t,"static/chunks/pages/hooks/use-timeout-d179d6ed11962a03.js"],"/hooks/use-toggle":[e,s,c,t,"static/chunks/pages/hooks/use-toggle-af63a725fa876b7e.js"],"/hooks/use-uncontrolled":[e,s,c,t,"static/chunks/pages/hooks/use-uncontrolled-215db08718cfdc4d.js"],"/hooks/use-validated-state":[e,s,c,t,"static/chunks/pages/hooks/use-validated-state-229172c19f6b706b.js"],"/hooks/use-viewport-size":[e,s,c,t,"static/chunks/pages/hooks/use-viewport-size-138c068215ac87c8.js"],"/hooks/use-window-event":[e,s,c,t,"static/chunks/pages/hooks/use-window-event-c681e1e1ddea839e.js"],"/hooks/use-window-scroll":[e,s,c,t,"static/chunks/pages/hooks/use-window-scroll-a554de6ba44c2595.js"],"/others/carousel":["static/chunks/pages/others/carousel-eb74f9b7c9ae1531.js"],"/others/code-highlight":["static/chunks/pages/others/code-highlight-6d174f46988db106.js"],"/others/dropzone":["static/chunks/pages/others/dropzone-631ae8ff0c176f3e.js"],"/others/modals":["static/chunks/pages/others/modals-cc2d05791f79a270.js"],"/others/notifications":["static/chunks/pages/others/notifications-7bfa61e17429abde.js"],"/others/nprogress":["static/chunks/pages/others/nprogress-f3da9995b1d8cf29.js"],"/others/spotlight":["static/chunks/pages/others/spotlight-4f6db25aff3c961c.js"],"/others/tiptap":["static/chunks/pages/others/tiptap-d577a4e2f1df177d.js"],"/overview":[e,s,c,t,O,"static/chunks/pages/overview-4970e35bf3409374.js"],"/styles/color-functions":[e,s,c,t,"static/chunks/pages/styles/color-functions-8ca4a8159b3ef5e5.js"],"/styles/css-files-list":[e,s,c,t,"static/chunks/pages/styles/css-files-list-129b0bc3ed8d7f12.js"],"/styles/css-modules":[e,s,c,t,"static/chunks/pages/styles/css-modules-c6539d6827e76caa.js"],"/styles/css-variables":[e,s,c,t,"static/css/b49f69e19f867ec9.css","static/chunks/pages/styles/css-variables-ababb513e3203375.js"],"/styles/css-variables-list":[e,s,c,t,"static/chunks/pages/styles/css-variables-list-cf1e22365d8da0f6.js"],"/styles/data-attributes":[e,s,c,t,"static/chunks/pages/styles/data-attributes-02d6ba7135d02dd0.js"],"/styles/emotion":[e,s,c,t,"static/chunks/pages/styles/emotion-5ab6cdf58fbcaf97.js"],"/styles/global-styles":[e,s,c,t,"static/chunks/pages/styles/global-styles-3be5f2e9382bfd6e.js"],"/styles/mantine-styles":[e,s,c,t,"static/chunks/pages/styles/mantine-styles-06ee7a43d54014d1.js"],"/styles/postcss-preset":[e,s,c,t,"static/chunks/pages/styles/postcss-preset-871afb371e7f8201.js"],"/styles/rem":[e,s,c,t,"static/chunks/pages/styles/rem-0fbcd61032045fbb.js"],"/styles/responsive":[e,s,c,t,"static/chunks/pages/styles/responsive-654ac2141ba7fe55.js"],"/styles/rtl":[e,s,c,t,"static/chunks/pages/styles/rtl-2a91ab9450218ce9.js"],"/styles/sass":[e,s,c,t,"static/chunks/pages/styles/sass-9a7dd793c3a36394.js"],"/styles/style":[e,s,c,t,"static/chunks/pages/styles/style-728ce369dd1d6547.js"],"/styles/style-props":[e,s,c,t,"static/chunks/pages/styles/style-props-65f82e227eb1f01b.js"],"/styles/styles-api":[e,s,c,t,"static/chunks/pages/styles/styles-api-6c0d5ed6a360b961.js"],"/styles/styles-overview":[e,s,c,t,"static/chunks/pages/styles/styles-overview-41246265d929784d.js"],"/styles/styles-performance":[e,s,c,t,"static/chunks/pages/styles/styles-performance-fa284ede9d4ae939.js"],"/styles/unstyled":[e,s,c,t,"static/chunks/pages/styles/unstyled-0b91fed15b251603.js"],"/styles/vanilla-extract":[e,s,c,t,"static/chunks/pages/styles/vanilla-extract-fa3014db9a4a360e.js"],"/styles/variants-sizes":[e,s,c,t,"static/chunks/pages/styles/variants-sizes-d4335752a799e630.js"],"/submit-template":[e,s,c,t,"static/chunks/pages/submit-template-64cc2ec4e71fe555.js"],"/templates-usage":[e,s,c,t,"static/chunks/pages/templates-usage-f3f22fc613280a19.js"],"/theming/color-schemes":[e,s,c,t,"static/chunks/pages/theming/color-schemes-494c32e4e8d26396.js"],"/theming/colors":[e,s,c,t,O,"static/chunks/pages/theming/colors-2fb8e91668e1c317.js"],"/theming/default-props":[e,s,c,t,"static/chunks/pages/theming/default-props-73d59eae3c4e98b0.js"],"/theming/default-theme":[e,s,c,t,"static/chunks/pages/theming/default-theme-790479def9a93f59.js"],"/theming/mantine-provider":[e,s,c,t,"static/chunks/pages/theming/mantine-provider-5a28ccf9d311354f.js"],"/theming/theme-object":[e,s,c,t,"static/chunks/pages/theming/theme-object-f7ab103599fd385f.js"],"/theming/typography":[e,s,c,t,"static/chunks/pages/theming/typography-9d5bf55922571f56.js"],"/x/carousel":[e,w,s,c,t,M,"static/chunks/pages/x/carousel-016be074e0dbbae5.js"],"/x/code-highlight":[e,s,c,t,"static/chunks/pages/x/code-highlight-eaa83ee9fbedb3ad.js"],"/x/dropzone":[e,"static/chunks/40798-5a9d8f9feaa93443.js",s,c,t,"static/chunks/pages/x/dropzone-a2c189f1233b3fca.js"],"/x/modals":[e,s,c,t,"static/chunks/pages/x/modals-d3d227b42eab2342.js"],"/x/notifications":[e,s,c,t,"static/chunks/pages/x/notifications-f997be645fa3e8ec.js"],"/x/nprogress":[e,s,c,t,"static/chunks/pages/x/nprogress-134b5b955ca456e8.js"],"/x/spotlight":[e,s,c,t,"static/chunks/pages/x/spotlight-da45e07aaab1c199.js"],"/x/tiptap":[m,y,v,e,x,D,"static/chunks/12794-ec6db165506141f9.js",s,c,t,z,"static/chunks/pages/x/tiptap-22c54eeba08126fc.js"],sortedPages:["/","/404","/_app","/_error","/about","/app-shell","/changelog/7-0-0","/changelog/7-1-0","/changelog/7-10-0","/changelog/7-11-0","/changelog/7-12-0","/changelog/7-13-0","/changelog/7-14-0","/changelog/7-2-0","/changelog/7-3-0","/changelog/7-4-0","/changelog/7-5-0","/changelog/7-6-0","/changelog/7-7-0","/changelog/7-8-0","/changelog/7-9-0","/changelog/all-releases","/changelog/previous-versions","/charts/area-chart","/charts/bar-chart","/charts/bubble-chart","/charts/composite-chart","/charts/donut-chart","/charts/funnel-chart","/charts/getting-started","/charts/line-chart","/charts/pie-chart","/charts/radar-chart","/charts/radial-bar-chart","/charts/scatter-chart","/charts/sparkline","/colors-generator","/combobox","/contribute","/core/accordion","/core/action-icon","/core/affix","/core/alert","/core/anchor","/core/angle-slider","/core/app-shell","/core/aspect-ratio","/core/autocomplete","/core/avatar","/core/background-image","/core/badge","/core/blockquote","/core/box","/core/breadcrumbs","/core/burger","/core/button","/core/card","/core/center","/core/checkbox","/core/chip","/core/close-button","/core/code","/core/collapse","/core/color-input","/core/color-picker","/core/color-swatch","/core/combobox","/core/container","/core/copy-button","/core/dialog","/core/divider","/core/drawer","/core/fieldset","/core/file-button","/core/file-input","/core/flex","/core/floating-indicator","/core/focus-trap","/core/grid","/core/group","/core/highlight","/core/hover-card","/core/image","/core/indicator","/core/input","/core/json-input","/core/kbd","/core/list","/core/loader","/core/loading-overlay","/core/mark","/core/menu","/core/modal","/core/multi-select","/core/native-select","/core/nav-link","/core/notification","/core/number-formatter","/core/number-input","/core/overlay","/core/pagination","/core/paper","/core/password-input","/core/pill","/core/pills-input","/core/pin-input","/core/popover","/core/portal","/core/progress","/core/radio","/core/rating","/core/ring-progress","/core/scroll-area","/core/segmented-control","/core/select","/core/semi-circle-progress","/core/simple-grid","/core/skeleton","/core/slider","/core/space","/core/spoiler","/core/stack","/core/stepper","/core/switch","/core/table","/core/tabs","/core/tags-input","/core/text","/core/text-input","/core/textarea","/core/theme-icon","/core/timeline","/core/title","/core/tooltip","/core/transition","/core/tree","/core/typography-styles-provider","/core/unstyled-button","/core/visually-hidden","/dates/calendar","/dates/date-input","/dates/date-picker","/dates/date-picker-input","/dates/date-time-picker","/dates/dates-provider","/dates/getting-started","/dates/month-picker","/dates/month-picker-input","/dates/time-input","/dates/year-picker","/dates/year-picker-input","/form/actions","/form/create-form-context","/form/errors","/form/get-input-props","/form/nested","/form/recipes","/form/schema-validation","/form/status","/form/uncontrolled","/form/use-field","/form/use-form","/form/validation","/form/validators","/form/values","/getting-started","/guides/6x-to-7x","/guides/functions-reference","/guides/gatsby","/guides/icons","/guides/javascript","/guides/jest","/guides/next","/guides/polymorphic","/guides/redwood","/guides/remix","/guides/storybook","/guides/typescript","/guides/vite","/guides/vitest","/hooks/use-click-outside","/hooks/use-clipboard","/hooks/use-color-scheme","/hooks/use-counter","/hooks/use-debounced-callback","/hooks/use-debounced-state","/hooks/use-debounced-value","/hooks/use-did-update","/hooks/use-disclosure","/hooks/use-document-title","/hooks/use-document-visibility","/hooks/use-element-size","/hooks/use-event-listener","/hooks/use-eye-dropper","/hooks/use-favicon","/hooks/use-fetch","/hooks/use-focus-return","/hooks/use-focus-trap","/hooks/use-focus-within","/hooks/use-force-update","/hooks/use-fullscreen","/hooks/use-hash","/hooks/use-headroom","/hooks/use-hotkeys","/hooks/use-hover","/hooks/use-id","/hooks/use-idle","/hooks/use-in-viewport","/hooks/use-input-state","/hooks/use-intersection","/hooks/use-interval","/hooks/use-is-first-render","/hooks/use-isomorphic-effect","/hooks/use-list-state","/hooks/use-local-storage","/hooks/use-logger","/hooks/use-map","/hooks/use-media-query","/hooks/use-merged-ref","/hooks/use-mounted","/hooks/use-mouse","/hooks/use-move","/hooks/use-mutation-observer","/hooks/use-network","/hooks/use-orientation","/hooks/use-os","/hooks/use-page-leave","/hooks/use-pagination","/hooks/use-previous","/hooks/use-queue","/hooks/use-reduced-motion","/hooks/use-resize-observer","/hooks/use-scroll-into-view","/hooks/use-set","/hooks/use-set-state","/hooks/use-shallow-effect","/hooks/use-state-history","/hooks/use-text-selection","/hooks/use-throttled-callback","/hooks/use-throttled-state","/hooks/use-throttled-value","/hooks/use-timeout","/hooks/use-toggle","/hooks/use-uncontrolled","/hooks/use-validated-state","/hooks/use-viewport-size","/hooks/use-window-event","/hooks/use-window-scroll","/others/carousel","/others/code-highlight","/others/dropzone","/others/modals","/others/notifications","/others/nprogress","/others/spotlight","/others/tiptap","/overview","/styles/color-functions","/styles/css-files-list","/styles/css-modules","/styles/css-variables","/styles/css-variables-list","/styles/data-attributes","/styles/emotion","/styles/global-styles","/styles/mantine-styles","/styles/postcss-preset","/styles/rem","/styles/responsive","/styles/rtl","/styles/sass","/styles/style","/styles/style-props","/styles/styles-api","/styles/styles-overview","/styles/styles-performance","/styles/unstyled","/styles/vanilla-extract","/styles/variants-sizes","/submit-template","/templates-usage","/theming/color-schemes","/theming/colors","/theming/default-props","/theming/default-theme","/theming/mantine-provider","/theming/theme-object","/theming/typography","/x/carousel","/x/code-highlight","/x/dropzone","/x/modals","/x/notifications","/x/nprogress","/x/spotlight","/x/tiptap"]}}("static/chunks/66748-37cb84b370da03e8.js","static/chunks/61177-5995aa811b13875d.js","static/css/2a6a1327ff7ff197.css","static/chunks/11340-41a5c1bac219b9f7.js","static/chunks/43092-1db17847f8c7e6c6.js","static/chunks/5248-18fddaa777fda32c.js","static/chunks/90160-bdbcba06fedfd5c8.js","static/chunks/11204-349c2f2040e95d48.js","static/chunks/61324-c3d8f7294950ecf3.js","static/chunks/9462-0d71094376fa046e.js","static/chunks/59966-48fe9d5ace19581d.js","static/chunks/81073-a92a67525ccf96e9.js","static/chunks/40296-7af66c03a9a85d25.js","static/chunks/18738-54ec5a1cb743e05a.js","static/chunks/1510-c44ceb96af3d30b8.js","static/chunks/91097-7c4d104b1bf7edb2.js","static/chunks/70231-9eff3dab14a70ca4.js","static/chunks/77413-e470dbf103d60797.js","static/chunks/43454-7d196b18afa632af.js","static/chunks/087dc132-867bf609b65f51f1.js","static/chunks/b155a556-1333d837f9d1c5a0.js","static/chunks/b779bb5e-af8eb4b7ea5dce3e.js","static/chunks/95607-18e590bce2aa7490.js","static/chunks/26601-33e8287835f81f06.js","static/chunks/76124-f2d71a58b8a4a91c.js","static/chunks/46159-1843392b4ae73b0a.js","static/chunks/59133-8b29fd587f332990.js","static/chunks/37355-b6188015b9308ab0.js","static/chunks/36503-bf7ecf48500d49bd.js","static/chunks/74736-8d385500aa653861.js","static/chunks/36386-bf72153cebe9e85d.js","static/chunks/94323-7d6797194de6808c.js","static/chunks/59750-74d44d47aa88fe9a.js","static/chunks/91062-5f0862d5fe444848.js","static/chunks/82605-bb51aa96cceafaca.js","static/chunks/7763-40a8806abc6c8ee6.js","static/chunks/21836-5022cc5b8948ff19.js","static/chunks/43470-f5ed8ab1f1c20e7d.js","static/chunks/87325-3128e76194818126.js","static/chunks/57902-fd815be4296a49ae.js","static/chunks/60214-2d05e94c50e1e4a6.js","static/chunks/89882-fd04d079d29bb71e.js","static/chunks/3309-1904491a84967ff3.js","static/css/d2e82f58d1b5e6b3.css","static/chunks/64485-4e59a41eae0567fa.js","static/css/74f4115ba6605d28.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file diff --git a/_next/static/WcLKBKEz7t8F6ChRk6Rqo/_ssgManifest.js b/_next/static/vwrDpi4AJygXkv_2bQT5X/_ssgManifest.js similarity index 100% rename from _next/static/WcLKBKEz7t8F6ChRk6Rqo/_ssgManifest.js rename to _next/static/vwrDpi4AJygXkv_2bQT5X/_ssgManifest.js diff --git a/about/index.html b/about/index.html index 60b3654cfe..a9ce3e098a 100644 --- a/about/index.html +++ b/about/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

About Mantine

+
Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

About Mantine

Mantine is a React components library focused on providing great user and developer experience. Mantine development was started in January 2021 and the 1.0 version was released on May 3rd, 2021, and since then, more than 200 releases have been published.

@@ -73,4 +73,4 @@ function Demo() { return <MantineLogo color="blue" />; -}
Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on XFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people

\ No newline at end of file +}
Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on XFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people

\ No newline at end of file diff --git a/app-shell/index.html b/app-shell/index.html index 4bb5ea707e..cbe48e0ba7 100644 --- a/app-shell/index.html +++ b/app-shell/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
\ No newline at end of file +
\ No newline at end of file diff --git a/changelog/7-0-0/index.html b/changelog/7-0-0/index.html index 02f5663f15..cf3fe46945 100644 --- a/changelog/7-0-0/index.html +++ b/changelog/7-0-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

Version v7.0.0

Release date

September 18th, 2023

Source code

Release on GitHub

Migration to native CSS

+
Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

Version v7.0.0

Release date

September 18th, 2023

Source code

Release on GitHub

Migration to native CSS

Mantine no longer depends on Emotion for styles generation. All @mantine/* packages are now shipped with native CSS files which can be imported from @mantine/{package}/styles.css, for example:

@@ -957,4 +957,4 @@
  • Dialog component now supports all Paper and Affix props, transitionDuration, transition and other transition related props were replaced with transitionProps
  • Checkbox, Radio, Chip and Switch components now support rootRef prop which allows using them with Tooltip and other similar components
  • Grid no longer has overflow: hidden styles by default, you can enable it by setting overflow prop to hidden
    • -

    Previous

    Version v7.1.0

    Next

    All releases

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Version v7.1.0

    Next

    All releases

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-1-0/index.html b/changelog/7-1-0/index.html index 0e5a93d260..086e0cd6d8 100644 --- a/changelog/7-1-0/index.html +++ b/changelog/7-1-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.1.0

    Release date

    September 28th, 2023

    Source code

    Release on GitHub

    CSS layers

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.1.0

    Release date

    September 28th, 2023

    Source code

    Release on GitHub

    CSS layers

    Starting from 7.1.0 it is possible to import all @mantine/* packages styles with rules defined in mantine CSS layer. CSS rules within a layer are grouped together and applied before rules without a layer. This means that @@ -119,4 +119,4 @@ form.setValues(data); }); }, []); -}

    Previous

    Version v7.2.0

    Next

    Version v7.0.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Version v7.2.0

    Next

    Version v7.0.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-10-0/index.html b/changelog/7-10-0/index.html index 60721192f2..7ef5b5bac9 100644 --- a/changelog/7-10-0/index.html +++ b/changelog/7-10-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.10.0

    Release date

    May 23rd, 2024

    Source code

    Release on GitHub

    Tree component

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.10.0

    Release date

    May 23rd, 2024

    Source code

    Release on GitHub

    Tree component

    New Tree component:

    • src
    • node_modules
    • package.json
    • tsconfig.json
    import { IconFolder, IconFolderOpen } from '@tabler/icons-react';
 import { Group, RenderTreeNodePayload, Tree } from '@mantine/core';
@@ -339,4 +339,4 @@
 
 function Demo() {
   return <Box bd="1px solid red.5" />;
-}

    Previous

    Version v7.11.0

    Next

    Version v7.9.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Version v7.11.0

    Next

    Version v7.9.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-11-0/index.html b/changelog/7-11-0/index.html index 1f62f8fdd0..03eec794a6 100644 --- a/changelog/7-11-0/index.html +++ b/changelog/7-11-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.11.0

    Release date

    June 26th, 2024

    Source code

    Release on GitHub

    withProps function

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.11.0

    Release date

    June 26th, 2024

    Source code

    Release on GitHub

    withProps function

    All Mantine components now have withProps static function that can be used to add default props to the component:

    import { IMaskInput } from 'react-imask';
@@ -234,4 +234,4 @@
 
  • Spoiler component now supports controlled expanded state with expanded and onExpandedChange props
    • 
 
  • Burger component now supports lineSize prop to change lines height
    • 
 
  • Calendar, DatePicker and other similar components now support highlightToday prop to highlight today's date
    • 
-
    Previous
    Version v7.12.0
    Next
    Version v7.10.0
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Version v7.12.0

    Next

    Version v7.10.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-12-0/index.html b/changelog/7-12-0/index.html index 0609ba3ad8..9f330336d3 100644 --- a/changelog/7-12-0/index.html +++ b/changelog/7-12-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.12.0

    Release date

    August 6th, 2024

    Source code

    Release on GitHub

    Notifications at any position

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.12.0

    Release date

    August 6th, 2024

    Source code

    Release on GitHub

    Notifications at any position

    It is now possible to display notifications at any position on the screen with @mantine/notifications package:

    import { Button } from '@mantine/core';
@@ -170,4 +170,4 @@
 
  • use-form with mode="uncontrolled" now triggers additional rerender when dirty state changes to allow subscribing to form state changes.
    • 
 
  • ScrollArea component now supports onTopReached and onBottomReached props. The functions are called when the user scrolls to the top or bottom of the scroll area.
    • 
 
  • Accordion.Panel component now supports onTransitionEnd prop that is called when the panel animation completes.
    • 
-
    Previous
    Version v7.13.0
    Next
    Version v7.11.0
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Version v7.13.0

    Next

    Version v7.11.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-13-0/index.html b/changelog/7-13-0/index.html index 1019cd70f2..1d49e771a4 100644 --- a/changelog/7-13-0/index.html +++ b/changelog/7-13-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.13.0

    Release date

    September 26th, 2024

    Source code

    Release on GitHub

    Container queries support in Grid

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.13.0

    Release date

    September 26th, 2024

    Source code

    Release on GitHub

    Container queries support in Grid

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

    @@ -227,4 +227,4 @@
    • New demo has been added to Chip component with an example of how to deselect radio chip
    • BarChart now supports maxBarWidth prop to set the maximum width of each bar in px
      • -

    Previous

    Version v7.14.0

    Next

    Version v7.12.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Version v7.14.0

    Next

    Version v7.12.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-14-0/index.html b/changelog/7-14-0/index.html index 582b68a949..81b3a4a4f2 100644 --- a/changelog/7-14-0/index.html +++ b/changelog/7-14-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.14.0

    Release date

    November 12th, 2024

    Source code

    Release on GitHub

    AngleSlider component

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.14.0

    Release date

    November 12th, 2024

    Source code

    Release on GitHub

    AngleSlider component

    New AngleSlider component:

    0°
    0°
    import { AngleSlider, Group } from '@mantine/core';
 
@@ -251,4 +251,4 @@
 
  • useTree hook now returns additional checkAllNodes, uncheckAllNodes and setCheckedState handlers
    • 
 
  • Tree component now includes getTreeExpandedState to generate expanded state based on the tree data
    • 
 
  • use-form now supports form.replaceListItem handler to replace list item at given index
    • 
-
    Previous
    Rich text editor
    Next
    Version v7.13.0
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Rich text editor

    Next

    Version v7.13.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-2-0/index.html b/changelog/7-2-0/index.html index 9f3d2a3c67..23fe282980 100644 --- a/changelog/7-2-0/index.html +++ b/changelog/7-2-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.2.0

    Release date

    November 7th, 2023

    Source code

    Release on GitHub

    Community templates

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.2.0

    Release date

    November 7th, 2023

    Source code

    Release on GitHub

    Community templates

    You are welcome to share your GitHub templates with the community. Community templates are featured on the getting started page. You can find a guide on how to create and submit a template here.

    @@ -219,4 +219,4 @@
  • Checkbox root element now has data-checked attribute when the checkbox is checked
  • Checkbox and Radio components now support changing icon color with iconColor prop
  • use-form now supports onValuesChange option which can be used to sync form values with external state
    • -

    Previous

    Version v7.3.0

    Next

    Version v7.1.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Version v7.3.0

    Next

    Version v7.1.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-3-0/index.html b/changelog/7-3-0/index.html index 99a05665ba..39588b235e 100644 --- a/changelog/7-3-0/index.html +++ b/changelog/7-3-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.3.0

    Release date

    December 5th, 2023

    Source code

    Release on GitHub

    smaller-than and larger-than mixins

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.3.0

    Release date

    December 5th, 2023

    Source code

    Release on GitHub

    smaller-than and larger-than mixins

    smaller-than and larger-than mixins can be used to create styles that will be applied only when the screen is smaller or larger than specified breakpoint. Note that to use these mixins, you need to update postcss-preset-mantine to version 1.11.0 or higher.

    .demo {
@@ -277,4 +277,4 @@
 
  • vite-template was migrated from Jest to Vitest.
    • 
 
  • The main Mantine repository was migrated to yarn v4. The process of getting started locally was changed
    • 
 
  • @mantine/ds package has been deprecated. You can use @mantinex/mantine-logo package to use MantineLogo component in your project.
    • 
-
    Previous
    Version v7.4.0
    Next
    Version v7.2.0
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Version v7.4.0

    Next

    Version v7.2.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-4-0/index.html b/changelog/7-4-0/index.html index 30ac1a71c7..b00ac9785b 100644 --- a/changelog/7-4-0/index.html +++ b/changelog/7-4-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.4.0

    Release date

    January 3rd, 2024

    Source code

    Release on GitHub

    @mantine/charts

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.4.0

    Release date

    January 3rd, 2024

    Source code

    Release on GitHub

    @mantine/charts

    New @mantine/charts package provides a set of components to build charts and graphs. All components are based on recharts. Currently, the package provides AreaChart, BarChart, @@ -645,4 +645,4 @@

  • It is now possible to define CSS variables in styles prop of all components.
  • New use-in-viewport hook
  • All Vite templates have been updated to Vite 5.0 and Vitest 1.0
    • -

    Previous

    Version v7.5.0

    Next

    Version v7.3.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Version v7.5.0

    Next

    Version v7.3.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-5-0/index.html b/changelog/7-5-0/index.html index c612eb9fb0..ae10ee103d 100644 --- a/changelog/7-5-0/index.html +++ b/changelog/7-5-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.5.0

    Release date

    January 26th, 2024

    Source code

    Release on GitHub

    DonutChart component

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.5.0

    Release date

    January 26th, 2024

    Source code

    Release on GitHub

    DonutChart component

    New DonutChart component:

    import { DonutChart } from '@mantine/charts';
 import { data } from './data';
@@ -201,4 +201,4 @@
 
  • Progress now supports transitionDuration prop which controls section width animation duration
    • 
 
  • Textarea and JsonInput components now support resize prop, which allows setting resize CSS property on the input
    • 
 
  • @mantine/hooks package now exports readLocalStorageValue and readSessionStorageValue function to get value from storage outside of React components
    • 
-
    Previous
    Version v7.6.0
    Next
    Version v7.4.0
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Version v7.6.0

    Next

    Version v7.4.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-6-0/index.html b/changelog/7-6-0/index.html index 760d480756..8baca39594 100644 --- a/changelog/7-6-0/index.html +++ b/changelog/7-6-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.6.0

    Release date

    February 27th, 2024

    Source code

    Release on GitHub

    Container queries support

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.6.0

    Release date

    February 27th, 2024

    Source code

    Release on GitHub

    Container queries support

    You can now use container queries with Mantine components. rem and em functions from postcss-preset-mantine are available in container queries staring from postcss-preset-mantine@1.13.0.

    @@ -411,4 +411,4 @@
  • Select, MultiSelect and TagsInput now support onClear prop, the function is called when clear button is clicked
  • MultiSelect and TagsInput now support onRemove prop, the function is called with removed item value when one of the items is deselected
  • Redwood template has been updated to the latest redwood version with Vite
    • -

    Previous

    Version v7.7.0

    Next

    Version v7.5.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Version v7.7.0

    Next

    Version v7.5.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-7-0/index.html b/changelog/7-7-0/index.html index 3da58b1cb0..3afdc79ce0 100644 --- a/changelog/7-7-0/index.html +++ b/changelog/7-7-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.7.0

    Release date

    March 26th, 2024

    Source code

    Release on GitHub

    Virtual colors

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.7.0

    Release date

    March 26th, 2024

    Source code

    Release on GitHub

    Virtual colors

    Virtual color is a special color which values should be different for light and dark color schemes. To define a virtual color, use virtualColor function which accepts an object with the following properties as a single argument:

    @@ -289,4 +289,4 @@
  • Transition component now supports 4 new transitions: fade-up, fade-down, fade-left, fade-right
  • Default Modal transition was changed to fade-down. This change resolves issues with SegmentedControl indicator positioning when used inside modals.
  • You can now reference headings font sizes and line heights in fz and lh style props with h1, h2, h3, h4, h5, h6 values
    • -

    Previous

    Version v7.8.0

    Next

    Version v7.6.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Version v7.8.0

    Next

    Version v7.6.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-8-0/index.html b/changelog/7-8-0/index.html index e3cb247374..bdc061feea 100644 --- a/changelog/7-8-0/index.html +++ b/changelog/7-8-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.8.0

    Release date

    April 12th, 2024

    Source code

    Release on GitHub

    Auto convert px to rem in .css files

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.8.0

    Release date

    April 12th, 2024

    Source code

    Release on GitHub

    Auto convert px to rem in .css files

    Start from version 1.14.4 postcss-preset-mantine supports autoRem option that can be used to automatically convert all px values to rem units in .css files.

    @@ -446,4 +446,4 @@
    • NumberInput now supports withKeyboardEvents={false} to disable up/down arrow keys handling
    • Popover shift middleware now has default padding of 5px to offset dropdown near the edge of the viewport
      • -

    Previous

    Version v7.9.0

    Next

    Version v7.7.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Version v7.9.0

    Next

    Version v7.7.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-9-0/index.html b/changelog/7-9-0/index.html index e9b1bbc97b..22428df369 100644 --- a/changelog/7-9-0/index.html +++ b/changelog/7-9-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.9.0

    Release date

    May 2nd, 2024

    Source code

    Release on GitHub

    @mantine/emotion package

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.9.0

    Release date

    May 2nd, 2024

    Source code

    Release on GitHub

    @mantine/emotion package

    New @mantine/emotion package is now available to simplify migration from 6.x to 7.x. It includes createStyles function and additional functionality for sx and styles props for all components similar to what was available @@ -218,4 +218,4 @@

    • Advanced templates now include GitHub workflows to run tests on CI
    • AspectRatio component has been migrated to aspect-ratio CSS property
      • -

    Previous

    Version v7.10.0

    Next

    Version v7.8.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Version v7.10.0

    Next

    Version v7.8.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/all-releases/index.html b/changelog/all-releases/index.html index 7e8642b343..0fd0b1c1ab 100644 --- a/changelog/all-releases/index.html +++ b/changelog/all-releases/index.html @@ -4,5 +4,5 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    All releases

    -
    7.15.0
    ChangelogGitHub release

    January 14, 2025

    Version 7.15.0 does not have associated patch releases yet.

    7.14.0
    ChangelogGitHub release

    November 12, 2024

    Version 7.14.0 does not have associated patch releases yet.

    7.13.0
    ChangelogGitHub release

    September 26, 2024

    7.13.X patches:

    7.12.0
    ChangelogGitHub release

    August 6, 2024

    7.12.X patches:

    7.11.0
    ChangelogGitHub release

    June 26, 2024

    7.11.X patches:

    7.10.0
    ChangelogGitHub release

    May 23, 2024

    7.10.X patches:

    7.9.0
    ChangelogGitHub release

    May 2, 2024

    7.9.X patches:

    7.8.0
    ChangelogGitHub release

    April 12, 2024

    7.8.X patches:

    7.7.0
    ChangelogGitHub release

    March 26, 2024

    7.7.X patches:

    7.6.0
    ChangelogGitHub release

    February 27, 2024

    7.6.X patches:

    7.5.0
    ChangelogGitHub release

    January 26, 2024

    7.5.X patches:

    7.4.0
    ChangelogGitHub release

    January 3, 2024

    7.4.X patches:

    7.3.0
    ChangelogGitHub release

    December 5, 2023

    7.3.X patches:

    7.2.0
    ChangelogGitHub release

    November 6, 2023

    7.2.X patches:

    7.1.0
    ChangelogGitHub release

    September 28, 2023

    7.1.X patches:

    7.0.0
    ChangelogGitHub release

    September 18, 2023

    7.0.X patches:

    6.0.0
    ChangelogGitHub release

    March 2, 2023

    6.0.X patches:

    5.10.0
    ChangelogGitHub release

    January 3, 2023

    5.10.X patches:

    5.9.0
    ChangelogGitHub release

    December 1, 2022

    5.9.X patches:

    5.8.0
    ChangelogGitHub release

    November 16, 2022

    5.8.X patches:

    5.7.0
    ChangelogGitHub release

    November 4, 2022

    5.7.X patches:

    5.6.0
    ChangelogGitHub release

    October 20, 2022

    5.6.X patches:

    5.5.0
    ChangelogGitHub release

    October 2, 2022

    5.5.X patches:

    5.4.0
    ChangelogGitHub release

    September 19, 2022

    5.4.X patches:

    5.3.0
    ChangelogGitHub release

    September 9, 2022

    5.3.X patches:

    5.2.0
    ChangelogGitHub release

    August 18, 2022

    5.2.X patches:

    5.1.0
    ChangelogGitHub release

    August 8, 2022

    5.1.X patches:

    5.0.0
    ChangelogGitHub release

    July 25, 2022

    5.0.X patches:

    4.2.0
    ChangelogGitHub release

    April 27, 2022

    4.2.X patches:

    4.1.0
    ChangelogGitHub release

    March 28, 2022

    4.1.X patches:

    4.0.0
    ChangelogGitHub release

    March 10, 2022

    4.0.X patches:

    3.6.0
    ChangelogGitHub release

    January 14, 2022

    3.6.X patches:

    3.5.0
    ChangelogGitHub release

    January 3, 2022

    3.5.X patches:

    3.4.0
    ChangelogGitHub release

    December 14, 2021

    3.4.X patches:

    3.3.0
    ChangelogGitHub release

    December 2, 2021

    3.3.X patches:

    3.2.0
    ChangelogGitHub release

    November 13, 2021

    3.2.X patches:

    3.1.0
    ChangelogGitHub release

    October 28, 2021

    3.1.X patches:

    3.0.0
    ChangelogGitHub release

    October 10, 2021

    3.0.X patches:

    2.5.0
    ChangelogGitHub release

    September 16, 2021

    2.5.X patches:

    2.4.0
    ChangelogGitHub release

    August 24, 2021

    2.4.X patches:

    2.3.0
    ChangelogGitHub release

    August 15, 2021

    2.3.X patches:

    2.2.0
    ChangelogGitHub release

    August 2, 2021

    2.2.X patches:

    2.1.0
    ChangelogGitHub release

    July 20, 2021

    2.1.X patches:

    2.0.0
    ChangelogGitHub release

    July 5, 2021

    2.0.X patches:

    1.3.0
    ChangelogGitHub release

    June 1, 2021

    1.3.X patches:

    1.1.0
    ChangelogGitHub release

    May 19, 2021

    1.1.X patches:

    1.0.0
    GitHub release

    May 3, 2021

    1.0.X patches:

    Previous

    Version v7.0.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    All releases

    +
    7.14.0
    ChangelogGitHub release

    November 12, 2024

    Version 7.14.0 does not have associated patch releases yet.

    7.13.0
    ChangelogGitHub release

    September 26, 2024

    7.13.X patches:

    7.12.0
    ChangelogGitHub release

    August 6, 2024

    7.12.X patches:

    7.11.0
    ChangelogGitHub release

    June 26, 2024

    7.11.X patches:

    7.10.0
    ChangelogGitHub release

    May 23, 2024

    7.10.X patches:

    7.9.0
    ChangelogGitHub release

    May 2, 2024

    7.9.X patches:

    7.8.0
    ChangelogGitHub release

    April 12, 2024

    7.8.X patches:

    7.7.0
    ChangelogGitHub release

    March 26, 2024

    7.7.X patches:

    7.6.0
    ChangelogGitHub release

    February 27, 2024

    7.6.X patches:

    7.5.0
    ChangelogGitHub release

    January 26, 2024

    7.5.X patches:

    7.4.0
    ChangelogGitHub release

    January 3, 2024

    7.4.X patches:

    7.3.0
    ChangelogGitHub release

    December 5, 2023

    7.3.X patches:

    7.2.0
    ChangelogGitHub release

    November 6, 2023

    7.2.X patches:

    7.1.0
    ChangelogGitHub release

    September 28, 2023

    7.1.X patches:

    7.0.0
    ChangelogGitHub release

    September 18, 2023

    7.0.X patches:

    6.0.0
    ChangelogGitHub release

    March 2, 2023

    6.0.X patches:

    5.10.0
    ChangelogGitHub release

    January 3, 2023

    5.10.X patches:

    5.9.0
    ChangelogGitHub release

    December 1, 2022

    5.9.X patches:

    5.8.0
    ChangelogGitHub release

    November 16, 2022

    5.8.X patches:

    5.7.0
    ChangelogGitHub release

    November 4, 2022

    5.7.X patches:

    5.6.0
    ChangelogGitHub release

    October 20, 2022

    5.6.X patches:

    5.5.0
    ChangelogGitHub release

    October 2, 2022

    5.5.X patches:

    5.4.0
    ChangelogGitHub release

    September 19, 2022

    5.4.X patches:

    5.3.0
    ChangelogGitHub release

    September 9, 2022

    5.3.X patches:

    5.2.0
    ChangelogGitHub release

    August 18, 2022

    5.2.X patches:

    5.1.0
    ChangelogGitHub release

    August 8, 2022

    5.1.X patches:

    5.0.0
    ChangelogGitHub release

    July 25, 2022

    5.0.X patches:

    4.2.0
    ChangelogGitHub release

    April 27, 2022

    4.2.X patches:

    4.1.0
    ChangelogGitHub release

    March 28, 2022

    4.1.X patches:

    4.0.0
    ChangelogGitHub release

    March 10, 2022

    4.0.X patches:

    3.6.0
    ChangelogGitHub release

    January 14, 2022

    3.6.X patches:

    3.5.0
    ChangelogGitHub release

    January 3, 2022

    3.5.X patches:

    3.4.0
    ChangelogGitHub release

    December 14, 2021

    3.4.X patches:

    3.3.0
    ChangelogGitHub release

    December 2, 2021

    3.3.X patches:

    3.2.0
    ChangelogGitHub release

    November 13, 2021

    3.2.X patches:

    3.1.0
    ChangelogGitHub release

    October 28, 2021

    3.1.X patches:

    3.0.0
    ChangelogGitHub release

    October 10, 2021

    3.0.X patches:

    2.5.0
    ChangelogGitHub release

    September 16, 2021

    2.5.X patches:

    2.4.0
    ChangelogGitHub release

    August 24, 2021

    2.4.X patches:

    2.3.0
    ChangelogGitHub release

    August 15, 2021

    2.3.X patches:

    2.2.0
    ChangelogGitHub release

    August 2, 2021

    2.2.X patches:

    2.1.0
    ChangelogGitHub release

    July 20, 2021

    2.1.X patches:

    2.0.0
    ChangelogGitHub release

    July 5, 2021

    2.0.X patches:

    1.3.0
    ChangelogGitHub release

    June 1, 2021

    1.3.X patches:

    1.1.0
    ChangelogGitHub release

    May 19, 2021

    1.1.X patches:

    1.0.0
    GitHub release

    May 3, 2021

    1.0.X patches:

    Previous

    Version v7.0.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/previous-versions/index.html b/changelog/previous-versions/index.html index 20e87de7a8..b4e16a5390 100644 --- a/changelog/previous-versions/index.html +++ b/changelog/previous-versions/index.html @@ -4,5 +4,5 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    All releases

    -
    7.15.0
    ChangelogGitHub release

    January 14, 2025

    Version 7.15.0 does not have associated patch releases yet.

    7.14.0
    ChangelogGitHub release

    November 12, 2024

    Version 7.14.0 does not have associated patch releases yet.

    7.13.0
    ChangelogGitHub release

    September 26, 2024

    7.13.X patches:

    7.12.0
    ChangelogGitHub release

    August 6, 2024

    7.12.X patches:

    7.11.0
    ChangelogGitHub release

    June 26, 2024

    7.11.X patches:

    7.10.0
    ChangelogGitHub release

    May 23, 2024

    7.10.X patches:

    7.9.0
    ChangelogGitHub release

    May 2, 2024

    7.9.X patches:

    7.8.0
    ChangelogGitHub release

    April 12, 2024

    7.8.X patches:

    7.7.0
    ChangelogGitHub release

    March 26, 2024

    7.7.X patches:

    7.6.0
    ChangelogGitHub release

    February 27, 2024

    7.6.X patches:

    7.5.0
    ChangelogGitHub release

    January 26, 2024

    7.5.X patches:

    7.4.0
    ChangelogGitHub release

    January 3, 2024

    7.4.X patches:

    7.3.0
    ChangelogGitHub release

    December 5, 2023

    7.3.X patches:

    7.2.0
    ChangelogGitHub release

    November 6, 2023

    7.2.X patches:

    7.1.0
    ChangelogGitHub release

    September 28, 2023

    7.1.X patches:

    7.0.0
    ChangelogGitHub release

    September 18, 2023

    7.0.X patches:

    6.0.0
    ChangelogGitHub release

    March 2, 2023

    6.0.X patches:

    5.10.0
    ChangelogGitHub release

    January 3, 2023

    5.10.X patches:

    5.9.0
    ChangelogGitHub release

    December 1, 2022

    5.9.X patches:

    5.8.0
    ChangelogGitHub release

    November 16, 2022

    5.8.X patches:

    5.7.0
    ChangelogGitHub release

    November 4, 2022

    5.7.X patches:

    5.6.0
    ChangelogGitHub release

    October 20, 2022

    5.6.X patches:

    5.5.0
    ChangelogGitHub release

    October 2, 2022

    5.5.X patches:

    5.4.0
    ChangelogGitHub release

    September 19, 2022

    5.4.X patches:

    5.3.0
    ChangelogGitHub release

    September 9, 2022

    5.3.X patches:

    5.2.0
    ChangelogGitHub release

    August 18, 2022

    5.2.X patches:

    5.1.0
    ChangelogGitHub release

    August 8, 2022

    5.1.X patches:

    5.0.0
    ChangelogGitHub release

    July 25, 2022

    5.0.X patches:

    4.2.0
    ChangelogGitHub release

    April 27, 2022

    4.2.X patches:

    4.1.0
    ChangelogGitHub release

    March 28, 2022

    4.1.X patches:

    4.0.0
    ChangelogGitHub release

    March 10, 2022

    4.0.X patches:

    3.6.0
    ChangelogGitHub release

    January 14, 2022

    3.6.X patches:

    3.5.0
    ChangelogGitHub release

    January 3, 2022

    3.5.X patches:

    3.4.0
    ChangelogGitHub release

    December 14, 2021

    3.4.X patches:

    3.3.0
    ChangelogGitHub release

    December 2, 2021

    3.3.X patches:

    3.2.0
    ChangelogGitHub release

    November 13, 2021

    3.2.X patches:

    3.1.0
    ChangelogGitHub release

    October 28, 2021

    3.1.X patches:

    3.0.0
    ChangelogGitHub release

    October 10, 2021

    3.0.X patches:

    2.5.0
    ChangelogGitHub release

    September 16, 2021

    2.5.X patches:

    2.4.0
    ChangelogGitHub release

    August 24, 2021

    2.4.X patches:

    2.3.0
    ChangelogGitHub release

    August 15, 2021

    2.3.X patches:

    2.2.0
    ChangelogGitHub release

    August 2, 2021

    2.2.X patches:

    2.1.0
    ChangelogGitHub release

    July 20, 2021

    2.1.X patches:

    2.0.0
    ChangelogGitHub release

    July 5, 2021

    2.0.X patches:

    1.3.0
    ChangelogGitHub release

    June 1, 2021

    1.3.X patches:

    1.1.0
    ChangelogGitHub release

    May 19, 2021

    1.1.X patches:

    1.0.0
    GitHub release

    May 3, 2021

    1.0.X patches:

    Next

    MantineProvider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    All releases

    +
    7.14.0
    ChangelogGitHub release

    November 12, 2024

    Version 7.14.0 does not have associated patch releases yet.

    7.13.0
    ChangelogGitHub release

    September 26, 2024

    7.13.X patches:

    7.12.0
    ChangelogGitHub release

    August 6, 2024

    7.12.X patches:

    7.11.0
    ChangelogGitHub release

    June 26, 2024

    7.11.X patches:

    7.10.0
    ChangelogGitHub release

    May 23, 2024

    7.10.X patches:

    7.9.0
    ChangelogGitHub release

    May 2, 2024

    7.9.X patches:

    7.8.0
    ChangelogGitHub release

    April 12, 2024

    7.8.X patches:

    7.7.0
    ChangelogGitHub release

    March 26, 2024

    7.7.X patches:

    7.6.0
    ChangelogGitHub release

    February 27, 2024

    7.6.X patches:

    7.5.0
    ChangelogGitHub release

    January 26, 2024

    7.5.X patches:

    7.4.0
    ChangelogGitHub release

    January 3, 2024

    7.4.X patches:

    7.3.0
    ChangelogGitHub release

    December 5, 2023

    7.3.X patches:

    7.2.0
    ChangelogGitHub release

    November 6, 2023

    7.2.X patches:

    7.1.0
    ChangelogGitHub release

    September 28, 2023

    7.1.X patches:

    7.0.0
    ChangelogGitHub release

    September 18, 2023

    7.0.X patches:

    6.0.0
    ChangelogGitHub release

    March 2, 2023

    6.0.X patches:

    5.10.0
    ChangelogGitHub release

    January 3, 2023

    5.10.X patches:

    5.9.0
    ChangelogGitHub release

    December 1, 2022

    5.9.X patches:

    5.8.0
    ChangelogGitHub release

    November 16, 2022

    5.8.X patches:

    5.7.0
    ChangelogGitHub release

    November 4, 2022

    5.7.X patches:

    5.6.0
    ChangelogGitHub release

    October 20, 2022

    5.6.X patches:

    5.5.0
    ChangelogGitHub release

    October 2, 2022

    5.5.X patches:

    5.4.0
    ChangelogGitHub release

    September 19, 2022

    5.4.X patches:

    5.3.0
    ChangelogGitHub release

    September 9, 2022

    5.3.X patches:

    5.2.0
    ChangelogGitHub release

    August 18, 2022

    5.2.X patches:

    5.1.0
    ChangelogGitHub release

    August 8, 2022

    5.1.X patches:

    5.0.0
    ChangelogGitHub release

    July 25, 2022

    5.0.X patches:

    4.2.0
    ChangelogGitHub release

    April 27, 2022

    4.2.X patches:

    4.1.0
    ChangelogGitHub release

    March 28, 2022

    4.1.X patches:

    4.0.0
    ChangelogGitHub release

    March 10, 2022

    4.0.X patches:

    3.6.0
    ChangelogGitHub release

    January 14, 2022

    3.6.X patches:

    3.5.0
    ChangelogGitHub release

    January 3, 2022

    3.5.X patches:

    3.4.0
    ChangelogGitHub release

    December 14, 2021

    3.4.X patches:

    3.3.0
    ChangelogGitHub release

    December 2, 2021

    3.3.X patches:

    3.2.0
    ChangelogGitHub release

    November 13, 2021

    3.2.X patches:

    3.1.0
    ChangelogGitHub release

    October 28, 2021

    3.1.X patches:

    3.0.0
    ChangelogGitHub release

    October 10, 2021

    3.0.X patches:

    2.5.0
    ChangelogGitHub release

    September 16, 2021

    2.5.X patches:

    2.4.0
    ChangelogGitHub release

    August 24, 2021

    2.4.X patches:

    2.3.0
    ChangelogGitHub release

    August 15, 2021

    2.3.X patches:

    2.2.0
    ChangelogGitHub release

    August 2, 2021

    2.2.X patches:

    2.1.0
    ChangelogGitHub release

    July 20, 2021

    2.1.X patches:

    2.0.0
    ChangelogGitHub release

    July 5, 2021

    2.0.X patches:

    1.3.0
    ChangelogGitHub release

    June 1, 2021

    1.3.X patches:

    1.1.0
    ChangelogGitHub release

    May 19, 2021

    1.1.X patches:

    1.0.0
    GitHub release

    May 3, 2021

    1.0.X patches:

    Next

    MantineProvider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/area-chart/index.html b/charts/area-chart/index.html index 3d42660997..840ecff32b 100644 --- a/charts/area-chart/index.html +++ b/charts/area-chart/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    AreaChart

    Area chart component with stacked, percent and split variants

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    AreaChart

    Area chart component with stacked, percent and split variants

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    Use AreaChart component without type prop to render a regular area chart. In a regular area chart, each data series is plotted on its own and does not interact with other series.

    @@ -749,4 +749,4 @@ series={[{ name: 'Apples', color: 'indigo.6' }]} /> ); -}

    Previous

    Getting started

    Next

    BarChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Getting started

    Next

    BarChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/bar-chart/index.html b/charts/bar-chart/index.html index 0037329ba5..2a2b666bce 100644 --- a/charts/bar-chart/index.html +++ b/charts/bar-chart/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    BarChart

    Bar chart component with stacked and percent variants

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    BarChart

    Bar chart component with stacked and percent variants

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    Use BarChart component without type prop to render a regular bar chart. In a regular bar chart, each data series is plotted on its own and does not interact with other series.

    @@ -695,4 +695,4 @@ ]} /> ); -}

    Previous

    AreaChart

    Next

    LineChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    AreaChart

    Next

    LineChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/bubble-chart/index.html b/charts/bubble-chart/index.html index 567f7dc521..3a10460ad6 100644 --- a/charts/bubble-chart/index.html +++ b/charts/bubble-chart/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    BubbleChart

    Bubble chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    BubbleChart

    Bubble chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    import { BubbleChart } from '@mantine/charts';
 import { data } from './data';
 
@@ -135,4 +135,4 @@
       dataKey={{ x: 'hour', y: 'index', z: 'value' }}
     />
   );
-}

    Previous

    ScatterChart

    Next

    RadialBarChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    ScatterChart

    Next

    RadialBarChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/composite-chart/index.html b/charts/composite-chart/index.html index 0bde9fdc0a..149e8ea59e 100644 --- a/charts/composite-chart/index.html +++ b/charts/composite-chart/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CompositeChart

    Composed chart with support for Area, Bar and Line charts

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CompositeChart

    Composed chart with support for Area, Bar and Line charts

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    CompositeChart allows using Line, Area and Bar charts together in a single chart:

    Tick line
    Grid axis
    import { CompositeChart } from '@mantine/charts';
@@ -612,4 +612,4 @@
       ]}
     />
   );
-}

    Previous

    LineChart

    Next

    DonutChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    LineChart

    Next

    DonutChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/donut-chart/index.html b/charts/donut-chart/index.html index ec3d9beabb..fbc704023b 100644 --- a/charts/donut-chart/index.html +++ b/charts/donut-chart/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DonutChart

    Donut chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DonutChart

    Donut chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    DonutChart is based on PieChart recharts component:

    import { DonutChart } from '@mantine/charts';
 import { data } from './data';
@@ -137,4 +137,4 @@
       <DonutChart data={data} strokeColor="var(--card-bg)" />
     </div>
   );
-}

    Previous

    CompositeChart

    Next

    PieChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    CompositeChart

    Next

    PieChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/funnel-chart/index.html b/charts/funnel-chart/index.html index 8383f35db5..b9d0e64497 100644 --- a/charts/funnel-chart/index.html +++ b/charts/funnel-chart/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    FunnelChart

    Funnel chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    FunnelChart

    Funnel chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    FunnelChart is based on FunnelChart recharts component:

    import { FunnelChart } from '@mantine/charts';
 import { data } from './data';
@@ -109,4 +109,4 @@
       <FunnelChart data={data} strokeColor="var(--card-bg)" />
     </div>
   );
-}

    Previous

    PieChart

    Next

    RadarChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    PieChart

    Next

    RadarChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/getting-started/index.html b/charts/getting-started/index.html index 63b2d2140f..0474c3d397 100644 --- a/charts/getting-started/index.html +++ b/charts/getting-started/index.html @@ -4,11 +4,11 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Getting started

    Get started with @mantine/charts package

    Docs

    Edit this page

    Package

    @mantine/charts

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Getting started

    Get started with @mantine/charts package

    Docs

    Edit this page

    Package

    @mantine/charts

    License

    MIT

    Installation

    yarn add @mantine/charts recharts@2

    After installation import package styles at the root of your application:

    import '@mantine/charts/styles.css';

    Based on recharts

    Most of the components in @mantine/charts package are based on recharts library. If you need advanced features that are not covered in @mantine/charts -documentation, reference recharts documentation for more information.

    Previous

    TimeInput

    Next

    AreaChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +documentation, reference recharts documentation for more information.

    Previous

    TimeInput

    Next

    AreaChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/line-chart/index.html b/charts/line-chart/index.html index 0d4da2f6a6..fa88580472 100644 --- a/charts/line-chart/index.html +++ b/charts/line-chart/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    LineChart

    Line chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    LineChart

    Line chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    Tick line
    Grid axis
    import { LineChart } from '@mantine/charts';
 import { data } from './data';
 
@@ -631,4 +631,4 @@
       series={[{ name: 'Apples', color: 'indigo.6' }]}
     />
   );
-}

    Previous

    BarChart

    Next

    CompositeChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    BarChart

    Next

    CompositeChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/pie-chart/index.html b/charts/pie-chart/index.html index 6303d22d4e..d28d7b6e60 100644 --- a/charts/pie-chart/index.html +++ b/charts/pie-chart/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    PieChart

    Pie chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    PieChart

    Pie chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    PieChart is based on PieChart recharts component:

    import { PieChart } from '@mantine/charts';
 import { data } from './data';
@@ -123,4 +123,4 @@
       <PieChart data={data} strokeColor="var(--card-bg)" />
     </div>
   );
-}

    Previous

    DonutChart

    Next

    FunnelChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    DonutChart

    Next

    FunnelChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/radar-chart/index.html b/charts/radar-chart/index.html index 0eced0da48..a9468d6e00 100644 --- a/charts/radar-chart/index.html +++ b/charts/radar-chart/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    RadarChart

    Radar chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    RadarChart

    Radar chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    RadarChart is based on recharts RadarChart component:

    import { RadarChart } from '@mantine/charts';
 import { data } from './data';
@@ -122,4 +122,4 @@
       ]}
     />
   );
-}

    Previous

    FunnelChart

    Next

    ScatterChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    FunnelChart

    Next

    ScatterChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/radial-bar-chart/index.html b/charts/radial-bar-chart/index.html index c36201f9e1..f1ca41c61c 100644 --- a/charts/radial-bar-chart/index.html +++ b/charts/radial-bar-chart/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    RadialBarChart

    Radial bar chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    RadialBarChart

    Radial bar chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    RadialBarChart is based on RadialBarChart recharts component:

    import { RadialBarChart } from '@mantine/charts';
 import { data } from './data';
@@ -52,4 +52,4 @@
 
 function Demo() {
   return <RadialBarChart data={data} dataKey="value" h={220} withTooltip={false} />;
-}

    Previous

    BubbleChart

    Next

    Sparkline

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    BubbleChart

    Next

    Sparkline

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/scatter-chart/index.html b/charts/scatter-chart/index.html index d94a449754..130f044fed 100644 --- a/charts/scatter-chart/index.html +++ b/charts/scatter-chart/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ScatterChart

    Scatter chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ScatterChart

    Scatter chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    import { ScatterChart } from '@mantine/charts';
 import { data } from './data';
 
@@ -328,4 +328,4 @@
       ]}
     />
   );
-}

    Previous

    RadarChart

    Next

    BubbleChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    RadarChart

    Next

    BubbleChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/sparkline/index.html b/charts/sparkline/index.html index 2f5078b4ff..706ed1a98b 100644 --- a/charts/sparkline/index.html +++ b/charts/sparkline/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Sparkline

    Simplified area chart to show trends

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Sparkline

    Simplified area chart to show trends

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    Sparkline is a simplified version of AreaChart. It can be used to display a single series of data in a small space.

    Color
    Fill opacity
    Stroke width
    import { Sparkline } from '@mantine/charts';
@@ -83,4 +83,4 @@
       />
     </Stack>
   );
-}

    Previous

    RadialBarChart

    Next

    CodeHighlight

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    RadialBarChart

    Next

    CodeHighlight

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/colors-generator/index.html b/colors-generator/index.html index 6ca0b1e1a6..663e2f4f79 100644 --- a/colors-generator/index.html +++ b/colors-generator/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mantine colors generator

    0#ecf4ff
    1#dce4f5
    2#b9c7e2
    3#94a8d0
    4#748dc0
    5#5f7cb7
    6#5474b4
    7#44639f
    8#3a5890
    9#2c4b80
    Variants preview
    FilledLightOutlineSubtle
    Colors array
    [
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Mantine colors generator
    0#ecf4ff
    1#dce4f5
    2#b9c7e2
    3#94a8d0
    4#748dc0
    5#5f7cb7
    6#5474b4
    7#44639f
    8#3a5890
    9#2c4b80
    Variants preview
    FilledLightOutlineSubtle
    Colors array
    [
   "#ecf4ff",
   "#dce4f5",
   "#b9c7e2",
@@ -42,4 +42,4 @@
       {/* Your app here */}
     </MantineProvider>
   );
-}
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on XFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+}
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/combobox/index.html b/combobox/index.html index 55552a99b8..84de394906 100644 --- a/combobox/index.html +++ b/combobox/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    \ No newline at end of file diff --git a/contribute/index.html b/contribute/index.html index 7c2db1f50c..6d895c71b6 100644 --- a/contribute/index.html +++ b/contribute/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Contributing to Mantine

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Contributing to Mantine

    First of all, thank you for showing interest in contributing to Mantine! All your contributions are extremely valuable to the project!

    Ways to contribute

      @@ -57,4 +57,4 @@
    • docs:docgen – generates components types information with docgen script
    • docs:build – builds docs for production
    • docs:deploy – builds and deploys docs to the GitHub Pages
      • -
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/accordion/index.html b/core/accordion/index.html index 989219d928..29a5460f1a 100644 --- a/core/accordion/index.html +++ b/core/accordion/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Accordion

    Divide content into collapsible sections

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Accordion

    Divide content into collapsible sections

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Data used in Accordion examples:

    const groceries = [
   {
@@ -403,4 +403,4 @@
   return <Accordion order={3}>{/* ...items */}</Accordion>;
 }

    Keyboard interactions:

    -
    KeyDescription
    ArrowDownMoves focus to next item
    ArrowUpMoves focus to previous item
    HomeMoves focus to first item
    EndMoves focus to last item
    Space/EnterToggles focused item opened state

    Previous

    Tooltip

    Next

    Avatar

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    KeyDescription
    ArrowDownMoves focus to next item
    ArrowUpMoves focus to previous item
    HomeMoves focus to first item
    EndMoves focus to last item
    Space/EnterToggles focused item opened state

    Previous

    Tooltip

    Next

    Avatar

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/action-icon/index.html b/core/action-icon/index.html index 2944a93513..9d3b7ecabb 100644 --- a/core/action-icon/index.html +++ b/core/action-icon/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ActionIcon

    Icon button

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ActionIcon

    Icon button

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Color
    Size
    Radius
    import { ActionIcon } from '@mantine/core';
 import { IconAdjustments } from '@tabler/icons-react';
 
@@ -372,4 +372,4 @@
       </ActionIcon>
     </>
   );
-}

    Previous

    TagsInput

    Next

    Button

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    TagsInput

    Next

    Button

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/affix/index.html b/core/affix/index.html index f423dfff00..94c28a7fdd 100644 --- a/core/affix/index.html +++ b/core/affix/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Affix

    Renders children inside portal at fixed position

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Affix

    Renders children inside portal at fixed position

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Affix renders a div element with a fixed position inside the Portal component. Use it to display elements fixed at any position on the screen, for example, scroll to top button:

    Affix is located at the bottom of the screen, scroll to see it

    import { IconArrowUp } from '@tabler/icons-react';
@@ -32,4 +32,4 @@
       </Affix>
     </>
   );
-}

    Previous

    Skeleton

    Next

    Dialog

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Skeleton

    Next

    Dialog

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/alert/index.html b/core/alert/index.html index 4d551592b7..bd35bad379 100644 --- a/core/alert/index.html +++ b/core/alert/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Alert

    Attract user attention with important static message

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Alert

    Attract user attention with important static message

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Color
    Radius
    import { Alert } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
 
@@ -45,4 +45,4 @@
 function AlsoValid() {
   // -> ok, without close button, closeButtonLabel is not needed
   return <Alert />;
-}

    Previous

    Tree

    Next

    Loader

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Tree

    Next

    Loader

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/anchor/index.html b/core/anchor/index.html index 23435bff2a..64b144150e 100644 --- a/core/anchor/index.html +++ b/core/anchor/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Anchor

    Display link with theme styles

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Anchor

    Display link with theme styles

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Anchor component
    import { Anchor } from '@mantine/core';
 
 function Demo() {
@@ -95,4 +95,4 @@
 function Demo() {
   const ref = useRef<HTMLAnchorElement>(null);
   return <Anchor ref={ref} />;
-}

    Previous

    UnstyledButton

    Next

    Breadcrumbs

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    UnstyledButton

    Next

    Breadcrumbs

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/angle-slider/index.html b/core/angle-slider/index.html index 4b50cb32ff..55f139ae04 100644 --- a/core/angle-slider/index.html +++ b/core/angle-slider/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    AngleSlider

    Pick angle value between 0 and 360

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    AngleSlider

    Pick angle value between 0 and 360

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Use AngleSlider component to pick angle value between 0 and 360:

    0
    Size
    Thumb size
    import { AngleSlider } from '@mantine/core';
 
@@ -100,4 +100,4 @@
 
 function Demo() {
   return <AngleSlider aria-label="Gradient angle" />;
-}

    Previous

    Stack

    Next

    Checkbox

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Stack

    Next

    Checkbox

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/app-shell/index.html b/core/app-shell/index.html index 6478edfd14..e1b97b4744 100644 --- a/core/app-shell/index.html +++ b/core/app-shell/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    AppShell

    Responsive shell for your application with header, navbar, aside and footer

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Examples

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    AppShell

    Responsive shell for your application with header, navbar, aside and footer

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Examples

    This page includes only documentation. Since all associated AppShell components have fixed position, it is not possible to include demos on this page.

    Open AppShell examples page @@ -363,4 +363,4 @@
  • AppShell.Aside root element is aside
  • AppShell.Footer root element is footer
  • AppShell.Main root element is main – !important: do not use main element inside AppShell.Main component
    • -

    Previous

    Recipes

    Next

    AspectRatio

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Recipes

    Next

    AspectRatio

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/aspect-ratio/index.html b/core/aspect-ratio/index.html index 4b0c741794..e4e020ffb4 100644 --- a/core/aspect-ratio/index.html +++ b/core/aspect-ratio/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    AspectRatio

    Maintain responsive consistent width/height ratio

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    AspectRatio

    Maintain responsive consistent width/height ratio

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    AspectRatio allows maintaining a consistent width/height ratio. It can be used to display images, maps, videos and other media.

    Panda
    import { AspectRatio } from '@mantine/core';
@@ -65,4 +65,4 @@
       </AspectRatio>
     </div>
   );
-}

    Previous

    AppShell

    Next

    Center

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    AppShell

    Next

    Center

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/autocomplete/index.html b/core/autocomplete/index.html index 4116f1dda6..5587aeb0f3 100644 --- a/core/autocomplete/index.html +++ b/core/autocomplete/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Autocomplete

    Autocomplete user input with any list of options

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Made with Combobox

    Autocomplete is an opinionated component built on top of Combobox component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with Combobox. You can find examples of custom autocomplete components on the examples page.

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Autocomplete

    Autocomplete user input with any list of options

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Made with Combobox

    Autocomplete is an opinionated component built on top of Combobox component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with Combobox. You can find examples of custom autocomplete components on the examples page.

    Usage

    Autocomplete provides user a list of suggestions based on the input, however user is not limited to suggestions and can type anything.

    @@ -465,4 +465,4 @@ // Accessible input – it has associated label element function Demo() { return <Autocomplete label="My input" />; -}

    Previous

    TextInput

    Next

    Combobox

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    TextInput

    Next

    Combobox

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/avatar/index.html b/core/avatar/index.html index 665b64c83d..1361ea28e3 100644 --- a/core/avatar/index.html +++ b/core/avatar/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Avatar

    Display user profile image, initials or fallback icon

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Avatar

    Display user profile image, initials or fallback icon

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    it's me
    MK
    import { Avatar } from '@mantine/core';
 import { IconStar } from '@tabler/icons-react';
 
@@ -244,4 +244,4 @@
 function OkPlaceholder() {
   // Ok, title is set on placeholder
   return <Avatar alt="Rob Johnson">RJ</Avatar>;
-}

    Previous

    Accordion

    Next

    BackgroundImage

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Accordion

    Next

    BackgroundImage

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/background-image/index.html b/core/background-image/index.html index c1c1e03823..6583fd6c21 100644 --- a/core/background-image/index.html +++ b/core/background-image/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    BackgroundImage

    Displays image as background

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    BackgroundImage

    Displays image as background

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    BackgroundImage component can be used to add any content on image. It is useful for hero headers and other similar sections

    Radius
    import { BackgroundImage, Center, Text, Box } from '@mantine/core';
 
 function Demo() {
@@ -31,4 +31,4 @@
 }

    Polymorphic components with TypeScript

    Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, BackgroundImageProps does not extend React.ComponentPropsWithoutRef'<'div'>' although div is the default element.

    If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support component prop), then your component props interface should extend HTML element props, for example: 

    import type { BackgroundImageProps, ElementProps } from '@mantine/core';
 
 interface MyBackgroundImageProps extends BackgroundImageProps,
-  ElementProps<'button', keyof BackgroundImageProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    Avatar

    Next

    Badge

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file + ElementProps<'button', keyof BackgroundImageProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    Avatar

    Next

    Badge

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/badge/index.html b/core/badge/index.html index d97ecd867d..57c0269a6a 100644 --- a/core/badge/index.html +++ b/core/badge/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Badge

    Display badge, pill or tag

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Badge

    Display badge, pill or tag

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Badge
    Color
    Size
    Radius
    import { Badge } from '@mantine/core';
 
 function Demo() {
@@ -178,4 +178,4 @@
 }

    Polymorphic components with TypeScript

    Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, BadgeProps does not extend React.ComponentPropsWithoutRef'<'div'>' although div is the default element.

    If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support component prop), then your component props interface should extend HTML element props, for example: 

    import type { BadgeProps, ElementProps } from '@mantine/core';
 
 interface MyBadgeProps extends BadgeProps,
-  ElementProps<'a', keyof BadgeProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    BackgroundImage

    Next

    Card

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file + ElementProps<'a', keyof BadgeProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    BackgroundImage

    Next

    Card

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/blockquote/index.html b/core/blockquote/index.html index 2445c5be78..4a0dccdafd 100644 --- a/core/blockquote/index.html +++ b/core/blockquote/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Blockquote

    Blockquote with optional cite

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Blockquote

    Blockquote with optional cite

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Life is like an npm install – you never know what you are going to get.– Forrest Gump
    Color
    Radius
    Icon size
    import { Blockquote } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
 
@@ -15,4 +15,4 @@
       Life is like an npm install – you never know what you are going to get.
     </Blockquote>
   );
-}

    Previous

    Timeline

    Next

    Code

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Timeline

    Next

    Code

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/box/index.html b/core/box/index.html index 4aa9eb72c1..4160f19f05 100644 --- a/core/box/index.html +++ b/core/box/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Box

    Base component for all Mantine components

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Box

    Base component for all Mantine components

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Box component is used as a base for all other components. Box supports the following features:

    Previous

    TypographyStylesProvider

    Next

    Collapse

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    TypographyStylesProvider

    Next

    Collapse

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/breadcrumbs/index.html b/core/breadcrumbs/index.html index ae0139d2e2..8c12fd4339 100644 --- a/core/breadcrumbs/index.html +++ b/core/breadcrumbs/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Breadcrumbs

    Separates list of react nodes with given separator

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Breadcrumbs

    Separates list of react nodes with given separator

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Breadcrumbs component accepts any number of React nodes as children and adds a given separator (defaults to /) between them:

    Mantine
    /
    Mantine hooks
    /
    use-id
    Mantine
    →
    Mantine hooks
    →
    use-id
    import { Breadcrumbs, Anchor } from '@mantine/core';
@@ -28,4 +28,4 @@
       </Breadcrumbs>
     </>
   );
-}

    Previous

    Anchor

    Next

    Burger

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Anchor

    Next

    Burger

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/burger/index.html b/core/burger/index.html index 3eb7a50c9a..8b6699c1e8 100644 --- a/core/burger/index.html +++ b/core/burger/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Burger

    Open/close navigation button

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Burger

    Open/close navigation button

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Burger component renders open/close menu button. Set opened and onClick props to control component state. If opened prop is set, cross will be rendered, otherwise – burger.

    @@ -45,4 +45,4 @@ </Burger> </> ); -}

    Previous

    Breadcrumbs

    Next

    NavLink

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Breadcrumbs

    Next

    NavLink

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/button/index.html b/core/button/index.html index 5bd6e33f9b..ae64369780 100644 --- a/core/button/index.html +++ b/core/button/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Button

    Button component to render button or link

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Button

    Button component to render button or link

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Color
    Size
    Radius
    import { Button } from '@mantine/core';
 
 function Demo() {
@@ -411,4 +411,4 @@
 function Demo() {
   const ref = useRef<HTMLButtonElement>(null);
   return <Button ref={ref} />;
-}

    Previous

    ActionIcon

    Next

    CloseButton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    ActionIcon

    Next

    CloseButton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/card/index.html b/core/card/index.html index 88f02c4eb0..99b96e4ddf 100644 --- a/core/card/index.html +++ b/core/card/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Card

    Card with sections

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Card

    Card with sections

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Card is a wrapper around Paper component with some additional styles and Card.Section component that allows to split card into sections. If you do not need sections, you use Paper component instead.

    Norway

    Norway Fjord Adventures

    On Sale

    With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway

    import { Card, Image, Text, Badge, Button, Group } from '@mantine/core';
@@ -208,4 +208,4 @@
       </Card.Section>
     </Card>
   );
-}

    Previous

    Badge

    Next

    ColorSwatch

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Badge

    Next

    ColorSwatch

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/center/index.html b/core/center/index.html index 5975883890..f7bfca2a58 100644 --- a/core/center/index.html +++ b/core/center/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Center

    Centers content vertically and horizontally

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Center

    Centers content vertically and horizontally

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    All elements inside Center are centered
    import { Center, Box } from '@mantine/core';
 
 function Demo() {
@@ -37,4 +37,4 @@
 }

    Polymorphic components with TypeScript

    Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, CenterProps does not extend React.ComponentPropsWithoutRef'<'div'>' although div is the default element.

    If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support component prop), then your component props interface should extend HTML element props, for example: 

    import type { CenterProps, ElementProps } from '@mantine/core';
 
 interface MyCenterProps extends CenterProps,
-  ElementProps<'button', keyof CenterProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    AspectRatio

    Next

    Container

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file + ElementProps<'button', keyof CenterProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    AspectRatio

    Next

    Container

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/checkbox/index.html b/core/checkbox/index.html index 698488031f..4d7c41926d 100644 --- a/core/checkbox/index.html +++ b/core/checkbox/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Checkbox

    Capture boolean input from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Checkbox

    Capture boolean input from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Label position
    Color
    Variant
    Radius
    Size
    import { Checkbox } from '@mantine/core';
 
 function Demo() {
@@ -448,4 +448,4 @@
 // Ok, input is labelled by label element
 function GoodLabel() {
   return <Checkbox label="My checkbox" />;
-}

    Previous

    AngleSlider

    Next

    Chip

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    AngleSlider

    Next

    Chip

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/chip/index.html b/core/chip/index.html index 4aa9dc1f04..493b526ded 100644 --- a/core/chip/index.html +++ b/core/chip/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Chip

    Pick one or multiple values with inline controls

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Chip

    Pick one or multiple values with inline controls

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Color
    Variant
    Size
    Radius
    import { Chip } from '@mantine/core';
 
 function Demo() {
@@ -145,4 +145,4 @@
 }

    Accessibility

    Chip and Chip.Group components are accessible by default – they are built with native radio/checkbox inputs, -all keyboard events work the same as with native controls.

    Previous

    Checkbox

    Next

    ColorInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +all keyboard events work the same as with native controls.

    Previous

    Checkbox

    Next

    ColorInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/close-button/index.html b/core/close-button/index.html index fcdfd8a2e7..8b21ec4685 100644 --- a/core/close-button/index.html +++ b/core/close-button/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CloseButton

    Button with close icon

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CloseButton

    Button with close icon

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    CloseButton renders a button with X icon inside. It is used in other Mantine components like Drawer or Modal.

    Size
    Variant
    import { CloseButton } from '@mantine/core';
 
@@ -38,4 +38,4 @@
       </CloseButton>
     </>
   );
-}

    Previous

    Button

    Next

    CopyButton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Button

    Next

    CopyButton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/code/index.html b/core/code/index.html index 11e16d0fb6..2d3046d9da 100644 --- a/core/code/index.html +++ b/core/code/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Code

    Inline and block code

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Code

    Inline and block code

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    By default, Code component renders inline code html element:

    React.createElement()
    import { Code } from '@mantine/core';
 
@@ -45,4 +45,4 @@
       <Code color="var(--mantine-color-blue-light)">React.createElement()</Code>
     </Group>
   );
-}

    Previous

    Blockquote

    Next

    Highlight

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Blockquote

    Next

    Highlight

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/collapse/index.html b/core/collapse/index.html index ac699c2b84..f9612934db 100644 --- a/core/collapse/index.html +++ b/core/collapse/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Collapse

    Animate presence with slide down/up transition

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Collapse

    Animate presence with slide down/up transition

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { Button, Group, Text, Collapse, Box } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 
@@ -49,4 +49,4 @@
   );
 }

    Nested Collapse components

    -

    Previous

    Box

    Next

    Divider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Box

    Next

    Divider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/color-input/index.html b/core/color-input/index.html index 5acb0b63c1..74d7503f00 100644 --- a/core/color-input/index.html +++ b/core/color-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ColorInput

    Capture color from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ColorInput

    Capture color from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    ColorInput component supports Input and Input.Wrapper components features and all input element props. ColorInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    Input description

    Variant
    Size
    Radius
    import { ColorInput } from '@mantine/core';
 
@@ -246,4 +246,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <ColorInput label="My input" />;
-}

    Previous

    Chip

    Next

    ColorPicker

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Chip

    Next

    ColorPicker

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/color-picker/index.html b/core/color-picker/index.html index f5a2932982..d2c1bb8705 100644 --- a/core/color-picker/index.html +++ b/core/color-picker/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ColorPicker

    Pick colors in hex(a), rgb(a), hsl(a) and hsv(a) formats

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ColorPicker

    Pick colors in hex(a), rgb(a), hsl(a) and hsv(a) formats

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    rgba(47, 119, 150, 0.7)

    import { useState } from 'react';
 import { ColorPicker, Text } from '@mantine/core';
 
@@ -141,4 +141,4 @@
       alphaLabel="Alpha"
     />
   );
-}

    Previous

    ColorInput

    Next

    Fieldset

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    ColorInput

    Next

    Fieldset

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/color-swatch/index.html b/core/color-swatch/index.html index d0f376da1d..60dc42f533 100644 --- a/core/color-swatch/index.html +++ b/core/color-swatch/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ColorSwatch

    Displays color

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ColorSwatch

    Displays color

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { ColorSwatch, Group } from '@mantine/core';
 
 function Demo() {
@@ -48,4 +48,4 @@
       {checked && <CheckIcon style={{ width: rem(12), height: rem(12) }} />}
     </ColorSwatch>
   );
-}

    Previous

    Card

    Next

    Image

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Card

    Next

    Image

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/combobox/index.html b/core/combobox/index.html index 7ef1ac767a..c7006f470a 100644 --- a/core/combobox/index.html +++ b/core/combobox/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Combobox

    Create custom select, autocomplete or multiselect inputs

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Examples

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Combobox

    Create custom select, autocomplete or multiselect inputs

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Examples

    This page contains only a small set of examples, as the full code of the demos is long. You can find all 50+ examples on a separate page.

    Open Combobox examples page @@ -1054,4 +1054,4 @@ */

    Component Styles API

    Hover over selectors to highlight corresponding elements

    /*
  * Hover over selectors to apply outline styles
  *
- */

    Previous

    Autocomplete

    Next

    MultiSelect

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file + */

    Previous

    Autocomplete

    Next

    MultiSelect

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/container/index.html b/core/container/index.html index b624f3bac1..8731f96554 100644 --- a/core/container/index.html +++ b/core/container/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Container

    Center content with padding and max-width

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Container

    Center content with padding and max-width

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Container centers content and limits its max-width to the value specified in size prop. Note that the size prop does not make max-width responsive, for example, when it set to lg it will always be lg regardless of screen size.

    @@ -109,4 +109,4 @@ </Container> </MantineProvider> ); -}

    Previous

    Center

    Next

    Flex

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Center

    Next

    Flex

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/copy-button/index.html b/core/copy-button/index.html index ca238f9558..559b740b52 100644 --- a/core/copy-button/index.html +++ b/core/copy-button/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CopyButton

    Copies given text to clipboard

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CopyButton

    Copies given text to clipboard

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    CopyButton is based on use-clipboard hook. Its children is a function that receives an object with the following properties:

      @@ -49,4 +49,4 @@ </CopyButton> ); }
    -

    Incompatible with server components

    CopyButton is not compatible with React server components as it requires function as children. To use CopyButton add "use client;" at the top of the file.

    Previous

    CloseButton

    Next

    FileButton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Incompatible with server components

    CopyButton is not compatible with React server components as it requires function as children. To use CopyButton add "use client;" at the top of the file.

    Previous

    CloseButton

    Next

    FileButton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/dialog/index.html b/core/dialog/index.html index ecb55596b7..972312a2dc 100644 --- a/core/dialog/index.html +++ b/core/dialog/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Dialog

    Display a fixed overlay dialog at any side of the screen

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Dialog

    Display a fixed overlay dialog at any side of the screen

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Dialog is a simplified version of Modal component. It does not include most of accessibility and usability Modal features:

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +to select Modal, Drawer or Notifications.

    Previous

    Affix

    Next

    Drawer

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/divider/index.html b/core/divider/index.html index 76cbebe483..2f3680e9c3 100644 --- a/core/divider/index.html +++ b/core/divider/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Divider

    Horizontal line with optional label or vertical divider

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Divider

    Horizontal line with optional label or vertical divider

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit minus ea, perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit? Maiores sed pariatur aliquid commodi atque sunt officiis natus?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit minus ea, perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit? Maiores sed pariatur aliquid commodi atque sunt officiis natus?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit minus ea, perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit? Maiores sed pariatur aliquid commodi atque sunt officiis natus?

    import { Text, Divider } from '@mantine/core';
 
 function Demo() {
@@ -112,4 +112,4 @@
       <Text>Label</Text>
     </Group>
   );
-}

    Previous

    Collapse

    Next

    FocusTrap

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Collapse

    Next

    FocusTrap

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/drawer/index.html b/core/drawer/index.html index e6c2a3ba09..80c11841d8 100644 --- a/core/drawer/index.html +++ b/core/drawer/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Drawer

    Display overlay area at any side of the screen

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Drawer

    Display overlay area at any side of the screen

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { useDisclosure } from '@mantine/hooks';
 import { Drawer, Button } from '@mantine/core';
 
@@ -447,4 +447,4 @@
       onClose={() => {}}
     />
   );
-}

    Previous

    Dialog

    Next

    FloatingIndicator

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Dialog

    Next

    FloatingIndicator

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/fieldset/index.html b/core/fieldset/index.html index e72551639e..503ae4ab62 100644 --- a/core/fieldset/index.html +++ b/core/fieldset/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Fieldset

    Group related elements in a form

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Fieldset

    Group related elements in a form

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Personal information
    Variant
    Radius
    import { Fieldset, TextInput } from '@mantine/core';
 
 function Demo() {
@@ -30,4 +30,4 @@
       </Group>
     </Fieldset>
   );
-}

    Previous

    ColorPicker

    Next

    FileInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    ColorPicker

    Next

    FileInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/file-button/index.html b/core/file-button/index.html index 3454f61d5d..fcffe5b1ce 100644 --- a/core/file-button/index.html +++ b/core/file-button/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    FileButton

    Open file picker with a button click

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    FileButton

    Open file picker with a button click

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { useState } from 'react';
 import { FileButton, Button, Group, Text } from '@mantine/core';
 
@@ -89,4 +89,4 @@
     </>
   );
 }
    -

    Incompatible with server components

    FileButton is not compatible with React server components as it requires function as children. To use FileButton add "use client;" at the top of the file.

    Previous

    CopyButton

    Next

    UnstyledButton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Incompatible with server components

    FileButton is not compatible with React server components as it requires function as children. To use FileButton add "use client;" at the top of the file.

    Previous

    CopyButton

    Next

    UnstyledButton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/file-input/index.html b/core/file-input/index.html index c4c10d86c7..d807a9499f 100644 --- a/core/file-input/index.html +++ b/core/file-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    FileInput

    Capture files from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    FileInput

    Capture files from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    FileInput component supports Input and Input.Wrapper components features and all input element props. FileInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    Input description

    Variant
    Size
    Radius
    import { FileInput } from '@mantine/core';
 
@@ -174,4 +174,4 @@
 
    import type { FileInputProps } from '@mantine/core';
 
 type SingleInputProps = FileInputProps<false>;
-type MultipleInputProps = FileInputProps<true>;
    Previous
    Fieldset
    Next
    Input
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +type MultipleInputProps = FileInputProps<true>;

    Previous

    Fieldset

    Next

    Input

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/flex/index.html b/core/flex/index.html index 1228305dd1..915d2cf12e 100644 --- a/core/flex/index.html +++ b/core/flex/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Flex

    Compose elements in a flex container

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Flex

    Compose elements in a flex container

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Gap
    import { Flex, Button } from '@mantine/core';
 
 function Demo() {
@@ -48,4 +48,4 @@
 Flex is more flexible, it allows creating both horizontal and vertical flexbox layouts, but requires more configuration.
 Unlike Group and Stack Flex is polymorphic and supports responsive props.
    
 
    GroupStackFlex
    Directionhorizontalverticalboth
    Equal width children✅❌❌
    flex-wrap support✅❌✅
    Responsive flexbox props❌❌✅
    Polymorphic component❌❌✅
    
-
    Browser support
    Flex uses flexbox gap to add spacing between children. In older browsers, Flex children may not have spacing. You can install PostCSS flex-gap-polyfill to add support for older browsers.
    Previous
    Container
    Next
    Grid
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Browser support

    Flex uses flexbox gap to add spacing between children. In older browsers, Flex children may not have spacing. You can install PostCSS flex-gap-polyfill to add support for older browsers.

    Previous

    Container

    Next

    Grid

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/floating-indicator/index.html b/core/floating-indicator/index.html index 3c70bcaf92..6f89279b2a 100644 --- a/core/floating-indicator/index.html +++ b/core/floating-indicator/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    FloatingIndicator

    Display a floating indicator over a group of elements

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    FloatingIndicator

    Display a floating indicator over a group of elements

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    FloatingIndicator is designed to highlight active element in a group. It can be used to create custom segmented controls, tabs and other similar components.

    FloatingIndicator renders an element over the target element. To calculate the position it is @@ -206,4 +206,4 @@ <Tabs.Panel value="3">Third tab content</Tabs.Panel> </Tabs> ); -}

    Previous

    Drawer

    Next

    HoverCard

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Drawer

    Next

    HoverCard

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/focus-trap/index.html b/core/focus-trap/index.html index fecd89f3da..4a91e9f608 100644 --- a/core/focus-trap/index.html +++ b/core/focus-trap/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    FocusTrap

    Trap focus at child node

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    FocusTrap

    Trap focus at child node

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    FocusTrap is a component implementation of use-focus-trap hook, it is used in all Mantine components that require focus trap (Modal, DatePicker, Popover, etc.).

    import { useDisclosure } from '@mantine/hooks';
@@ -84,4 +84,4 @@
 
  • If there are no elements with data-autofocus attribute, then the first element that supports keyboard interaction is focused
    • 
 
  • If the target element does not have focusable elements or does not support ref, then the focus trap will not work
    • 
 
  • Trap stops working when element outside of the FocusTrap child is focused
    • 
-
    Previous
    Divider
    Next
    Paper
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Divider

    Next

    Paper

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/grid/index.html b/core/grid/index.html index 4a1bd82bb3..6b1eb2fa80 100644 --- a/core/grid/index.html +++ b/core/grid/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Grid

    Responsive 12 columns grid system

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Grid

    Responsive 12 columns grid system

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    1
    2
    3
    import { Grid } from '@mantine/core';
 
 function Demo() {
@@ -216,4 +216,4 @@
       <Grid.Col span={6}>2</Grid.Col>
     </Grid>
   );
-}

    Previous

    Flex

    Next

    Group

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Flex

    Next

    Group

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/group/index.html b/core/group/index.html index 8f43980601..4e6f423d1a 100644 --- a/core/group/index.html +++ b/core/group/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Group

    Compose elements and components in a horizontal flex container

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Group

    Compose elements and components in a horizontal flex container

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Group is a horizontal flex container. If you need a vertical flex container, use Stack component instead. If you need to have full control over flex container properties, use Flex component.

    Gap
    import { Group, Button } from '@mantine/core';
@@ -73,4 +73,4 @@
     </Group>
   );
 }
    -

    Browser support

    Group uses flexbox gap to add spacing between children. In older browsers, Group children may not have spacing. You can install PostCSS flex-gap-polyfill to add support for older browsers.

    Previous

    Grid

    Next

    SimpleGrid

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Browser support

    Group uses flexbox gap to add spacing between children. In older browsers, Group children may not have spacing. You can install PostCSS flex-gap-polyfill to add support for older browsers.

    Previous

    Grid

    Next

    SimpleGrid

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/highlight/index.html b/core/highlight/index.html index 924ce6c12d..5892450bf2 100644 --- a/core/highlight/index.html +++ b/core/highlight/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Highlight

    Highlight given part of a string with mark

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Highlight

    Highlight given part of a string with mark

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Use Highlight component to highlight a substring in a given string with a mark tag.

    Pass the main string as children to Highlight component and string part that should be highlighted to highlight prop. If the main string does not include highlight part, it will be ignored. @@ -64,4 +64,4 @@ Mantine website </Highlight> ); -}

    Previous

    Code

    Next

    List

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Code

    Next

    List

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/hover-card/index.html b/core/hover-card/index.html index 11affa1650..e2c474e9dd 100644 --- a/core/hover-card/index.html +++ b/core/hover-card/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    HoverCard

    Display popover section when target element is hovered

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    HoverCard

    Display popover section when target element is hovered

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { HoverCard, Button, Text, Group } from '@mantine/core';
 
 function Demo() {
@@ -169,4 +169,4 @@
 }

    Accessibility

    HoverCard is ignored by screen readers and cannot be activated with keyboard, use it to display only additional information -that is not required to understand the context.

    Previous

    FloatingIndicator

    Next

    LoadingOverlay

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +that is not required to understand the context.

    Previous

    FloatingIndicator

    Next

    LoadingOverlay

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/image/index.html b/core/image/index.html index 34953e18a5..e78a1ed0c3 100644 --- a/core/image/index.html +++ b/core/image/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Image

    Image with optional fallback

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Image

    Image with optional fallback

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Image is a wrapper for img with minimal styles. By default, the image will take 100% of parent width. The image size can be controlled with w and h style props.

    @@ -71,4 +71,4 @@ function Demo() { return <Image component={NextImage} src={myImage} alt="My image" />; -}

    Previous

    ColorSwatch

    Next

    Indicator

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    ColorSwatch

    Next

    Indicator

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/indicator/index.html b/core/indicator/index.html index 9dd1e8e85f..2b495afee9 100644 --- a/core/indicator/index.html +++ b/core/indicator/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Indicator

    Display element at the corner of another element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Indicator

    Display element at the corner of another element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Color
    Radius
    Size
    import { Indicator, Avatar } from '@mantine/core';
 
 function Demo() {
@@ -85,4 +85,4 @@
       <Button onClick={toggle}>Toggle indicator</Button>
     </Stack>
   );
-}

    Previous

    Image

    Next

    Kbd

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Image

    Next

    Kbd

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/input/index.html b/core/input/index.html index 0f30f904a5..be3d1803da 100644 --- a/core/input/index.html +++ b/core/input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Input

    Base component to create custom inputs

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Disclaimer

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Input

    Base component to create custom inputs

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Disclaimer

    !important: In most cases, you should not use Input in your application. Input is a base for other inputs and was not designed to be used directly. Use Input to create custom inputs, for other cases prefer TextInput @@ -415,4 +415,4 @@ <Input id={id} /> </Input.Wrapper> ); -}

    Previous

    FileInput

    Next

    JsonInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    FileInput

    Next

    JsonInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/json-input/index.html b/core/json-input/index.html index 68960e5f0b..4b39f2dfb9 100644 --- a/core/json-input/index.html +++ b/core/json-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    JsonInput

    Capture json data from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    JsonInput

    Capture json data from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    JsonInput is based on Textarea component, it includes json validation logic and option to format input value on blur:

    import { JsonInput } from '@mantine/core';
@@ -80,4 +80,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <JsonInput label="My input" />;
-}

    Previous

    Input

    Next

    NativeSelect

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Input

    Next

    NativeSelect

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/kbd/index.html b/core/kbd/index.html index b30c6ccefe..faa63326e5 100644 --- a/core/kbd/index.html +++ b/core/kbd/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Kbd

    Display keyboard key

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Kbd

    Display keyboard key

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    ⌘ + Shift + M
    import { Kbd } from '@mantine/core';
 
 function Demo() {
@@ -13,4 +13,4 @@
       <Kbd>⌘</Kbd> + <Kbd>Shift</Kbd> + <Kbd>M</Kbd>
     </div>
   );
-}

    Previous

    Indicator

    Next

    NumberFormatter

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Indicator

    Next

    NumberFormatter

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/list/index.html b/core/list/index.html index 1b6d854c3c..fbfef89993 100644 --- a/core/list/index.html +++ b/core/list/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    List

    Display ordered or unordered list

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    List

    Display ordered or unordered list

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    • Clone or download repository from GitHub
    • Install dependencies with yarn
    • To start development server run npm start command
    • Run tests to make sure your changes do not break the build
    • Submit a pull request once you are done
    Type
    Size
    import { List } from '@mantine/core';
 
 function Demo() {
@@ -85,4 +85,4 @@
       <List.Item>First order item</List.Item>
     </List>
   );
-}

    Previous

    Highlight

    Next

    Mark

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Highlight

    Next

    Mark

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/loader/index.html b/core/loader/index.html index 44ae538faf..e02c0457e0 100644 --- a/core/loader/index.html +++ b/core/loader/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Loader

    Indicate loading state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Loader

    Indicate loading state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Loader component supports 3 types of loaders: oval, bars and dots by default. All loaders are animated with CSS for better performance.

    Color
    Size
    Type
    import { Loader } from '@mantine/core';
@@ -102,4 +102,4 @@
       </Group>
     </>
   );
-}

    Previous

    Alert

    Next

    Notification

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Alert

    Next

    Notification

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/loading-overlay/index.html b/core/loading-overlay/index.html index 2d800d481c..baee645aa2 100644 --- a/core/loading-overlay/index.html +++ b/core/loading-overlay/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    LoadingOverlay

    An overlay with centered loader

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    LoadingOverlay

    An overlay with centered loader

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    LoadingOverlay renders an overlay with a loader over the parent element with relative position. It is usually used to indicate loading state of forms. Note that elements under overlay are still focusable with keyboard, remember to add additional logic to handle this case.

    @@ -77,4 +77,4 @@ </Group> </> ); -}

    Previous

    HoverCard

    Next

    Menu

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    HoverCard

    Next

    Menu

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/mark/index.html b/core/mark/index.html index 8cb68e0032..68d438f0c9 100644 --- a/core/mark/index.html +++ b/core/mark/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mark

    Highlight part of the text

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mark

    Highlight part of the text

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Highlight this chunk of the text

    Color
    import { Text, Mark } from '@mantine/core';
 
 function Demo() {
@@ -13,4 +13,4 @@
       Highlight <Mark>this chunk</Mark> of the text
     </Text>
   );
-}

    Previous

    List

    Next

    Table

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    List

    Next

    Table

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/menu/index.html b/core/menu/index.html index acc3b6a912..4f8358a776 100644 --- a/core/menu/index.html +++ b/core/menu/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Menu

    Combine a list of secondary actions into single interactive area

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Menu

    Combine a list of secondary actions into single interactive area

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { Menu, Button, Text, rem } from '@mantine/core';
 import {
   IconSettings,
@@ -368,4 +368,4 @@
 }

    Keyboard interactions

    KeyDescriptionCondition
    EscapeCloses dropdownFocus within dropdown
    Space/EnterOpens/closes dropdownFocus on target element
    ArrowUpMoves focus to previous menu itemFocus within dropdown
    ArrowDownMoves focus to next menu itemFocus within dropdown
    HomeMoves focus to first menu itemFocus within dropdown
    EndMoves focus to last menu itemFocus within dropdown
    -

    If you also need to support Tab and Shift + Tab then set menuItemTabIndex={0}.

    Previous

    LoadingOverlay

    Next

    Modal

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    If you also need to support Tab and Shift + Tab then set menuItemTabIndex={0}.

    Previous

    LoadingOverlay

    Next

    Modal

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/modal/index.html b/core/modal/index.html index 6534248ac4..90d90d2107 100644 --- a/core/modal/index.html +++ b/core/modal/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Modal

    An accessible overlay dialog

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Modal

    An accessible overlay dialog

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { useDisclosure } from '@mantine/hooks';
 import { Modal, Button } from '@mantine/core';
 
@@ -552,4 +552,4 @@
       onClose={() => {}}
     />
   );
-}

    Previous

    Menu

    Next

    Overlay

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Menu

    Next

    Overlay

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/multi-select/index.html b/core/multi-select/index.html index 7b2d5c194b..26dcbc23b0 100644 --- a/core/multi-select/index.html +++ b/core/multi-select/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    MultiSelect

    Custom searchable multi select

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Made with Combobox

    MultiSelect is an opinionated component built on top of Combobox component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with Combobox. You can find examples of custom multi select components on the examples page.

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    MultiSelect

    Custom searchable multi select

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Made with Combobox

    MultiSelect is an opinionated component built on top of Combobox component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with Combobox. You can find examples of custom multi select components on the examples page.

    Usage

    MultiSelect provides a way to enter multiple values. MultiSelect is similar to TagsInput, but it does not allow entering custom values.

    @@ -652,4 +652,4 @@ }} /> ); -}

    Previous

    Combobox

    Next

    Pill

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Combobox

    Next

    Pill

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/native-select/index.html b/core/native-select/index.html index 0a44bf02d4..a96cca38eb 100644 --- a/core/native-select/index.html +++ b/core/native-select/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NativeSelect

    Native select element based on Input

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NativeSelect

    Native select element based on Input

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    NativeSelect component supports Input and Input.Wrapper components features and all select element props. NativeSelect documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    Input description

    Variant
    Size
    Radius
    import { NativeSelect } from '@mantine/core';
 
@@ -258,4 +258,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <NativeSelect label="My input" />;
-}

    Previous

    JsonInput

    Next

    NumberInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    JsonInput

    Next

    NumberInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/nav-link/index.html b/core/nav-link/index.html index ca6be99358..9e0839c4b2 100644 --- a/core/nav-link/index.html +++ b/core/nav-link/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NavLink

    Navigation link

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NavLink

    Navigation link

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    With icon
    With right section
    Disabled
    3
    With descriptionAdditional information
    Active subtle
    Active light
    Active filled
    import { Badge, NavLink } from '@mantine/core';
 import { IconHome2, IconGauge, IconChevronRight, IconActivity, IconCircleOff } from '@tabler/icons-react';
 
@@ -177,4 +177,4 @@
 function Demo() {
   const ref = useRef<HTMLAnchorElement>(null);
   return <NavLink ref={ref} />;
-}

    Previous

    Burger

    Next

    Pagination

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Burger

    Next

    Pagination

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/notification/index.html b/core/notification/index.html index 4c07278ef5..615bcc9b70 100644 --- a/core/notification/index.html +++ b/core/notification/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Notification

    Show dynamic notifications and alerts to user, part of notifications system

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Notification

    Show dynamic notifications and alerts to user, part of notifications system

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Notification is a base component for notification system. Build your own or use @mantine/notifications package.

    Color
    Radius
    import { Notification } from '@mantine/core';
@@ -53,4 +53,4 @@
       closeButtonProps={{ 'aria-label': 'Hide notification' }}
     />
   );
-}

    Previous

    Loader

    Next

    Progress

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Loader

    Next

    Progress

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/number-formatter/index.html b/core/number-formatter/index.html index 6f9db4b623..110d1a319a 100644 --- a/core/number-formatter/index.html +++ b/core/number-formatter/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NumberFormatter

    Format number with thousands/decimal separators and suffix/prefix

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NumberFormatter

    Format number with thousands/decimal separators and suffix/prefix

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Use NumberFormatter to format numbers. It supports the same formatting related props as NumberInput component.

    $ 1,000,000
    import { NumberFormatter } from '@mantine/core';
@@ -52,4 +52,4 @@
 
 function Demo() {
   return <NumberFormatter value={5 / 3} decimalScale={2} />;
-}

    Previous

    Kbd

    Next

    Spoiler

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Kbd

    Next

    Spoiler

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/number-input/index.html b/core/number-input/index.html index 1606916f0b..bcf988a858 100644 --- a/core/number-input/index.html +++ b/core/number-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NumberInput

    Capture number from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NumberInput

    Capture number from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    NumberInput is based on react-number-format. It supports most of the props from the NumericFormat component in the original package.

    NumberInput component supports Input and Input.Wrapper components features and all input element props. NumberInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    @@ -331,4 +331,4 @@ // Accessible input – it has associated label element function Demo() { return <NumberInput label="My input" />; -}

    Previous

    NativeSelect

    Next

    PasswordInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    NativeSelect

    Next

    PasswordInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/overlay/index.html b/core/overlay/index.html index 75ddb5169d..6bb5694685 100644 --- a/core/overlay/index.html +++ b/core/overlay/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Overlay

    Overlays parent element with div element with any color and opacity

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Overlay

    Overlays parent element with div element with any color and opacity

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Overlay takes 100% of width and height of parent container or viewport if fixed prop is set. Set color and backgroundOpacity props to change Overlay background-color. Note that backgroundOpacity prop does not change CSS opacity property, it changes background-color. For example, if you set @@ -85,4 +85,4 @@ }

    Polymorphic components with TypeScript

    Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, OverlayProps does not extend React.ComponentPropsWithoutRef'<'div'>' although div is the default element.

    If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support component prop), then your component props interface should extend HTML element props, for example: 

    import type { OverlayProps, ElementProps } from '@mantine/core';
 
 interface MyOverlayProps extends OverlayProps,
-  ElementProps<'a', keyof OverlayProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    Modal

    Next

    Popover

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file + ElementProps<'a', keyof OverlayProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    Modal

    Next

    Popover

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/pagination/index.html b/core/pagination/index.html index cb2e5cf1e7..935ca9b712 100644 --- a/core/pagination/index.html +++ b/core/pagination/index.html @@ -4,14 +4,14 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Pagination

    Display active page and navigate between multiple pages

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Pagination

    Display active page and navigate between multiple pages

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Color
    Size
    Radius
    import { Pagination } from '@mantine/core';
 
 function Demo() {
   return <Pagination total={10} />;
 }

    Example with chunked content

    -

    id: 0, name: mantine-kcur8tfxn

    id: 1, name: mantine-w2ch9ys8p

    id: 2, name: mantine-ekfpzywav

    id: 3, name: mantine-1ywvyt6jt

    id: 4, name: mantine-99kfezy08

    import { useState } from 'react';
+
    id: 0, name: mantine-eztw6qjxi
    id: 1, name: mantine-58rytp1ut
    id: 2, name: mantine-hndldzzuv
    id: 3, name: mantine-nj28kokn5
    id: 4, name: mantine-27ve48gy3
    import { useState } from 'react';
 import { randomId } from '@mantine/hooks';
 import { Pagination, Text } from '@mantine/core';
 
@@ -233,4 +233,4 @@
 }
    
 
    use-pagination hook
    
 
    If you need more flexibility @mantine/hooks package exports use-pagination hook,
-you can use it to create custom pagination components.
    Previous
    NavLink
    Next
    Stepper
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +you can use it to create custom pagination components.

    Previous

    NavLink

    Next

    Stepper

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/paper/index.html b/core/paper/index.html index e851a7dbb1..f32f3ef32e 100644 --- a/core/paper/index.html +++ b/core/paper/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Paper

    Renders white or dark background depending on color scheme

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Paper

    Renders white or dark background depending on color scheme

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Paper is the most basic ui component

    Use it to create cards, dropdowns, modals and other components that require background with shadow

    Shadow
    Radius
    import { Text, Paper } from '@mantine/core';
 
 function Demo() {
@@ -30,4 +30,4 @@
 }

    Polymorphic components with TypeScript

    Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, PaperProps does not extend React.ComponentPropsWithoutRef'<'div'>' although div is the default element.

    If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support component prop), then your component props interface should extend HTML element props, for example: 

    import type { PaperProps, ElementProps } from '@mantine/core';
 
 interface MyPaperProps extends PaperProps,
-  ElementProps<'button', keyof PaperProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    FocusTrap

    Next

    Portal

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file + ElementProps<'button', keyof PaperProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    FocusTrap

    Next

    Portal

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/password-input/index.html b/core/password-input/index.html index 1cf3d6ae1d..781ca83695 100644 --- a/core/password-input/index.html +++ b/core/password-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    PasswordInput

    Capture password data from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    PasswordInput

    Capture password data from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    PasswordInput component supports Input and Input.Wrapper components features and all input element props. PasswordInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    Input description

    Variant
    Size
    Radius
    import { PasswordInput } from '@mantine/core';
 
@@ -251,4 +251,4 @@
       }}
     />
   );
-}

    Previous

    NumberInput

    Next

    PinInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    NumberInput

    Next

    PinInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/pill/index.html b/core/pill/index.html index 13286577db..2a43976bcc 100644 --- a/core/pill/index.html +++ b/core/pill/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Pill

    Removable and non-removable tags

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Pill

    Removable and non-removable tags

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    React
    Size
    import { Pill } from '@mantine/core';
 
 function Demo() {
@@ -37,4 +37,4 @@
  */
    Test pill
    Component Styles API
    Hover over selectors to highlight corresponding elements
    /*
  * Hover over selectors to apply outline styles
  *
- */
    Previous
    MultiSelect
    Next
    PillsInput
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file + */

    Previous

    MultiSelect

    Next

    PillsInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/pills-input/index.html b/core/pills-input/index.html index d6fcaf17f4..73c086d672 100644 --- a/core/pills-input/index.html +++ b/core/pills-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    PillsInput

    Base component for custom tags inputs and multi selects

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    PillsInput

    Base component for custom tags inputs and multi selects

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    PillsInput is a utility component that can be used to create custom tag inputs, multi selects and other similar components. By itself it does not include any logic, it only renders given children. Usually, PillsInput is used in combination with Pill component.

    @@ -153,4 +153,4 @@ <PillsInput.Field /> </PillsInput> ); -}

    Previous

    Pill

    Next

    Select

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Pill

    Next

    Select

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/pin-input/index.html b/core/pin-input/index.html index b0a3c69c9a..7bb25e987e 100644 --- a/core/pin-input/index.html +++ b/core/pin-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    PinInput

    Capture pin code or one time password from the user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    PinInput

    Capture pin code or one time password from the user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Size
    Length
    import { PinInput } from '@mantine/core';
 
 function Demo() {
@@ -42,4 +42,4 @@
 
 function Accessibility() {
   return <PinInput aria-label="One time code" />;
-}

    Previous

    PasswordInput

    Next

    Radio

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    PasswordInput

    Next

    Radio

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/popover/index.html b/core/popover/index.html index bb2666948e..20dcd26db8 100644 --- a/core/popover/index.html +++ b/core/popover/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Popover

    Display popover section relative to given target element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Popover

    Display popover section relative to given target element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { Popover, Text, Button } from '@mantine/core';
 
 function Demo() {
@@ -384,4 +384,4 @@
 
    Uncontrolled Popover will be accessible only when used with button element or component that renders it (Button, ActionIcon, etc.).
 Other elements will not support Space and Enter key presses.
    
 
    Keyboard interactions
    
-
    KeyDescriptionCondition
    EscapeCloses dropdownFocus within dropdown
    Space/EnterOpens/closes dropdownFocus on target element
    Previous
    Overlay
    Next
    Tooltip
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    KeyDescriptionCondition
    EscapeCloses dropdownFocus within dropdown
    Space/EnterOpens/closes dropdownFocus on target element

    Previous

    Overlay

    Next

    Tooltip

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/portal/index.html b/core/portal/index.html index 090bdedc04..545c03faef 100644 --- a/core/portal/index.html +++ b/core/portal/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Portal

    Renders component outside of parent element tree

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Portal

    Renders component outside of parent element tree

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Portal is a wrapper component for ReactDOM.createPortal API. Render any component or element at the end of document.body or at a given element. Modal and Drawer components are wrapped in Portal by default.

    Use Portal to render a component or an element at a different place (defaults to the end of document.body). @@ -69,4 +69,4 @@ </OptionalPortal> </> ); -}

    Previous

    Paper

    Next

    ScrollArea

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Paper

    Next

    ScrollArea

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/progress/index.html b/core/progress/index.html index 41271e666b..a6b55a4ac0 100644 --- a/core/progress/index.html +++ b/core/progress/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Progress

    Give user feedback for status of the task

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Progress

    Give user feedback for status of the task

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Color
    Radius
    Size
    Value
    import { Progress } from '@mantine/core';
 
 function Demo() {
@@ -165,4 +165,4 @@
       <Progress.Section aria-label="Uploading progress" value={10} />
     </Progress.Root>
   );
-}

    Previous

    Notification

    Next

    RingProgress

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Notification

    Next

    RingProgress

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/radio/index.html b/core/radio/index.html index 3696846d68..ddadf12005 100644 --- a/core/radio/index.html +++ b/core/radio/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Radio

    Wrapper for input type radio

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Radio

    Wrapper for input type radio

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Label position
    Size
    Color
    Variant
    import { Radio } from '@mantine/core';
 
 function Demo() {
@@ -291,4 +291,4 @@
 // Ok, input is labelled by label element
 function GoodLabel() {
   return <Radio label="My radio" />;
-}

    Previous

    PinInput

    Next

    Rating

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    PinInput

    Next

    Rating

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/rating/index.html b/core/rating/index.html index fb857cda02..d5c3f85e5b 100644 --- a/core/rating/index.html +++ b/core/rating/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Rating

    Pick and display rating

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Rating

    Pick and display rating

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Color
    Size
    Count
    import { Rating } from '@mantine/core';
 
 function Demo() {
@@ -106,4 +106,4 @@
 
 function Demo() {
   return <Rating emptySymbol={getEmptyIcon} fullSymbol={getFullIcon} highlightSelectedOnly />;
-}

    Previous

    Radio

    Next

    SegmentedControl

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Radio

    Next

    SegmentedControl

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/ring-progress/index.html b/core/ring-progress/index.html index d71982c749..7da1ecc6ff 100644 --- a/core/ring-progress/index.html +++ b/core/ring-progress/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    RingProgress

    Give user feedback for status of the task with circle diagram

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    RingProgress

    Give user feedback for status of the task with circle diagram

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Set sections prop to an array of:

    • value – number between 0 and 100 – amount of space filled by segment
      • @@ -127,4 +127,4 @@ /> </> ); -}

    Previous

    Progress

    Next

    SemiCircleProgress

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Progress

    Next

    SemiCircleProgress

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/scroll-area/index.html b/core/scroll-area/index.html index 717f823902..aa9be53d55 100644 --- a/core/scroll-area/index.html +++ b/core/scroll-area/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ScrollArea

    Area with custom scrollbars

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ScrollArea

    Area with custom scrollbars

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    ScrollArea component supports the following props:

    • type defines scrollbars behavior: @@ -352,4 +352,4 @@ </Popover.Dropdown> </Popover> ); -}

    Previous

    Portal

    Next

    Transition

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Portal

    Next

    Transition

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/segmented-control/index.html b/core/segmented-control/index.html index b0eccd8342..2644e8fb78 100644 --- a/core/segmented-control/index.html +++ b/core/segmented-control/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    SegmentedControl

    A linear set of two or more segments

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    SegmentedControl

    A linear set of two or more segments

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Orientation
    Size
    Radius
    import { SegmentedControl } from '@mantine/core';
 
 function Demo() {
@@ -249,4 +249,4 @@
       ]}
     />
   );
-}

    Previous

    Rating

    Next

    Slider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Rating

    Next

    Slider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/select/index.html b/core/select/index.html index 1623ce2706..3c26b8b2a6 100644 --- a/core/select/index.html +++ b/core/select/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Select

    Custom searchable select

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Made with Combobox

    Select is an opinionated component built on top of Combobox component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with Combobox. You can find examples of custom select components on the examples page.

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Select

    Custom searchable select

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Made with Combobox

    Select is an opinionated component built on top of Combobox component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with Combobox. You can find examples of custom select components on the examples page.

    Usage

    Select allows capturing user input based on suggestions from the list. Unlike Autocomplete, Select does not allow entering custom values.

    @@ -668,4 +668,4 @@ }} /> ); -}

    Previous

    PillsInput

    Next

    TagsInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    PillsInput

    Next

    TagsInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/semi-circle-progress/index.html b/core/semi-circle-progress/index.html index 2c996caf15..fd84e9d4d8 100644 --- a/core/semi-circle-progress/index.html +++ b/core/semi-circle-progress/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    SemiCircleProgress

    Represent progress with semi circle diagram

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    SemiCircleProgress

    Represent progress with semi circle diagram

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Label

    Fill direction
    Orientation
    Filled segment color
    Size
    Thickness
    Value
    import { SemiCircleProgress } from '@mantine/core';
 
 function Demo() {
@@ -59,4 +59,4 @@
       </Button>
     </>
   );
-}

    Previous

    RingProgress

    Next

    Skeleton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    RingProgress

    Next

    Skeleton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/simple-grid/index.html b/core/simple-grid/index.html index 7e41762652..809aa13637 100644 --- a/core/simple-grid/index.html +++ b/core/simple-grid/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    SimpleGrid

    Responsive grid in which each item takes equal amount of space

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    SimpleGrid

    Responsive grid in which each item takes equal amount of space

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    SimpleGrid is a responsive grid system with equal-width columns. It uses CSS grid layout. If you need to set different widths for columns, use Grid component instead.

    @@ -95,4 +95,4 @@ If you need to support older browsers, use Grid (flexbox based) component instead.

    When type="container" is set, SimpleGrid uses container queries. Since February 2023, container queries are supported in all modern browsers. If you need to support older browsers, -do not use container queries option.

    Previous

    Group

    Next

    Space

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +do not use container queries option.

    Previous

    Group

    Next

    Space

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/skeleton/index.html b/core/skeleton/index.html index a9f71ccd0e..f7bced3910 100644 --- a/core/skeleton/index.html +++ b/core/skeleton/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Skeleton

    Indicate content loading state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Skeleton

    Indicate content loading state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Use Skeleton to create a placeholder for loading content. Skeleton support the following props:

    • height – height – any valid CSS value
      • @@ -46,4 +46,4 @@ </Button> </> ); -}

    Previous

    SemiCircleProgress

    Next

    Affix

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    SemiCircleProgress

    Next

    Affix

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/slider/index.html b/core/slider/index.html index a2a030caa7..c746f6bdba 100644 --- a/core/slider/index.html +++ b/core/slider/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Slider

    Slider and RangeSlider components

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Slider

    Slider and RangeSlider components

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    20%
    50%
    80%
    Color
    Size
    Radius
    import { Slider } from '@mantine/core';
 
 function Demo() {
@@ -395,4 +395,4 @@
   );
 }

    Keyboard interactions

    -
    KeyDescription
    ArrowRight/ArrowUpIncreases slider value by one step
    ArrowLeft/ArrowDownDecreases slider value by one step
    HomeSets slider value to min value
    EndSets slider value to max value

    Previous

    SegmentedControl

    Next

    Switch

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    KeyDescription
    ArrowRight/ArrowUpIncreases slider value by one step
    ArrowLeft/ArrowDownDecreases slider value by one step
    HomeSets slider value to min value
    EndSets slider value to max value

    Previous

    SegmentedControl

    Next

    Switch

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/space/index.html b/core/space/index.html index d9c5b3b8ac..60d3aa7193 100644 --- a/core/space/index.html +++ b/core/space/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Space

    Add horizontal or vertical spacing from theme

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Space

    Add horizontal or vertical spacing from theme

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Use Space component to add horizontal or vertical spacing between elements:

    First line

    Second line

    H
    import { Text, Space } from '@mantine/core';
 
@@ -56,4 +56,4 @@
       <div>Second line</div>
     </>
   );
-}

    Previous

    SimpleGrid

    Next

    Stack

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    SimpleGrid

    Next

    Stack

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/spoiler/index.html b/core/spoiler/index.html index ab99d8df30..f7bd5f138b 100644 --- a/core/spoiler/index.html +++ b/core/spoiler/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Spoiler

    Hide long sections of content under a spoiler

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Spoiler

    Hide long sections of content under a spoiler

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Use Spoiler to hide long section of content. Set maxHeight prop to control point at which content will be hidden under spoiler and show/hide control appears. If the content height is less than maxHeight, the spoiler will just render children.

    @@ -79,4 +79,4 @@ showLabel="Show" /> ); -}

    Previous

    NumberFormatter

    Next

    ThemeIcon

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    NumberFormatter

    Next

    ThemeIcon

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/stack/index.html b/core/stack/index.html index 0bf7e7b681..444684ad15 100644 --- a/core/stack/index.html +++ b/core/stack/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Stack

    Compose elements and components in a vertical flex container

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Stack

    Compose elements and components in a vertical flex container

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Stack is a vertical flex container. If you need a horizontal flex container, use Group component instead. If you need to have full control over flex container properties, use Flex component.

    Gap
    import { Stack, Button } from '@mantine/core';
@@ -23,4 +23,4 @@
     </Stack>
   );
 }
    -

    Browser support

    Stack uses flexbox gap to add spacing between children. In older browsers, Stack children may not have spacing. You can install PostCSS flex-gap-polyfill to add support for older browsers.

    Previous

    Space

    Next

    AngleSlider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Browser support

    Stack uses flexbox gap to add spacing between children. In older browsers, Stack children may not have spacing. You can install PostCSS flex-gap-polyfill to add support for older browsers.

    Previous

    Space

    Next

    AngleSlider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/stepper/index.html b/core/stepper/index.html index 8cd67a5c1c..39803880a4 100644 --- a/core/stepper/index.html +++ b/core/stepper/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Stepper

    Display content divided into a steps sequence

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Stepper

    Display content divided into a steps sequence

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Step 2 content: Verify email
    import { useState } from 'react';
 import { Stepper, Button, Group } from '@mantine/core';
 
@@ -410,4 +410,4 @@
       <Stepper.Step aria-label="Create an account" />
     </Stepper>
   );
-}

    Previous

    Pagination

    Next

    Tabs

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Pagination

    Next

    Tabs

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/switch/index.html b/core/switch/index.html index a219f7265c..c98f09c206 100644 --- a/core/switch/index.html +++ b/core/switch/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Switch

    Capture boolean input from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Switch

    Capture boolean input from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Color
    Label position
    Size
    Radius
    import { Switch } from '@mantine/core';
 
 function Demo() {
@@ -198,4 +198,4 @@
 // -> ok, input has associated label
 function AlsoGood() {
   return <Switch label="I agree to everything" />;
-}

    Previous

    Slider

    Next

    Textarea

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Slider

    Next

    Textarea

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/table/index.html b/core/table/index.html index 20d4b26dbd..7b52d64cff 100644 --- a/core/table/index.html +++ b/core/table/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Table

    Render table with theme styles

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Table

    Render table with theme styles

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Table data for all examples:

    const elements = [
   { position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
@@ -272,4 +272,4 @@
       <Table.Tbody>{rows}</Table.Tbody>
     </Table>
   );
-}

    Previous

    Mark

    Next

    Text

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Mark

    Next

    Text

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/tabs/index.html b/core/tabs/index.html index a47939716e..f6d7aeb98f 100644 --- a/core/tabs/index.html +++ b/core/tabs/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Tabs

    Switch between different views

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Tabs

    Switch between different views

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Color
    Variant
    Radius
    Orientation
    import { Tabs, rem } from '@mantine/core';
 import { IconPhoto, IconMessageCircle, IconSettings } from '@tabler/icons-react';
 
@@ -433,4 +433,4 @@
   );
 }

    Keyboard interactions

    -
    KeyDescriptionCondition
    ArrowRightFocuses and activates next tab that is not disabledorientation="horizontal"
    ArrowLeftFocuses and activates previous tab that is not disabledorientation="horizontal"
    ArrowDownFocuses and activates next tab that is not disabledorientation="vertical"
    ArrowUpFocuses and activates previous tab that is not disabledorientation="vertical"
    HomeFocuses and activates first tab–
    EndFocuses and activates last tab–

    Previous

    Stepper

    Next

    Tree

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    KeyDescriptionCondition
    ArrowRightFocuses and activates next tab that is not disabledorientation="horizontal"
    ArrowLeftFocuses and activates previous tab that is not disabledorientation="horizontal"
    ArrowDownFocuses and activates next tab that is not disabledorientation="vertical"
    ArrowUpFocuses and activates previous tab that is not disabledorientation="vertical"
    HomeFocuses and activates first tab–
    EndFocuses and activates last tab–

    Previous

    Stepper

    Next

    Tree

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/tags-input/index.html b/core/tags-input/index.html index e4f011c8b4..24aaf12db3 100644 --- a/core/tags-input/index.html +++ b/core/tags-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    TagsInput

    Capture a list of values from user with free input and suggestions

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Made with Combobox

    TagsInput is an opinionated component built on top of Combobox component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with Combobox. You can find examples of custom tags input components on the examples page.

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    TagsInput

    Capture a list of values from user with free input and suggestions

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Made with Combobox

    TagsInput is an opinionated component built on top of Combobox component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with Combobox. You can find examples of custom tags input components on the examples page.

    Usage

    TagsInput provides a way to enter multiple values. It can be used with suggestions or without them. TagsInput is similar to MultiSelect, but it allows entering custom values.

    @@ -616,4 +616,4 @@ }} /> ); -}

    Previous

    Select

    Next

    ActionIcon

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Select

    Next

    ActionIcon

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/text-input/index.html b/core/text-input/index.html index 496251e357..f31a63d156 100644 --- a/core/text-input/index.html +++ b/core/text-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    TextInput

    Capture string input from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    TextInput

    Capture string input from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    TextInput component supports Input and Input.Wrapper components features and all input element props. TextInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    Input description

    Variant
    Size
    Radius
    import { TextInput } from '@mantine/core';
 
@@ -106,4 +106,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <TextInput label="My input" />;
-}

    Previous

    Textarea

    Next

    Autocomplete

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Textarea

    Next

    Autocomplete

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/text/index.html b/core/text/index.html index ba86e901ed..cc761078b3 100644 --- a/core/text/index.html +++ b/core/text/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Text

    Display text

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Text

    Display text

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Extra small text

    Small text

    Default text

    Large text

    Extra large text

    Semibold

    Bold

    Italic

    Underlined

    Strikethrough

    Dimmed text

    Blue text

    Teal 4 text

    Uppercase

    capitalized text

    Aligned to center

    Aligned to right

    import { Text } from '@mantine/core';
 
 function Demo() {
@@ -119,4 +119,4 @@
       <Text component="span">Same as above</Text>
     </>
   );
-}

    Previous

    Table

    Next

    Title

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Table

    Next

    Title

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/textarea/index.html b/core/textarea/index.html index d6feec5852..6715f23463 100644 --- a/core/textarea/index.html +++ b/core/textarea/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Textarea

    Autosize or regular textarea

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Textarea

    Autosize or regular textarea

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Textarea component supports Input and Input.Wrapper components features and all textarea element props. Textarea documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    Input description

    Variant
    Size
    Radius
    import { Textarea } from '@mantine/core';
 
@@ -115,4 +115,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <Textarea label="My input" />;
-}

    Previous

    Switch

    Next

    TextInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Switch

    Next

    TextInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/theme-icon/index.html b/core/theme-icon/index.html index ac744a3bea..b5169a136d 100644 --- a/core/theme-icon/index.html +++ b/core/theme-icon/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ThemeIcon

    Render icon inside element with theme colors

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ThemeIcon

    Render icon inside element with theme colors

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Radius
    Size
    Color
    import { ThemeIcon } from '@mantine/core';
 import { IconPhoto } from '@tabler/icons-react';
 
@@ -120,4 +120,4 @@
       </ThemeIcon>
     </Group>
   );
-}

    Previous

    Spoiler

    Next

    Timeline

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Spoiler

    Next

    Timeline

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/timeline/index.html b/core/timeline/index.html index ae9745e147..5d310f2018 100644 --- a/core/timeline/index.html +++ b/core/timeline/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Timeline

    Display list of events in chronological order

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Timeline

    Display list of events in chronological order

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    New branch

    You've created new branch fix-notifications from master

    2 hours ago

    Commits

    You've pushed 23 commits to fix-notifications branch

    52 minutes ago

    Pull request

    You've submitted a pull request Fix incorrect notification message (#187)

    34 minutes ago

    Code review

    Robert Gluesticker left a code review on your pull request

    12 minutes ago

    import { Timeline, Text } from '@mantine/core';
 import { IconGitBranch, IconGitPullRequest, IconGitCommit, IconMessageDots } from '@tabler/icons-react';
 
@@ -128,4 +128,4 @@
       <Timeline.Item title="Regular item">Third item</Timeline.Item>
     </Timeline>
   );
-}

    Previous

    ThemeIcon

    Next

    Blockquote

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    ThemeIcon

    Next

    Blockquote

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/title/index.html b/core/title/index.html index 9d9145af11..eda421dfc5 100644 --- a/core/title/index.html +++ b/core/title/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Title

    h1-h6 heading

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Title

    h1-h6 heading

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Use Title component to render h1-h6 headings with Mantine theme styles. By default, Title has no margins and paddings. You can change font-size, font-weight and line-height per heading with theme.headings.

    @@ -86,4 +86,4 @@ </Title> </Box> ) -}

    Previous

    Text

    Next

    TypographyStylesProvider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Text

    Next

    TypographyStylesProvider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/tooltip/index.html b/core/tooltip/index.html index 7b00c86b61..aa7e58a920 100644 --- a/core/tooltip/index.html +++ b/core/tooltip/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Tooltip

    Renders tooltip at given element on mouse over or other event

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Tooltip

    Renders tooltip at given element on mouse over or other event

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { Tooltip, Button } from '@mantine/core';
 
 function Demo() {
@@ -342,4 +342,4 @@
       <Button>Button with tooltip</Button>
     </Tooltip>
   );
-}

    Previous

    Popover

    Next

    Accordion

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Popover

    Next

    Accordion

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/transition/index.html b/core/transition/index.html index 18cbe16759..642bee11d5 100644 --- a/core/transition/index.html +++ b/core/transition/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Transition

    Animate presence of component with pre-made animations

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Premade transitions

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Transition

    Animate presence of component with pre-made animations

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Premade transitions

    Mantine includes several premade transitions:

    fade
    fade-up
    fade-down
    fade-left
    fade-right
    scale
    scale-y
    scale-x
    skew-up
    skew-down
    rotate-left
    rotate-right
    slide-down
    slide-up
    slide-left
    slide-right
    pop
    pop-bottom-left
    pop-bottom-right
    pop-top-left
    pop-top-right

    To use one of them set transition property to one of these values:

    @@ -108,4 +108,4 @@ </Transition> </Flex> ); -}

    Previous

    ScrollArea

    Next

    VisuallyHidden

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    ScrollArea

    Next

    VisuallyHidden

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/tree/index.html b/core/tree/index.html index 58fba449d8..7ef39022d3 100644 --- a/core/tree/index.html +++ b/core/tree/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Tree

    Display a Tree structure

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Tree

    Display a Tree structure

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Tree component is used to display hierarchical data. Tree component has minimal styling by default, you can customize styles with Styles API.

    • src
    • node_modules
    • package.json
    • tsconfig.json
    import { Tree } from '@mantine/core';
@@ -436,4 +436,4 @@
       renderNode={(payload) => <Leaf {...payload} />}
     />
   );
-}

    Previous

    Tabs

    Next

    Alert

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Tabs

    Next

    Alert

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/typography-styles-provider/index.html b/core/typography-styles-provider/index.html index 06e2c66ddd..1ac4afc499 100644 --- a/core/typography-styles-provider/index.html +++ b/core/typography-styles-provider/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    TypographyStylesProvider

    Styles provider for html content

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    TypographyStylesProvider

    Styles provider for html content

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Mantine does not include typography global styles. Use TypographyStylesProvider to add typography styles to your html content:

    import { TypographyStylesProvider } from '@mantine/core';
@@ -105,4 +105,4 @@ 
    Heading 6
    
   return <Avatar src={image} alt="it's me" />;
 }
    -
    Element positionElement nameSymbolAtomic mass
    6CarbonC12.011
    7NitrogenN14.007
    39YttriumY88.906
    56BariumBa137.33
    58CeriumCe140.12

    Previous

    Title

    Next

    Box

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    Element positionElement nameSymbolAtomic mass
    6CarbonC12.011
    7NitrogenN14.007
    39YttriumY88.906
    56BariumBa137.33
    58CeriumCe140.12

    Previous

    Title

    Next

    Box

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/unstyled-button/index.html b/core/unstyled-button/index.html index db06ad9189..0af57dab17 100644 --- a/core/unstyled-button/index.html +++ b/core/unstyled-button/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    UnstyledButton

    Unstyled polymorphic button

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    UnstyledButton

    Unstyled polymorphic button

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    UnstyledButton resets default button styles, it is used as a base for all other button components. You can use it to as a base for custom polymorphic buttons.

    @@ -27,4 +27,4 @@ function Demo() { const ref = useRef<HTMLButtonElement>(null); return <UnstyledButton ref={ref} />; -}

    Previous

    FileButton

    Next

    Anchor

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    FileButton

    Next

    Anchor

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/visually-hidden/index.html b/core/visually-hidden/index.html index 839048ff90..3792d66ba0 100644 --- a/core/visually-hidden/index.html +++ b/core/visually-hidden/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    VisuallyHidden

    Hide element visually but keep it accessible for screen readers

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    VisuallyHidden

    Hide element visually but keep it accessible for screen readers

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    VisuallyHidden is a utility component that hides content visually but leaves it available to screen readers.

    For example, it can be used with ActionIcon component:

    import { IconHeart } from '@tabler/icons-react';
@@ -17,4 +17,4 @@
       <VisuallyHidden>Like post</VisuallyHidden>
     </ActionIcon>
   );
-}

    Previous

    Transition

    Next

    Getting started

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Transition

    Next

    Getting started

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/calendar/index.html b/dates/calendar/index.html index b2331c093a..4c1c7577a6 100644 --- a/dates/calendar/index.html +++ b/dates/calendar/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Calendar

    Base component for custom date pickers

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Calendar

    Base component for custom date pickers

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    Use Calendar component to create custom date pickers if DatePicker component does not meet your requirements. Calendar supports all DatePicker props and some other props that are listed in props table – check it out to learn about all component features.

    @@ -113,4 +113,4 @@ }} /> ); -}

    Previous

    DatesProvider

    Next

    DateInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    DatesProvider

    Next

    DateInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/date-input/index.html b/dates/date-input/index.html index 7ab1ee75a1..0c14a16d07 100644 --- a/dates/date-input/index.html +++ b/dates/date-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DateInput

    Free form date input

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    DatePicker props

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DateInput

    Free form date input

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    DatePicker props

    DateInput supports most of the DatePicker props, read through DatePicker documentation to learn about all component features that are not listed on this page.

    Usage

    @@ -75,7 +75,7 @@

    Allow clear

    Set clearable prop to allow removing value from the input. Input will be cleared if user selects the same date in dropdown or clears input value:

    -
    import { DateInput } from '@mantine/dates';
+
    import { DateInput } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -140,4 +140,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <DateInput label="My input" />;
-}
    Previous
    Calendar
    Next
    DateTimePicker
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Calendar

    Next

    DateTimePicker

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/date-picker-input/index.html b/dates/date-picker-input/index.html index 1ecf163b2b..f2ea10b431 100644 --- a/dates/date-picker-input/index.html +++ b/dates/date-picker-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DatePickerInput

    Date, multiple dates and dates range picker input

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    DatePicker props

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DatePickerInput

    Date, multiple dates and dates range picker input

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    DatePicker props

    DatePickerInput supports most of the DatePicker props, read through DatePicker documentation to learn about all component features that are not listed on this page.

    Usage

    @@ -131,7 +131,7 @@

    Clearable

    Set clearable prop to display clear button in the right section. Note that if you set rightSection prop, clear button will not be displayed.

    -
    import { DatePickerInput } from '@mantine/dates';
+
    import { DatePickerInput } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -212,4 +212,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <DatePickerInput label="My input" />;
-}
    Previous
    DatePicker
    Next
    MonthPicker
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    DatePicker

    Next

    MonthPicker

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/date-picker/index.html b/dates/date-picker/index.html index 672a4327bd..c6631218f4 100644 --- a/dates/date-picker/index.html +++ b/dates/date-picker/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DatePicker

    Inline date, multiple dates and dates range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DatePicker

    Inline date, multiple dates and dates range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
@@ -366,4 +366,4 @@
 }

    Keyboard interactions

    Note that the following events will only trigger if focus is on date control.

    -
    KeyDescription
    ArrowRightFocuses next non-disabled date
    ArrowLeftFocuses previous non-disabled date
    ArrowDownFocuses next non-disabled date in the same column
    ArrowUpFocuses previous non-disabled date in the same column

    Previous

    DateTimePicker

    Next

    DatePickerInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    KeyDescription
    ArrowRightFocuses next non-disabled date
    ArrowLeftFocuses previous non-disabled date
    ArrowDownFocuses next non-disabled date in the same column
    ArrowUpFocuses previous non-disabled date in the same column

    Previous

    DateTimePicker

    Next

    DatePickerInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/date-time-picker/index.html b/dates/date-time-picker/index.html index ba44464c5f..e08debd64d 100644 --- a/dates/date-time-picker/index.html +++ b/dates/date-time-picker/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DateTimePicker

    Capture datetime from the user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    DatePicker props

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DateTimePicker

    Capture datetime from the user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    DatePicker props

    DateTimePicker supports most of the DatePicker props, read through DatePicker documentation to learn about all component features that are not listed on this page.

    Usage

    @@ -54,7 +54,7 @@

    Clearable

    Set clearable prop to display clear button in the right section. Note that if you set rightSection prop, clear button will not be displayed.

    -
    import { DateTimePicker } from '@mantine/dates';
+
    import { DateTimePicker } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -102,4 +102,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <DateTimePicker label="My input" />;
-}
    Previous
    DateInput
    Next
    DatePicker
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    DateInput

    Next

    DatePicker

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/dates-provider/index.html b/dates/dates-provider/index.html index d047a65bb9..c83c6c5ecb 100644 --- a/dates/dates-provider/index.html +++ b/dates/dates-provider/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DatesProvider

    Settings provider for @mantine/dates components

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DatesProvider

    Settings provider for @mantine/dates components

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    DatesProvider component lets you set various settings that are shared across all components exported from @mantine/dates package. DatesProvider supports the following settings:

      @@ -52,4 +52,4 @@ <DateTimePicker label="Pick a Date" placeholder="Pick a Date" defaultValue={new Date('2000-10-03 02:10:00Z')} /> </DatesProvider> ); -}

    Previous

    Getting started

    Next

    Calendar

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Getting started

    Next

    Calendar

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/getting-started/index.html b/dates/getting-started/index.html index 7721632aba..05c019b4ba 100644 --- a/dates/getting-started/index.html +++ b/dates/getting-started/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Getting started

    Get started with @mantine/dates package

    Docs

    Edit this page

    Package

    @mantine/dates

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Getting started

    Get started with @mantine/dates package

    Docs

    Edit this page

    Package

    @mantine/dates

    License

    MIT

    Installation

    yarn add @mantine/dates dayjs

    After installation import package styles at the root of your application:

    import '@mantine/dates/styles.css';
    @@ -79,4 +79,4 @@ {/* Your app */} </DatesProvider> ); -}

    Previous

    VisuallyHidden

    Next

    DatesProvider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    VisuallyHidden

    Next

    DatesProvider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/month-picker-input/index.html b/dates/month-picker-input/index.html index e01235f25c..792fc35486 100644 --- a/dates/month-picker-input/index.html +++ b/dates/month-picker-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    MonthPickerInput

    Month, multiple months and months range picker input

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    MonthPicker props

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    MonthPickerInput

    Month, multiple months and months range picker input

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    MonthPicker props

    MonthPickerInput supports most of the MonthPicker props, read through MonthPicker documentation to learn about all component features that are not listed on this page.

    Usage

    @@ -131,7 +131,7 @@

    Clearable

    Set clearable prop to display clear button in the right section. Note that if you set rightSection prop, clear button will not be displayed.

    -
    import { MonthPickerInput } from '@mantine/dates';
+
    import { MonthPickerInput } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -212,4 +212,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <MonthPickerInput label="My input" />;
-}
    Previous
    MonthPicker
    Next
    YearPicker
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    MonthPicker

    Next

    YearPicker

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/month-picker/index.html b/dates/month-picker/index.html index 63c89d4be3..0748238322 100644 --- a/dates/month-picker/index.html +++ b/dates/month-picker/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    MonthPicker

    Inline month, multiple months and months range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    MonthPicker

    Inline month, multiple months and months range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    import { useState } from 'react';
 import { MonthPicker } from '@mantine/dates';
 
@@ -258,4 +258,4 @@
 }

    Keyboard interactions

    Note that the following events will only trigger if focus is on month control.

    -
    KeyDescription
    ArrowRightFocuses next non-disabled month
    ArrowLeftFocuses previous non-disabled month
    ArrowDownFocuses next non-disabled month in the same column
    ArrowUpFocuses previous non-disabled month in the same column

    Previous

    DatePickerInput

    Next

    MonthPickerInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    KeyDescription
    ArrowRightFocuses next non-disabled month
    ArrowLeftFocuses previous non-disabled month
    ArrowDownFocuses next non-disabled month in the same column
    ArrowUpFocuses previous non-disabled month in the same column

    Previous

    DatePickerInput

    Next

    MonthPickerInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/time-input/index.html b/dates/time-input/index.html index 742fb9c7ea..f1f63c2663 100644 --- a/dates/time-input/index.html +++ b/dates/time-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    TimeInput

    Capture time from the user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    TimeInput

    Capture time from the user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    TimeInput component supports Input and Input.Wrapper components features and all input element props. TimeInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    Input description

    Variant
    Size
    Radius
    import { TimeInput } from '@mantine/dates';
 
@@ -97,4 +97,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <TimeInput label="My input" />;
-}

    Previous

    YearPickerInput

    Next

    Getting started

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    YearPickerInput

    Next

    Getting started

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/year-picker-input/index.html b/dates/year-picker-input/index.html index 4fb1ac4018..2eab588283 100644 --- a/dates/year-picker-input/index.html +++ b/dates/year-picker-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    YearPickerInput

    Inline year, multiple years and years range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    YearPicker props

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    YearPickerInput

    Inline year, multiple years and years range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    YearPicker props

    YearPickerInput supports most of the YearPicker props, read through YearPicker documentation to learn about all component features that are not listed on this page.

    Usage

    @@ -126,7 +126,7 @@

    Clearable

    Set clearable prop to display clear button in the right section. Note that if you set rightSection prop, clear button will not be displayed.

    -
    import { YearPickerInput } from '@mantine/dates';
+
    import { YearPickerInput } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -207,4 +207,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <YearPickerInput label="My input" />;
-}
    Previous
    YearPicker
    Next
    TimeInput
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    YearPicker

    Next

    TimeInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/year-picker/index.html b/dates/year-picker/index.html index 7a85afa0a2..3f366fb608 100644 --- a/dates/year-picker/index.html +++ b/dates/year-picker/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    YearPicker

    Inline year, multiple years and years range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    YearPicker

    Inline year, multiple years and years range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    2020 – 2029
    import { useState } from 'react';
 import { YearPicker } from '@mantine/dates';
 
@@ -206,4 +206,4 @@
 }

    Keyboard interactions

    Note that the following events will only trigger if focus is on year control.

    -
    KeyDescription
    ArrowRightFocuses next non-disabled year
    ArrowLeftFocuses previous non-disabled year
    ArrowDownFocuses next non-disabled year in the same column
    ArrowUpFocuses previous non-disabled year in the same column

    Previous

    MonthPickerInput

    Next

    YearPickerInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    KeyDescription
    ArrowRightFocuses next non-disabled year
    ArrowLeftFocuses previous non-disabled year
    ArrowDownFocuses next non-disabled year in the same column
    ArrowUpFocuses previous non-disabled year in the same column

    Previous

    MonthPickerInput

    Next

    YearPickerInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/actions/index.html b/form/actions/index.html index 824867c11d..060f4e4d56 100644 --- a/form/actions/index.html +++ b/form/actions/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form actions

    Change form state from anywhere in the application

    Docs

    Edit this page

    Package

    @mantine/form

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form actions

    Change form state from anywhere in the application

    Docs

    Edit this page

    Package

    @mantine/form

    Usage

    Form actions allow changing state of the form from anywhere in your application. The mechanism of form actions is similar to notifications system, modals manager and other similar packages.

    @@ -97,4 +97,4 @@
  • resetTouched

    • All methods work similar to use-form hooks methods – -functions accept the same arguments but do not return anything.

    Previous

    Form context

    Next

    Recipes

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +functions accept the same arguments but do not return anything.

    Previous

    Form context

    Next

    Recipes

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/create-form-context/index.html b/form/create-form-context/index.html index 14d7244aa0..8fb9f00637 100644 --- a/form/create-form-context/index.html +++ b/form/create-form-context/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form context

    Add context support to use-form with createFormContext

    Docs

    Edit this page

    Package

    @mantine/form

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form context

    Add context support to use-form with createFormContext

    Docs

    Edit this page

    Package

    @mantine/form

    Usage

    createFormContext function creates context provider and hook to get form object from context:

    import { TextInput } from '@mantine/core';
 import { createFormContext } from '@mantine/form';
@@ -106,4 +106,4 @@
       </form>
     </UserFormProvider>
   );
-}

    Previous

    Touched & dirty

    Next

    Form actions

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Touched & dirty

    Next

    Form actions

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/errors/index.html b/form/errors/index.html index 4bd3ce8f48..6f81337411 100644 --- a/form/errors/index.html +++ b/form/errors/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form errors

    Manipulate form errors with use-form hook

    Docs

    Edit this page

    Package

    @mantine/form

    Errors object

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form errors

    Manipulate form errors with use-form hook

    Docs

    Edit this page

    Package

    @mantine/form

    Errors object

    form.errors is an object of React nodes that contains validation errors:

    import { useForm } from '@mantine/form';
 
@@ -115,4 +115,4 @@
 
 const form = useForm({ mode: 'uncontrolled' });
 
-const handleErrors = (errors: typeof form.errors) => {};

    Previous

    getInputProps

    Next

    Form validation

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +const handleErrors = (errors: typeof form.errors) => {};

    Previous

    getInputProps

    Next

    Form validation

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/get-input-props/index.html b/form/get-input-props/index.html index da43292942..c461405ebb 100644 --- a/form/get-input-props/index.html +++ b/form/get-input-props/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    getInputProps

    A handler to get input props for any field in the form

    Docs

    Edit this page

    Package

    @mantine/form

    getInputProps handler

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    getInputProps

    A handler to get input props for any field in the form

    Docs

    Edit this page

    Package

    @mantine/form

    getInputProps handler

    form.getInputProps returns an object with value, onChange, onFocus, onBlur, error and all props specified in enhanceGetInputProps function. Return value should be spread to the input component.

    You can pass the following options to form.getInputProps as second argument:

    @@ -308,4 +308,4 @@ key={form.key('name')} /> ); -}

    Previous

    Form values

    Next

    Form errors

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Form values

    Next

    Form errors

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/nested/index.html b/form/nested/index.html index 80629286ab..2a92e7547e 100644 --- a/form/nested/index.html +++ b/form/nested/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Nested fields

    Manage nested arrays and object state with use-form hook

    Docs

    Edit this page

    Package

    @mantine/form

    Properties paths

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Nested fields

    Manage nested arrays and object state with use-form hook

    Docs

    Edit this page

    Package

    @mantine/form

    Properties paths

    Most of form handlers accept property path as the first argument. Property path includes keys/indices of objects/arrays at which target property is contained:

    import { useForm } from '@mantine/form';
@@ -227,4 +227,4 @@
 // {
 //  'users.0.age': 'User must be 18 or older',
 //  'users.1.name': 'Name should have at least 2 letters'
-// }

    Previous

    Form validators

    Next

    Touched & dirty

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +// }

    Previous

    Form validators

    Next

    Touched & dirty

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/recipes/index.html b/form/recipes/index.html index a7d998b777..5df152297f 100644 --- a/form/recipes/index.html +++ b/form/recipes/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Recipes

    use-form examples

    Docs

    Edit this page

    Package

    @mantine/form

    Set initial values with async request

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Recipes

    use-form examples

    Docs

    Edit this page

    Package

    @mantine/form

    Set initial values with async request

    import { useEffect } from 'react';
 import { useForm } from '@mantine/form';
 import { TextInput, Checkbox } from '@mantine/core';
@@ -94,7 +94,7 @@
   );
 }

    List items reordering

    -
    import { Group, TextInput, Button, Center } from '@mantine/core';
+
    import { Group, TextInput, Button, Center } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { randomId } from '@mantine/hooks';
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
@@ -281,4 +281,4 @@
       </Group>
     </>
   );
-}
    Previous
    Form actions
    Next
    AppShell
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Form actions

    Next

    AppShell

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/schema-validation/index.html b/form/schema-validation/index.html index ef0ae29b1e..7585543a90 100644 --- a/form/schema-validation/index.html +++ b/form/schema-validation/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form schema validation

    use-form schema based validation with zod, yup, joi and superstruct

    Docs

    Edit this page

    Package

    @mantine/form

    Schema based validation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form schema validation

    use-form schema based validation with zod, yup, joi and superstruct

    Docs

    Edit this page

    Package

    @mantine/form

    Schema based validation

    @mantine/form supports schema validation with:

    • zod
      • @@ -491,4 +491,4 @@ email: '', }, validate: valibotResolver(userSchema), -});

    Previous

    Form validation

    Next

    Form validators

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +});

    Previous

    Form validation

    Next

    Form validators

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/status/index.html b/form/status/index.html index 36c516a2d0..5eca79ae97 100644 --- a/form/status/index.html +++ b/form/status/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Touched & dirty

    Get fields and form touched and dirty status

    Docs

    Edit this page

    Package

    @mantine/form

    Touched and dirty state

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Touched & dirty

    Get fields and form touched and dirty status

    Docs

    Edit this page

    Package

    @mantine/form

    Touched and dirty state

    form.isTouched and form.isDirty fields provide information about current field status:

    • Field is considered to be touched when user focused it or its value was changed programmatically with form.setFieldValue handler
      • @@ -101,4 +101,4 @@ form.isDirty(); // -> false form.setValues({ a: 3 }); -form.isDirty(); // -> true

    Previous

    Nested fields

    Next

    Form context

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +form.isDirty(); // -> true

    Previous

    Nested fields

    Next

    Form context

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/uncontrolled/index.html b/form/uncontrolled/index.html index 03aaac225c..4470ec4c06 100644 --- a/form/uncontrolled/index.html +++ b/form/uncontrolled/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Uncontrolled mode

    use-form uncontrolled mode to improve performance

    Docs

    Edit this page

    Package

    @mantine/form

    Controlled mode

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Uncontrolled mode

    use-form uncontrolled mode to improve performance

    Docs

    Edit this page

    Package

    @mantine/form

    Controlled mode

    Controlled mode is the default mode of the form. In this mode, the form data is stored in React state and all components are rerendered when form data changes. Controlled mode is not recommended for large forms.

    @@ -278,4 +278,4 @@ key={form.key('text')} /> ); -}

    Previous

    use-field

    Next

    Form values

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    use-field

    Next

    Form values

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/use-field/index.html b/form/use-field/index.html index eaebcaf8be..be6b1d8cb9 100644 --- a/form/use-field/index.html +++ b/form/use-field/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-field

    use-field hook – manage single field state

    Docs

    Edit this page

    Package

    @mantine/form

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-field

    use-field hook – manage single field state

    Docs

    Edit this page

    Package

    @mantine/form

    Usage

    use-field hook is a simpler alternative to use-form, it can be used to manage state of a single input without the need to create a form:

    import { Button, TextInput } from '@mantine/core';
@@ -266,4 +266,4 @@
       <Button onClick={field.validate}>Validate</Button>
     </>
   );
-}

    Previous

    use-form

    Next

    Uncontrolled mode

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    use-form

    Next

    Uncontrolled mode

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/use-form/index.html b/form/use-form/index.html index c01b6dc3da..fad1d44bbe 100644 --- a/form/use-form/index.html +++ b/form/use-form/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-form

    Manage form state

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/form

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-form

    Manage form state

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/form

    License

    MIT

    Installation

    @mantine/form package does not depend on any other libraries, you can use it with or without @mantine/core inputs:

    yarn add @mantine/form

    Usage

    @@ -276,4 +276,4 @@ <OccupationInput form={form} /> </> ); -}

    Previous

    use-shallow-effect

    Next

    use-field

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    use-shallow-effect

    Next

    use-field

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/validation/index.html b/form/validation/index.html index 4882569ee3..c38b576f6e 100644 --- a/form/validation/index.html +++ b/form/validation/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form validation

    Validate fields with use-form hook

    Docs

    Edit this page

    Package

    @mantine/form

    Validation with rules object

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form validation

    Validate fields with use-form hook

    Docs

    Edit this page

    Package

    @mantine/form

    Validation with rules object

    To validate form with rules object, provide an object of functions which take field value as an argument and return error message (any React node) or null if field is valid:

    import { useForm } from '@mantine/form';
@@ -603,4 +603,4 @@
       </Group>
     </form>
   );
-}

    Previous

    Form errors

    Next

    Form schema validation

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Form errors

    Next

    Form schema validation

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/validators/index.html b/form/validators/index.html index adda76cb1e..5530497ed8 100644 --- a/form/validators/index.html +++ b/form/validators/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form validators

    Premade validation functions

    Docs

    Edit this page

    Package

    @mantine/form

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form validators

    Premade validation functions

    Docs

    Edit this page

    Package

    @mantine/form

    Usage

    @mantine/form package exports several functions that can be used in validation rules object. Validation functions are tiny in size and provide basic validation, if you have complex validation requirements, use other types of validation.

    import { useForm, isNotEmpty, isEmail, isInRange, hasLength, matches } from '@mantine/form';
@@ -278,4 +278,4 @@
       'Passwords are not the same'
     ),
   },
-});

    Previous

    Form schema validation

    Next

    Nested fields

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +});

    Previous

    Form schema validation

    Next

    Nested fields

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/values/index.html b/form/values/index.html index 7cd8fdd0e2..818387eabe 100644 --- a/form/values/index.html +++ b/form/values/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form values

    Manipulate form values with use-form

    Docs

    Edit this page

    Package

    @mantine/form

    Initial values

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form values

    Manipulate form values with use-form

    Docs

    Edit this page

    Package

    @mantine/form

    Initial values

    In most cases you should set initialValues:

    import { useForm } from '@mantine/form';
 
@@ -532,4 +532,4 @@
       jobs: [],
     },
   });
-}

    Previous

    Uncontrolled mode

    Next

    getInputProps

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Uncontrolled mode

    Next

    getInputProps

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/getting-started/index.html b/getting-started/index.html index f1f139eb30..72261ab030 100644 --- a/getting-started/index.html +++ b/getting-started/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Getting started

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Getting started

    Get started with a template

    The easiest way to get started is to use one of the templates. All templates include required dependencies and pre-configured settings. @@ -172,4 +172,4 @@

    License

    All @mantine/* packages are distributed under MIT license. You can use them in any project, commercial or not, with or without attribution. All @mantine/* packages -dependencies are also distributed under MIT license.

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +dependencies are also distributed under MIT license.

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/6x-to-7x/index.html b/guides/6x-to-7x/index.html index 76e7b57a5f..d7461b9028 100644 --- a/guides/6x-to-7x/index.html +++ b/guides/6x-to-7x/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    6.x → 7.x migration guide

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    6.x → 7.x migration guide

    This guide is intended to help you migrate your project styles from 6.x to 7.x. It is not intended to be a comprehensive guide to all the changes in 7.x. For that, please see the 7.0.0 changelog.

    @@ -325,4 +325,4 @@ <IconMoon className={cx(classes.icon, classes.dark)} stroke={1.5} /> </ActionIcon> ); -}

    Previous

    Functions reference

    Next

    use-click-outside

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Functions reference

    Next

    use-click-outside

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/functions-reference/index.html b/guides/functions-reference/index.html index 95a7ca9a57..f42e139339 100644 --- a/guides/functions-reference/index.html +++ b/guides/functions-reference/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Functions reference

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Functions reference

    This guides contains a list of functions exported from Mantine packages that are not documented anywhere else.

    clamp

    @@ -58,4 +58,4 @@ 
    import { shallowEqual } from '@mantine/hooks';
 
 shallowEqual({ a: 1 }, { a: 1 }); // true
-shallowEqual({ a: 1 }, { a: 2 }); // false

    Previous

    Testing with Vitest

    Next

    6.x to 7.x migration

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +shallowEqual({ a: 1 }, { a: 2 }); // false

    Previous

    Testing with Vitest

    Next

    6.x to 7.x migration

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/gatsby/index.html b/guides/gatsby/index.html index a9a54878a1..0a4ae05214 100644 --- a/guides/gatsby/index.html +++ b/guides/gatsby/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Gatsby

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Gatsby

    Get started with a template

    The easiest way to get started is to use one of the templates. All templates are configured correctly: they include PostCSS setup, ColorSchemeScript and other essential features. Some templates also include additional features like Jest, Storybook and ESLint.

    If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on this page.

    gatsby-template

    Gatsby template with basic setup

    		Use template

    Generate new application

    Follow Gatsby quick start guide to @@ -77,4 +77,4 @@ import classes from './Demo.module.css'; // Gatsby syntax -import * as classes from './Demo.module.css';

    Previous

    Usage with Remix

    Next

    Usage with Redwood

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +import * as classes from './Demo.module.css';

    Previous

    Usage with Remix

    Next

    Usage with Redwood

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/icons/index.html b/guides/icons/index.html index b912726a97..29580c29e6 100644 --- a/guides/icons/index.html +++ b/guides/icons/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Icons libraries with Mantine

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Icons libraries with Mantine

    You can use any icons library with Mantine components, most popular options are:

    • Tabler icons
      • @@ -70,4 +70,4 @@ <path d="M11 11a2 2 0 104 0 2 2 0 10-4 0M4 8h3M4 12h3M4 16h3" /> </svg> ); -}

    Previous

    Polymorphic components

    Next

    Usage with Next.js

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Polymorphic components

    Next

    Usage with Next.js

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/javascript/index.html b/guides/javascript/index.html index 9944a03844..0023231af7 100644 --- a/guides/javascript/index.html +++ b/guides/javascript/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with JavaScript

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with JavaScript

    Is it possible to use Mantine with JavaScript?

    Yes, it is possible to use all @mantine/* packages (as well as all other npm packages) with JavaScript. @mantine/* packages are written in TypeScript and have type definitions, so you will get some the benefits @@ -40,4 +40,4 @@ that you have in your code are removed/renamed/changed.

    If you are not familiar with TypeScript yet, using Mantine with TypeScript will be a great opportunity to learn it. You can use any of templates to get started – all of them include -TypeScript support out of the box.

    Previous

    Usage with TypeScript

    Next

    Testing with Jest

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +TypeScript support out of the box.

    Previous

    Usage with TypeScript

    Next

    Testing with Jest

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/jest/index.html b/guides/jest/index.html index 38f71ff797..9cf44a9e3f 100644 --- a/guides/jest/index.html +++ b/guides/jest/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Testing with Jest

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Testing with Jest

    This guide will help you setup Jest and React Testing Library for your project. Note that this guide only covers shared logic that can be applied to any framework, and it does not cover initial setup of Jest and React Testing Library as it may vary depending on the framework you are using.

    @@ -86,4 +86,4 @@ To learn how to setup Jest for your framework, either check Jest and React Testing Library documentation or check one of the premade templates. Most of the templates include Jest setup, and -you can use them as a reference.

    Previous

    Usage with JavaScript

    Next

    Testing with Vitest

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +you can use them as a reference.

    Previous

    Usage with JavaScript

    Next

    Testing with Vitest

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/next/index.html b/guides/next/index.html index ae085f6327..6ecfe38d2f 100644 --- a/guides/next/index.html +++ b/guides/next/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Next.js

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Next.js

    Get started with a template

    The easiest way to get started is to use one of the templates. All templates are configured correctly: they include PostCSS setup, ColorSchemeScript and other essential features. Some templates also include additional features like Jest, Storybook and ESLint.

    If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on this page.

    next-app-template

    Next.js template with app router and full setup: Jest, Storybook, ESLint

    		Use template

    next-pages-template

    Next.js template with pages router and full setup: Jest, Storybook, ESLint

    		Use template

    next-app-min-template

    Next.js template with app router and minimal setup – no additional tools included, only default Next.js configuration

    		Use template

    next-pages-min-template

    Next.js template with pages router and minimal setup – no additional tools included, only default Next.js configuration

    		Use template

    next-vanilla-extract-template

    Next.js template with Vanilla extract example

    		Use template

    Generate new application

    Follow create-next-app guide to @@ -180,4 +180,4 @@

    Troubleshooting

    If you have any issues with Mantine in your Next.js application, please check Help Center article that covers -most common issues with app router and server components.

    Previous

    Icons libraries

    Next

    Usage with Vite

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +most common issues with app router and server components.

    Previous

    Icons libraries

    Next

    Usage with Vite

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/polymorphic/index.html b/guides/polymorphic/index.html index 83039ad319..304db5023f 100644 --- a/guides/polymorphic/index.html +++ b/guides/polymorphic/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Polymorphic components

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Polymorphic components

    What is a polymorphic component

    A polymorphic component is a component which root element can be changed with component prop. All polymorphic components have a default element which is used when component prop is not provided. @@ -245,4 +245,4 @@ return ( <PolymorphicGroup component="a" href="https://mantine.dev" /> ); -}

    Previous

    Styles performance

    Next

    Icons libraries

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Styles performance

    Next

    Icons libraries

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/redwood/index.html b/guides/redwood/index.html index b08b36f92e..ae20e2e40e 100644 --- a/guides/redwood/index.html +++ b/guides/redwood/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with RedwoodJS

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with RedwoodJS

    Get started with a template

    The easiest way to get started is to use one of the templates. All templates are configured correctly: they include PostCSS setup, ColorSchemeScript and other essential features. Some templates also include additional features like Jest, Storybook and ESLint.

    If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on this page.

    redwood-template

    RedwoodJS template with basic setup

    		Use template

    Generate new application

    Follow Redwood getting started guide guide to @@ -61,4 +61,4 @@ export default App;

    All set! Start development server:

    -
    yarn rw dev

    Previous

    Usage with Gatsby

    Next

    Usage with Storybook

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    yarn rw dev

    Previous

    Usage with Gatsby

    Next

    Usage with Storybook

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/remix/index.html b/guides/remix/index.html index 14e9e136a3..a0517b9e93 100644 --- a/guides/remix/index.html +++ b/guides/remix/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Remix

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Remix

    Get started with a template

    The easiest way to get started is to use one of the templates. All templates are configured correctly: they include PostCSS setup, ColorSchemeScript and other essential features. Some templates also include additional features like Jest, Storybook and ESLint.

    If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on this page.

    remix-template

    Remix template with basic setup

    		Use template

    Generate new application

    Follow Remix getting started guide guide to create new Remix application:

    @@ -70,4 +70,4 @@ return <Outlet />; }

    All set! Start development server:

    -
    npm run dev

    Previous

    Usage with Vite

    Next

    Usage with Gatsby

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    npm run dev

    Previous

    Usage with Vite

    Next

    Usage with Gatsby

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/storybook/index.html b/guides/storybook/index.html index 340e21fb97..f7332c812d 100644 --- a/guides/storybook/index.html +++ b/guides/storybook/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Setup Mantine in Storybook

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Setup Mantine in Storybook

    Note that this guide covers only Storybook 7.0+ integration. If you are using older version of Storybook, it will not work for you.

    Add Storybook to your application

    @@ -98,4 +98,4 @@ ), ];

    All set! Start Storybook:

    -
    npm run storybook

    Previous

    Usage with Redwood

    Next

    Usage with TypeScript

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    npm run storybook

    Previous

    Usage with Redwood

    Next

    Usage with TypeScript

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/typescript/index.html b/guides/typescript/index.html index 12e59f70cb..3eeae2e828 100644 --- a/guides/typescript/index.html +++ b/guides/typescript/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with TypeScript

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with TypeScript

    All @mantine/* packages are fully compatible with TypeScript. All examples in the documentation are written in TypeScript – you can copy-paste them to your project without any changes.

    This guide will help you get familiar with types that @mantine/core package exports.

    @@ -156,4 +156,4 @@ } }

    Note that extending theme type is not required, it is only needed if you want to -make your theme object types more strict and add autocomplete in your editor.

    Previous

    Usage with Storybook

    Next

    Usage with JavaScript

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +make your theme object types more strict and add autocomplete in your editor.

    Previous

    Usage with Storybook

    Next

    Usage with JavaScript

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/vite/index.html b/guides/vite/index.html index c941d342cf..8ac32de29c 100644 --- a/guides/vite/index.html +++ b/guides/vite/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Vite

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Vite

    Get started with a template

    The easiest way to get started is to use one of the templates. All templates are configured correctly: they include PostCSS setup, ColorSchemeScript and other essential features. Some templates also include additional features like Jest, Storybook and ESLint.

    If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on this page.

    vite-template

    Vite template with full setup: Vitest, Prettier, Storybook, ESLint

    		Use template

    vite-min-template

    Vite template with minimal setup – no additional tools included, only default Vite configuration

    		Use template

    vite-vanilla-extract-template

    Vite template with Vanilla extract example

    		Use template

    Generate new application

    Follow Vite getting started guide to create new Vite application:

    @@ -41,4 +41,4 @@ return <MantineProvider>{/* Your app here */}</MantineProvider>; }

    All set! Start development server:

    -
    npm run dev

    Previous

    Usage with Next.js

    Next

    Usage with Remix

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    npm run dev

    Previous

    Usage with Next.js

    Next

    Usage with Remix

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/vitest/index.html b/guides/vitest/index.html index 8f5ec093fa..87634d176b 100644 --- a/guides/vitest/index.html +++ b/guides/vitest/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Testing with Vitest

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Testing with Vitest

    This guide will help you setup Vitest and React Testing Library for your project. Note that this guide intended for projects that use Vite as a bundler, if you are using other frameworks/bundlers, it is recommended to use Jest instead.

    @@ -101,4 +101,4 @@ }); });

    Example of a full setup

    -

    You can find an example with a full Vitest setup in mantine-vite-template.

    Previous

    Testing with Jest

    Next

    Functions reference

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    You can find an example with a full Vitest setup in mantine-vite-template.

    Previous

    Testing with Jest

    Next

    Functions reference

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-click-outside/index.html b/hooks/use-click-outside/index.html index ca8ef1d8bd..78988fb35d 100644 --- a/hooks/use-click-outside/index.html +++ b/hooks/use-click-outside/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-click-outside

    Detects click and touch events outside of given element or elements group

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-click-outside

    Detects click and touch events outside of given element or elements group

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    import { useState } from 'react';
 import { Paper, Button } from '@mantine/core';
 import { useClickOutside } from '@mantine/hooks';
@@ -103,4 +103,4 @@
   handler: () => void,
   events?: string[] | null,
   nodes?: HTMLElement[]
-): React.MutableRefObject<T>;

    Previous

    6.x to 7.x migration

    Next

    use-color-scheme

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): React.MutableRefObject<T>;

    Previous

    6.x to 7.x migration

    Next

    use-color-scheme

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-clipboard/index.html b/hooks/use-clipboard/index.html index 5298b0f551..f68fb57310 100644 --- a/hooks/use-clipboard/index.html +++ b/hooks/use-clipboard/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-clipboard

    Wrapper around navigator.clipboard with feedback timeout

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-clipboard

    Wrapper around navigator.clipboard with feedback timeout

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-clipboard hook provides interface to work with navigator.clipboard:

    import { Button } from '@mantine/core';
 import { useClipboard } from '@mantine/hooks';
@@ -41,4 +41,4 @@
   reset: () => void;
   error: Error;
   copied: boolean;
-};

    Previous

    use-validated-state

    Next

    use-document-title

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-validated-state

    Next

    use-document-title

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-color-scheme/index.html b/hooks/use-color-scheme/index.html index b9e092643e..243ab6bcf1 100644 --- a/hooks/use-color-scheme/index.html +++ b/hooks/use-color-scheme/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-color-scheme

    Detects user system color scheme with window.matchMedia API

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-color-scheme

    Detects user system color scheme with window.matchMedia API

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-color-scheme hook returns system color scheme value i.e. either dark or light:

    Your system color scheme is light
    import { Badge } from '@mantine/core';
 import { useColorScheme } from '@mantine/hooks';
@@ -28,4 +28,4 @@
   options?: {
     getInitialValueInEffect: boolean;
   }
-): 'dark' | 'light';

    Previous

    use-click-outside

    Next

    use-element-size

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): 'dark' | 'light';

    Previous

    use-click-outside

    Next

    use-element-size

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-counter/index.html b/hooks/use-counter/index.html index 8b0d2bf359..dd440999c0 100644 --- a/hooks/use-counter/index.html +++ b/hooks/use-counter/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-counter

    Increments/decrements state within given boundaries

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-counter

    Increments/decrements state within given boundaries

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Count: 0

    import { Group, Button, Text } from '@mantine/core';
 import { useCounter } from '@mantine/hooks';
 
@@ -38,4 +38,4 @@
     set: (value: number) => void;
     reset: () => void;
   },
-];

    Previous

    use-window-scroll

    Next

    use-debounced-callback

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +];

    Previous

    use-window-scroll

    Next

    use-debounced-callback

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-debounced-callback/index.html b/hooks/use-debounced-callback/index.html index ca63684ee4..05c38a4a61 100644 --- a/hooks/use-debounced-callback/index.html +++ b/hooks/use-debounced-callback/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-debounced-callback

    Debounces function calls

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-debounced-callback

    Debounces function calls

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useDebouncedCallback hook creates a debounced version of a callback function, delaying its execution until a specified time has elapsed since the last invocation.

    import { useState } from 'react';
@@ -61,4 +61,4 @@
 
    function useDebouncedCallback<T extends (...args: any[]) => any>(
   callback: T,
   delay: number
-): (...args: Parameters<T>) => void;
    Previous
    use-counter
    Next
    use-debounced-state
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): (...args: Parameters<T>) => void;

    Previous

    use-counter

    Next

    use-debounced-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-debounced-state/index.html b/hooks/use-debounced-state/index.html index c38beaeee4..abdd5f4964 100644 --- a/hooks/use-debounced-state/index.html +++ b/hooks/use-debounced-state/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-debounced-state

    Debounces value changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-debounced-state

    Debounces value changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-debounced-state hook debounces value changes. This can be useful in case you want to perform a heavy operation based on react state, for example, send search request. Unlike use-debounced-value it @@ -60,4 +60,4 @@ options?: { leading: boolean; } -): readonly [T, (newValue: T) => void];

    Previous

    use-debounced-callback

    Next

    use-debounced-value

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): readonly [T, (newValue: T) => void];

    Previous

    use-debounced-callback

    Next

    use-debounced-value

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-debounced-value/index.html b/hooks/use-debounced-value/index.html index a40ae8595f..e5ed8499ac 100644 --- a/hooks/use-debounced-value/index.html +++ b/hooks/use-debounced-value/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-debounced-value

    Debounces value changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-debounced-value

    Debounces value changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-debounced-value hook debounces value changes. This can be useful in case you want to perform a heavy operation based on react state, for example, send search request. Unlike use-debounced-state it @@ -96,4 +96,4 @@ options?: { leading: boolean; } -): readonly [T, () => void];

    Previous

    use-debounced-state

    Next

    use-disclosure

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): readonly [T, () => void];

    Previous

    use-debounced-state

    Next

    use-disclosure

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-did-update/index.html b/hooks/use-did-update/index.html index 21b40da2d6..cbc6b34595 100644 --- a/hooks/use-did-update/index.html +++ b/hooks/use-did-update/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-did-update

    Calls given function in useEffect when value changes, but not when the component mounts

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-did-update

    Calls given function in useEffect when value changes, but not when the component mounts

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-did-update hook works the same way as useEffect but it is not called when component is mounted:

    import { useDidUpdate } from '@mantine/hooks';
 
@@ -15,4 +15,4 @@
   );
 }

    Definition

    -
    function useDidUpdate(fn: EffectCallback, dependencies?: any[]): void;

    Previous

    use-timeout

    Next

    use-force-update

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useDidUpdate(fn: EffectCallback, dependencies?: any[]): void;

    Previous

    use-timeout

    Next

    use-force-update

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-disclosure/index.html b/hooks/use-disclosure/index.html index 4bf1e0d76a..60b8dec84a 100644 --- a/hooks/use-disclosure/index.html +++ b/hooks/use-disclosure/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-disclosure

    Manages boolean state, provides open, close and toggle handlers, usually used with modals, drawers and popovers

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-disclosure

    Manages boolean state, provides open, close and toggle handlers, usually used with modals, drawers and popovers

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-disclosure hook manages boolean state. It provides open, close and toggle handlers and accepts optional onOpen and onClose callbacks. It can be used to manage controlled modals, popovers and other similar components:

    @@ -61,4 +61,4 @@ close: () => void; toggle: () => void; }, -];

    Previous

    use-debounced-value

    Next

    use-id

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +];

    Previous

    use-debounced-value

    Next

    use-id

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-document-title/index.html b/hooks/use-document-title/index.html index 7a1a3209a8..8fb733b6be 100644 --- a/hooks/use-document-title/index.html +++ b/hooks/use-document-title/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-document-title

    Sets document.title to given string

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-document-title

    Sets document.title to given string

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-document-title sets document.title property with React.useLayoutEffect hook. Hook is not called during server side rendering. Use this hook with client only applications, for isomorphic use more advanced options, for example, react-helmet.

    Call hook with a string that should be set as document title inside any component. @@ -24,4 +24,4 @@ ); }

    Definition

    -
    function useDocumentTitle(title: string): void;

    Previous

    use-clipboard

    Next

    use-document-visibility

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useDocumentTitle(title: string): void;

    Previous

    use-clipboard

    Next

    use-document-visibility

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-document-visibility/index.html b/hooks/use-document-visibility/index.html index de74b85866..6aa4042e9c 100644 --- a/hooks/use-document-visibility/index.html +++ b/hooks/use-document-visibility/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-document-visibility

    Detects if the current tab is active

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-document-visibility

    Detects if the current tab is active

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-document-visibility hook returns current document.visibilityState – it allows detecting if the current tab is active:

    Switch to another tab to see document title change

    import { Text } from '@mantine/core';
@@ -16,4 +16,4 @@
   return <Text>Switch to another tab to see document title change</Text>;
 }

    Definition

    -
    function useDocumentVisibility(): 'visible' | 'hidden';

    Previous

    use-document-title

    Next

    use-eye-dropper

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useDocumentVisibility(): 'visible' | 'hidden';

    Previous

    use-document-title

    Next

    use-eye-dropper

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-element-size/index.html b/hooks/use-element-size/index.html index 60553be4f2..67b703f6bf 100644 --- a/hooks/use-element-size/index.html +++ b/hooks/use-element-size/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-element-size

    Returns element width and height and observes changes with ResizeObserver

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-element-size

    Returns element width and height and observes changes with ResizeObserver

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Resize textarea by dragging its right bottom corner

    Width: 0, height: 0

    import { useElementSize } from '@mantine/hooks';
 import { rem } from '@mantine/core';
 
@@ -30,4 +30,4 @@
 
 function useResizeObserver<T extends HTMLElement = any>(
   options?: ResizeObserverOptions
-): readonly [React.RefObject<T>, ObserverRect];

    Previous

    use-color-scheme

    Next

    use-event-listener

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): readonly [React.RefObject<T>, ObserverRect];

    Previous

    use-color-scheme

    Next

    use-event-listener

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-event-listener/index.html b/hooks/use-event-listener/index.html index 609d0b93de..ac97d9852d 100644 --- a/hooks/use-event-listener/index.html +++ b/hooks/use-event-listener/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-event-listener

    Subscribes to events of a given element with a ref

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-event-listener

    Subscribes to events of a given element with a ref

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-event-listener adds a given event listener to an element to which ref is assigned. Hook supports the same options as addEventListener method. After the component is unmounted, the listener is automatically removed.

    @@ -26,4 +26,4 @@ type: K, listener: (this: HTMLDivElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions -): MutableRefObject<T>;

    Previous

    use-element-size

    Next

    use-focus-return

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): MutableRefObject<T>;

    Previous

    use-element-size

    Next

    use-focus-return

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-eye-dropper/index.html b/hooks/use-eye-dropper/index.html index 540b648d59..4447e6fa0c 100644 --- a/hooks/use-eye-dropper/index.html +++ b/hooks/use-eye-dropper/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-eye-dropper

    Pick color from any pixel on the screen

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-eye-dropper

    Pick color from any pixel on the screen

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-eye-dropper hook provides an interface to work with EyeDropper API. Check browser support to learn which browsers support the API.

    EyeDropper API is not supported in your browser

    import { useState } from 'react';
@@ -53,4 +53,4 @@
   open: (options?: {
     signal?: AbortSignal;
   }) => Promise<{ sRGBHex: string }>;
-};

    Previous

    use-document-visibility

    Next

    use-favicon

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-document-visibility

    Next

    use-favicon

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-favicon/index.html b/hooks/use-favicon/index.html index 1f942b14b6..28993075e4 100644 --- a/hooks/use-favicon/index.html +++ b/hooks/use-favicon/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-favicon

    Changes favicon

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-favicon

    Changes favicon

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-favicon appends <link /> element to head component with given favicon in useLayoutEffect. The hook is not called during server side rendering.

    Call hook with a favicon URL (supported formats: .ico, .png, .svg and .gif) that should be set as favicon. @@ -28,4 +28,4 @@ ); }

    Definition

    -
    function useFavicon(url: string): void;

    Previous

    use-eye-dropper

    Next

    use-fetch

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useFavicon(url: string): void;

    Previous

    use-eye-dropper

    Next

    use-fetch

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-fetch/index.html b/hooks/use-fetch/index.html index 1276961d17..e2ff7f2449 100644 --- a/hooks/use-fetch/index.html +++ b/hooks/use-fetch/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-fetch

    Fetch data with built-in loading and error states

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-fetch

    Fetch data with built-in loading and error states

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useFetch hook sends a GET request to the specified URL and returns the response data, loading state, error, refetch and abort functions.

    Fetching
    import { Box, Button, Code, Group, LoadingOverlay, Text } from '@mantine/core';
@@ -55,4 +55,4 @@
   error: Error | null;
   refetch: () => Promise<T> | undefined;
   abort: () => void;
-};

    Previous

    use-favicon

    Next

    use-hash

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-favicon

    Next

    use-hash

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-focus-return/index.html b/hooks/use-focus-return/index.html index 8aa9d481c9..f087fe3e10 100644 --- a/hooks/use-focus-return/index.html +++ b/hooks/use-focus-return/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-focus-return

    Captures last focused element on the page and returns focus to it once given condition is met

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-focus-return

    Captures last focused element on the page and returns focus to it once given condition is met

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-focus-return automatically returns focus to the last focused element when a given condition is met. For example, it is used in Modal component to restore focus after the modal was closed.

    Close the modal with the Escape key and see how focus returns to the button after the modal closes:

    @@ -50,4 +50,4 @@ 
    function useFocusReturn(options: {
   opened: boolean;
   shouldReturnFocus?: boolean;
-}): () => void;

    Previous

    use-event-listener

    Next

    use-focus-trap

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}): () => void;

    Previous

    use-event-listener

    Next

    use-focus-trap

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-focus-trap/index.html b/hooks/use-focus-trap/index.html index a7809bc6ec..98d154099c 100644 --- a/hooks/use-focus-trap/index.html +++ b/hooks/use-focus-trap/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-focus-trap

    Traps focus inside given element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-focus-trap

    Traps focus inside given element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-focus-trap traps focus at the given node, for example in modal, drawer or menu. Node must include at least one focusable element. When the node unmounts, the focus trap is automatically released.

    import { useFocusTrap } from '@mantine/hooks';
@@ -84,4 +84,4 @@
 
    Definition
    
 
    function useFocusTrap(
   active?: boolean
-): (instance: HTMLElement) => void;
    Previous
    use-focus-return
    Next
    use-focus-within
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): (instance: HTMLElement) => void;

    Previous

    use-focus-return

    Next

    use-focus-within

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-focus-within/index.html b/hooks/use-focus-within/index.html index 0dfcc8ab34..b2a027a38b 100644 --- a/hooks/use-focus-within/index.html +++ b/hooks/use-focus-within/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-focus-within

    Detects if any element within the given element has focus

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-focus-within

    Detects if any element within the given element has focus

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-focus-within hook detects if any element within the other element has focus. It works the same way as :focus-within CSS selector:

    One of elements has focus: false

    import { useFocusWithin } from '@mantine/hooks';
@@ -35,4 +35,4 @@
 }): {
   ref: React.MutableRefObject<T>;
   focused: boolean;
-};

    Previous

    use-focus-trap

    Next

    use-fullscreen

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-focus-trap

    Next

    use-fullscreen

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-force-update/index.html b/hooks/use-force-update/index.html index 782af99158..954d518419 100644 --- a/hooks/use-force-update/index.html +++ b/hooks/use-force-update/index.html @@ -4,9 +4,9 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-force-update

    Forces the component to rerender without state change

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-force-update

    Forces the component to rerender without state change

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-force-update returns a function, which when called rerenders the component:

    -

    mantine-94dquamhc

    import { Button, Text, Group } from '@mantine/core';
+
    mantine-wilmios4o
    import { Button, Text, Group } from '@mantine/core';
 import { useForceUpdate, randomId } from '@mantine/hooks';
 
 function Demo() {
@@ -20,4 +20,4 @@
   );
 }
    
 
    Definition
    
-
    function useForceUpdate(): () => void;
    Previous
    use-did-update
    Next
    use-is-first-render
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useForceUpdate(): () => void;

    Previous

    use-did-update

    Next

    use-is-first-render

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-fullscreen/index.html b/hooks/use-fullscreen/index.html index 0256d00629..662c7992f8 100644 --- a/hooks/use-fullscreen/index.html +++ b/hooks/use-fullscreen/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-fullscreen

    Enter/exit fullscreen mode with given element or entire page

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-fullscreen

    Enter/exit fullscreen mode with given element or entire page

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-fullscreen allows to enter/exit fullscreen for given element using the Fullscreen API. By default, if you don't provide ref, the hook will target document.documentElement:

    import { useFullscreen } from '@mantine/hooks';
@@ -47,4 +47,4 @@
   readonly ref: (element: T | null) => void;
   readonly toggle: () => Promise<void>;
   readonly fullscreen: boolean;
-};

    Previous

    use-focus-within

    Next

    use-hotkeys

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-focus-within

    Next

    use-hotkeys

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-hash/index.html b/hooks/use-hash/index.html index 469c2232b6..c6ed6ac3a3 100644 --- a/hooks/use-hash/index.html +++ b/hooks/use-hash/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-hash

    Get and set hash value in the URL

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-hash

    Get and set hash value in the URL

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-hash returns hash from URL, subscribes to its changes with hashchange event and allows changing it with setHash function:

    Current hash: 

    import { useHash, randomId } from '@mantine/hooks';
@@ -35,4 +35,4 @@
 
    Definition
    
 
    function useHash(options: {
   getInitialValueInEffect?: boolean;
-}): readonly [string, (value: string) => void];
    Previous
    use-fetch
    Next
    use-headroom
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}): readonly [string, (value: string) => void];

    Previous

    use-fetch

    Next

    use-headroom

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-headroom/index.html b/hooks/use-headroom/index.html index 4bfc16a454..aefb448f10 100644 --- a/hooks/use-headroom/index.html +++ b/hooks/use-headroom/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-headroom

    Create headers that are hidden after user scrolls past given distance

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-headroom

    Create headers that are hidden after user scrolls past given distance

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Use use-headroom hook to create headers that are hidden after user scrolls past the given distance in px. The hook returns a boolean value that determines whether the element should be pinned or hidden. Hook returns true when the current scroll position is less than the specified fixedAt value and @@ -54,4 +54,4 @@ onRelease?: () => void; } -function useHeadroom(input?: UseHeadroomInput): boolean;

    Previous

    use-hash

    Next

    use-idle

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +function useHeadroom(input?: UseHeadroomInput): boolean;

    Previous

    use-hash

    Next

    use-idle

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-hotkeys/index.html b/hooks/use-hotkeys/index.html index d610b32b19..121c9f2ef0 100644 --- a/hooks/use-hotkeys/index.html +++ b/hooks/use-hotkeys/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-hotkeys

    Listen for keys combinations on document element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-hotkeys

    Listen for keys combinations on document element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-hotkeys accepts as its first argument an array of hotkeys and handler tuples:

    • hotkey - hotkey string, for example ctrl+E, shift+alt+L, mod+S
      • @@ -112,4 +112,4 @@ hotkeys: HotkeyItem[], tagsToIgnore?: string[], triggerOnContentEditable?: boolean -): void;

    Previous

    use-fullscreen

    Next

    use-hover

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): void;

    Previous

    use-fullscreen

    Next

    use-hover

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-hover/index.html b/hooks/use-hover/index.html index 844dc286af..79594bdc8d 100644 --- a/hooks/use-hover/index.html +++ b/hooks/use-hover/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-hover

    Detects if given element is hovered

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-hover

    Detects if given element is hovered

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Put mouse over me please

    import { useHover } from '@mantine/hooks';
 
 function Demo() {
@@ -19,4 +19,4 @@
 
    function useHover<T extends HTMLElement = HTMLDivElement>(): {
   ref: React.RefObject<T>;
   hovered: boolean;
-};
    Previous
    use-hotkeys
    Next
    use-in-viewport
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-hotkeys

    Next

    use-in-viewport

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-id/index.html b/hooks/use-id/index.html index 7852352018..348080df5c 100644 --- a/hooks/use-id/index.html +++ b/hooks/use-id/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-id

    Generates memoized random id

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-id

    Generates memoized random id

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-id hook generates a random id that persists across renders. The hook is usually used to bind input elements to labels. The generated random id is saved to ref and will not change unless the component is unmounted.

    @@ -27,4 +27,4 @@ // input and label will have random id 'mantine-fZMoF' const withoutId = <Input />;

    Definition

    -
    function useId(id: string): string;

    Previous

    use-disclosure

    Next

    use-input-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useId(id: string): string;

    Previous

    use-disclosure

    Next

    use-input-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-idle/index.html b/hooks/use-idle/index.html index 92a56da67f..b7b1647997 100644 --- a/hooks/use-idle/index.html +++ b/hooks/use-idle/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-idle

    Detects if the user does nothing on the page

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-idle

    Detects if the user does nothing on the page

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-idle detects if user does nothing for a given time in ms:

    Current state: idle
    import { Badge } from '@mantine/core';
 import { useIdle } from '@mantine/hooks';
@@ -37,4 +37,4 @@
 
    function useIdle(
   timeout: number,
   options?: Partial<{ events: string[]; initialState: boolean }>
-): boolean;
    Previous
    use-headroom
    Next
    use-interval
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): boolean;

    Previous

    use-headroom

    Next

    use-interval

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-in-viewport/index.html b/hooks/use-in-viewport/index.html index 9e0ce1a744..d5334f776c 100644 --- a/hooks/use-in-viewport/index.html +++ b/hooks/use-in-viewport/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-in-viewport

    Detects if element is visible in the viewport

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-in-viewport

    Detects if element is visible in the viewport

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-in-viewport is a simpler alternative to use-intersection that only checks if the element is visible in the viewport:

    Scroll to see box

    A box

    import { Box, Text } from '@mantine/core';
@@ -25,4 +25,4 @@
       </Box>
     </>
   );
-}

    Previous

    use-hover

    Next

    use-intersection

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    use-hover

    Next

    use-intersection

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-input-state/index.html b/hooks/use-input-state/index.html index 3968522193..032fb942c0 100644 --- a/hooks/use-input-state/index.html +++ b/hooks/use-input-state/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-input-state

    Manages input state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-input-state

    Manages input state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-input-state handles state of native inputs (with event in onChange handler) and custom inputs (with value in onChange handler). Hook works with all Mantine and native inputs:

    import { useState } from 'react';
@@ -59,4 +59,4 @@
 ): [
   T,
   (value: null | undefined | T | React.ChangeEvent<any>) => void,
-];

    Previous

    use-id

    Next

    use-list-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +];

    Previous

    use-id

    Next

    use-list-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-intersection/index.html b/hooks/use-intersection/index.html index c3532d9636..5e55849c92 100644 --- a/hooks/use-intersection/index.html +++ b/hooks/use-intersection/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-intersection

    Detects if given element is visible in the viewport or other element with IntersectionObserver

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-intersection

    Detects if given element is visible in the viewport or other element with IntersectionObserver

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-intersection returns information about the intersection of a given element with its scroll container or body element with Intersection Observer API:

    Obscured

    import { useRef } from 'react';
@@ -73,4 +73,4 @@
 ): {
   ref: (element: T | null) => void;
   entry: IntersectionObserverEntry;
-};

    Previous

    use-in-viewport

    Next

    use-media-query

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-in-viewport

    Next

    use-media-query

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-interval/index.html b/hooks/use-interval/index.html index b885c28f79..0dc8e3e0d8 100644 --- a/hooks/use-interval/index.html +++ b/hooks/use-interval/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-interval

    Calls function with a given interval

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-interval

    Calls function with a given interval

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Page loaded 0 seconds ago

    import { useState, useEffect } from 'react';
 import { useInterval } from '@mantine/hooks';
 import { Stack, Button, Text } from '@mantine/core';
@@ -67,4 +67,4 @@
   stop: () => void;
   toggle: () => void;
   active: boolean;
-};

    Previous

    use-idle

    Next

    use-merged-ref

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-idle

    Next

    use-merged-ref

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-is-first-render/index.html b/hooks/use-is-first-render/index.html index bea63524c6..37bd4061a2 100644 --- a/hooks/use-is-first-render/index.html +++ b/hooks/use-is-first-render/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-is-first-render

    Detects if the component is rendered for the first time

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-is-first-render

    Detects if the component is rendered for the first time

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useIsFirstRender returns true if the component is being rendered for the first time, otherwise it returns false.

    Is first render: Yes

    import { useState } from 'react';
@@ -29,4 +29,4 @@
   );
 }

    Definition

    -
    function useIsFirstRender(): boolean;

    Previous

    use-force-update

    Next

    use-isomorphic-effect

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useIsFirstRender(): boolean;

    Previous

    use-force-update

    Next

    use-isomorphic-effect

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-isomorphic-effect/index.html b/hooks/use-isomorphic-effect/index.html index 3ff68c808b..3eb3a26da5 100644 --- a/hooks/use-isomorphic-effect/index.html +++ b/hooks/use-isomorphic-effect/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-isomorphic-effect

    useLayoutEffect replacement

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-isomorphic-effect

    useLayoutEffect replacement

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-isomorphic-effect is a replacement for useEffect hook that works in both browser and server environments.

    import { useIsomorphicEffect } from '@mantine/hooks';
 
@@ -14,4 +14,4 @@
   });
 
   return null;
-}

    Previous

    use-is-first-render

    Next

    use-logger

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    use-is-first-render

    Next

    use-logger

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-list-state/index.html b/hooks/use-list-state/index.html index 368c561c38..efd021c0ad 100644 --- a/hooks/use-list-state/index.html +++ b/hooks/use-list-state/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-list-state

    Manages array state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-list-state

    Manages array state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-list-state provides an API to work with list state:

    import { useListState } from '@mantine/hooks';
 
@@ -179,4 +179,4 @@
 
    Definition
    
 
    function useListState<T>(
   initialValue?: T[]
-): [T[], UseListStateHandlers<T>];
    Previous
    use-input-state
    Next
    use-local-storage
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): [T[], UseListStateHandlers<T>];

    Previous

    use-input-state

    Next

    use-local-storage

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-local-storage/index.html b/hooks/use-local-storage/index.html index 664c372ec6..fbbdce7dc0 100644 --- a/hooks/use-local-storage/index.html +++ b/hooks/use-local-storage/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-local-storage

    Exposes localStorage value as react state, syncs state across opened tabs

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-local-storage

    Exposes localStorage value as react state, syncs state across opened tabs

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-local-storage allows using value from the localStorage as react state. The hook works the same way as useState, but also writes the value to the localStorage:

    import { useLocalStorage } from '@mantine/hooks';
@@ -141,4 +141,4 @@
 Functions accept the same arguments as use-local-storage/use-session-storage hooks:
    
 
    import { readLocalStorageValue } from '@mantine/hooks';
 
-const value = readLocalStorageValue({ key: 'color-scheme' });
    Previous
    use-list-state
    Next
    use-map
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +const value = readLocalStorageValue({ key: 'color-scheme' });

    Previous

    use-list-state

    Next

    use-map

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-logger/index.html b/hooks/use-logger/index.html index d9017c7960..ebcad07ed8 100644 --- a/hooks/use-logger/index.html +++ b/hooks/use-logger/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-logger

    Logs given values to console when component renders

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-logger

    Logs given values to console when component renders

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-logger logs given values to the console each time component renders. Open devtools to see state changes in console:

    import { useState } from 'react';
@@ -17,4 +17,4 @@
   return <Button onClick={() => setCount((c) => c + 1)}>Update state ({count})</Button>;
 }

    Definition

    -
    function useLogger(componentName: string, props: any[]): any;

    Previous

    use-isomorphic-effect

    Next

    use-mounted

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useLogger(componentName: string, props: any[]): any;

    Previous

    use-isomorphic-effect

    Next

    use-mounted

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-map/index.html b/hooks/use-map/index.html index 27de5cd080..e2a7b17f72 100644 --- a/hooks/use-map/index.html +++ b/hooks/use-map/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-map

    Use Map as React state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-map

    Use Map as React state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useMap returns Map object that can be used as React state – set, clear and delete methods update state and trigger rerender.

    PageViews last month
    /hooks/use-media-query4124
    /hooks/use-clipboard8341
    /hooks/use-fetch9001
    import { IconPlus, IconTrash } from '@tabler/icons-react';
@@ -49,4 +49,4 @@
   );
 }

    Definition

    -
    function useMap<T, V>(initialState?: [T, V][]): Map<T, V>;

    Previous

    use-local-storage

    Next

    use-pagination

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useMap<T, V>(initialState?: [T, V][]): Map<T, V>;

    Previous

    use-local-storage

    Next

    use-pagination

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-media-query/index.html b/hooks/use-media-query/index.html index 8695cf416b..0003c3c09d 100644 --- a/hooks/use-media-query/index.html +++ b/hooks/use-media-query/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-media-query

    Subscribes to media queries with window.matchMedia

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-media-query

    Subscribes to media queries with window.matchMedia

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-media-query subscribes to media queries. It receives a media query as an argument and returns true if the given media query matches the current state. The hook relies on window.matchMedia() API @@ -49,4 +49,4 @@ options?: { getInitialValueInEffect: boolean; } -): boolean;

    Previous

    use-intersection

    Next

    use-mouse

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): boolean;

    Previous

    use-intersection

    Next

    use-mouse

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-merged-ref/index.html b/hooks/use-merged-ref/index.html index 35ab6c2ffb..5192871328 100644 --- a/hooks/use-merged-ref/index.html +++ b/hooks/use-merged-ref/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-merged-ref

    Merges multiple refs objects or functions into one ref callback

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-merged-ref

    Merges multiple refs objects or functions into one ref callback

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-merged-ref accepts any number of refs and returns a function that should be passed to the ref prop. Use this hook when you need to use more than one ref on a single dom node, for example, when you want to use use-click-outside and use-focus-trap hooks and also get a ref for yourself:

    @@ -82,4 +82,4 @@

    Definition

    function useMergedRef<T = any>(
   ...refs: React.ForwardedRef<T>[]
-): (node: T) => void;

    Previous

    use-interval

    Next

    use-network

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): (node: T) => void;

    Previous

    use-interval

    Next

    use-network

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-mounted/index.html b/hooks/use-mounted/index.html index 1fe6722868..dc2ddf65b6 100644 --- a/hooks/use-mounted/index.html +++ b/hooks/use-mounted/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-mounted

    Returns true if the component is mounted

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-mounted

    Returns true if the component is mounted

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useMounted hook returns true if component is mounted and false if it's not.

    import { useMounted } from '@mantine/hooks';
 
@@ -17,4 +17,4 @@
   );
 }

    Definition

    -
    function useMounted(): boolean;

    Previous

    use-logger

    Next

    use-shallow-effect

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useMounted(): boolean;

    Previous

    use-logger

    Next

    use-shallow-effect

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-mouse/index.html b/hooks/use-mouse/index.html index 25f8519748..978245a8fb 100644 --- a/hooks/use-mouse/index.html +++ b/hooks/use-mouse/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-mouse

    Tracks mouse position over the viewport or given element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-mouse

    Tracks mouse position over the viewport or given element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Mouse coordinates { x: 0, y: 0 }

    import { Text, Code, Group, Box } from '@mantine/core';
 import { useMouse } from '@mantine/hooks';
 
@@ -56,4 +56,4 @@
   x: number;
   y: number;
   ref: React.MutableRefObject<T>;
-};

    Previous

    use-media-query

    Next

    use-move

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-media-query

    Next

    use-move

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-move/index.html b/hooks/use-move/index.html index 8e5dffe37f..9652c0bbba 100644 --- a/hooks/use-move/index.html +++ b/hooks/use-move/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-move

    Handles move behavior over given element, can be used to build custom sliders

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-move

    Handles move behavior over given element, can be used to build custom sliders

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-move handles move behavior over any element:

    Values { x: 20, y: 60 }

    import { useState } from 'react';
 import { Group, Text, Code, rem } from '@mantine/core';
@@ -299,4 +299,4 @@
 ): {
   ref: React.RefObject<T>;
   active: boolean;
-};

    Previous

    use-mouse

    Next

    use-mutation-observer

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-mouse

    Next

    use-mutation-observer

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-mutation-observer/index.html b/hooks/use-mutation-observer/index.html index 545c9d33b5..2fb9ab3cc5 100644 --- a/hooks/use-mutation-observer/index.html +++ b/hooks/use-mutation-observer/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-mutation-observer

    Subscribe to changes being made to the DOM tree

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-mutation-observer

    Subscribe to changes being made to the DOM tree

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-mutation-observer is a wrapper for the MutationObserver. It allows subscribing changes being made to the DOM tree.

    Last detected mutation: Not mutated yet

    import { useState } from 'react';
@@ -86,4 +86,4 @@
   callback: MutationCallback,
   options: MutationObserverInit,
   target?: HTMLElement | (() => HTMLElement) | null
-): RefObject<Element>;

    Previous

    use-move

    Next

    use-orientation

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): RefObject<Element>;

    Previous

    use-move

    Next

    use-orientation

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-network/index.html b/hooks/use-network/index.html index 1d9fd1343a..8e50234999 100644 --- a/hooks/use-network/index.html +++ b/hooks/use-network/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-network

    Returns current connection status

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-network

    Returns current connection status

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-network hook returns an object with current connection status:

    PropertyValue
    Online

    Online

    rtt
    downlink
    effectiveType
    saveData

    false

    import { Text, Table } from '@mantine/core';
 import { useNetwork } from '@mantine/hooks';
@@ -77,4 +77,4 @@
     | 'none'
     | 'other'
     | 'unknown';
-};

    Previous

    use-merged-ref

    Next

    use-os

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-merged-ref

    Next

    use-os

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-orientation/index.html b/hooks/use-orientation/index.html index 014551e624..b046c92bda 100644 --- a/hooks/use-orientation/index.html +++ b/hooks/use-orientation/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-orientation

    Detects device orientation and subscribe to its changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-orientation

    Detects device orientation and subscribe to its changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useOrientation returns an object with the current orientation of the device:

    Angle: 0

    Type: landscape-primary

    import { Code, Text } from '@mantine/core';
 import { useOrientation } from '@mantine/hooks';
@@ -26,4 +26,4 @@
 
    function useOrientation(): {
   angle: number;
   type: string;
-};
    Previous
    use-mutation-observer
    Next
    use-reduced-motion
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-mutation-observer

    Next

    use-reduced-motion

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-os/index.html b/hooks/use-os/index.html index 7ab30efa93..335f128c12 100644 --- a/hooks/use-os/index.html +++ b/hooks/use-os/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-os

    Detects user operating system

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-os

    Detects user operating system

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-os returns user's os. Possible values are: undetermined, macos, ios, windows, android, linux. If the OS cannot be identified, for example, during server side rendering undetermined will be returned.

    Your os is undetermined

    import { useOs } from '@mantine/hooks';
@@ -27,4 +27,4 @@
   | 'ios'
   | 'windows'
   | 'android'
-  | 'linux';

    Previous

    use-network

    Next

    use-page-leave

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file + | 'linux';

    Previous

    use-network

    Next

    use-page-leave

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-page-leave/index.html b/hooks/use-page-leave/index.html index c3932cd3b5..ca88c7f777 100644 --- a/hooks/use-page-leave/index.html +++ b/hooks/use-page-leave/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-page-leave

    Calls given function when the mouse leaves the page

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-page-leave

    Calls given function when the mouse leaves the page

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-page-leave calls given function when mouse leaves the page:

    Mouse left the page 0 times

    import { useState } from 'react';
 import { usePageLeave } from '@mantine/hooks';
@@ -15,4 +15,4 @@
   return <>Mouse left the page {leftsCount} times</>;
 }

    Definition

    -
    function usePageLeave(onPageLeave: () => void): void;

    Previous

    use-os

    Next

    use-text-selection

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function usePageLeave(onPageLeave: () => void): void;

    Previous

    use-os

    Next

    use-text-selection

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-pagination/index.html b/hooks/use-pagination/index.html index 83a7d4dc11..9f1db2a1a2 100644 --- a/hooks/use-pagination/index.html +++ b/hooks/use-pagination/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-pagination

    Manages pagination state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-pagination

    Manages pagination state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-pagination is a state management hook for Pagination component, it manages pagination with controlled and uncontrolled state:

    @@ -112,4 +112,4 @@ previous: () => void; first: () => void; last: () => void; -};

    Previous

    use-map

    Next

    use-previous

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-map

    Next

    use-previous

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-previous/index.html b/hooks/use-previous/index.html index 6a18445001..4eee5ed194 100644 --- a/hooks/use-previous/index.html +++ b/hooks/use-previous/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-previous

    Returns previous value of given state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-previous

    Returns previous value of given state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-previous stores the previous value of a state in a ref. It returns undefined on initial render and the previous value of a state after rerender:

    Current value:

    Previous value: 

    import { TextInput, Text } from '@mantine/core';
@@ -29,4 +29,4 @@
   );
 }

    Definition

    -
    function usePrevious<T>(value: T): T | undefined;

    Previous

    use-pagination

    Next

    use-queue

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function usePrevious<T>(value: T): T | undefined;

    Previous

    use-pagination

    Next

    use-queue

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-queue/index.html b/hooks/use-queue/index.html index a86333924f..623c1b80ca 100644 --- a/hooks/use-queue/index.html +++ b/hooks/use-queue/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-queue

    Manages queue of values

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-queue

    Manages queue of values

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-queue limits the number of data in current state and places the rest of it in a queue. For example, in @mantine/notifications package number of notifications that is currently displayed is limited and other new notifications are added to the queue and displayed once @@ -89,4 +89,4 @@ add: (...items: T[]) => void; update: (fn: (state: T[]) => T[]) => void; cleanQueue: () => void; -};

    Previous

    use-previous

    Next

    use-set

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-previous

    Next

    use-set

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-reduced-motion/index.html b/hooks/use-reduced-motion/index.html index 56c01f5606..7223f76858 100644 --- a/hooks/use-reduced-motion/index.html +++ b/hooks/use-reduced-motion/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-reduced-motion

    Detects if user prefers to reduce motion

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-reduced-motion

    Detects if user prefers to reduce motion

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-reduced-motion detects if user prefers to reduce motion. It uses use-media-query hook under the hood. Hook relies on window.matchMedia() API @@ -32,4 +32,4 @@ options?: { getInitialValueInEffect: boolean; } -): boolean;

    Previous

    use-orientation

    Next

    use-resize-observer

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): boolean;

    Previous

    use-orientation

    Next

    use-resize-observer

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-resize-observer/index.html b/hooks/use-resize-observer/index.html index 91bfc4328f..61d723de5a 100644 --- a/hooks/use-resize-observer/index.html +++ b/hooks/use-resize-observer/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-resize-observer

    Tracks element size and position changes with ResizeObserver

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-resize-observer

    Tracks element size and position changes with ResizeObserver

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Resize textarea by dragging its right bottom corner

    Rect: { "x": 0, "y": 0, @@ -43,4 +43,4 @@ function useResizeObserver<T extends HTMLElement = any>( options?: ResizeObserverOptions -): readonly [React.RefObject<T>, ObserverRect];

    Previous

    use-reduced-motion

    Next

    use-scroll-into-view

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): readonly [React.RefObject<T>, ObserverRect];

    Previous

    use-reduced-motion

    Next

    use-scroll-into-view

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-scroll-into-view/index.html b/hooks/use-scroll-into-view/index.html index 0938147078..0a842ffb9e 100644 --- a/hooks/use-scroll-into-view/index.html +++ b/hooks/use-scroll-into-view/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-scroll-into-view

    Scrolls given element into view

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-scroll-into-view

    Scrolls given element into view

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-scroll-into-view handles scroll behavior for any scrollable element. Basic usage works the same way as element.scrollIntoView(). Hook adjusts scrolling animation with respect to the reduced-motion user preference.

    Hello there

    import { useScrollIntoView } from '@mantine/hooks';
@@ -181,4 +181,4 @@
   offset,
   cancelable,
   isList,
-}?: ScrollIntoViewParams): ScrollIntoViewReturnType<Target, Parent>;

    Previous

    use-resize-observer

    Next

    use-viewport-size

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}?: ScrollIntoViewParams): ScrollIntoViewReturnType<Target, Parent>;

    Previous

    use-resize-observer

    Next

    use-viewport-size

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-set-state/index.html b/hooks/use-set-state/index.html index 14fefd2022..ecfee1e107 100644 --- a/hooks/use-set-state/index.html +++ b/hooks/use-set-state/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-set-state

    Manages state with setState-like API

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-set-state

    Manages state with setState-like API

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-set-state works similar to how this.setState works in class components – it shallow merges state partial into current state.

    import { useSetState } from '@mantine/hooks';
@@ -34,4 +34,4 @@
   (
     statePartial: Partial<T> | ((currentState: T) => Partial<T>)
   ) => void,
-];

    Previous

    use-set

    Next

    use-state-history

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +];

    Previous

    use-set

    Next

    use-state-history

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-set/index.html b/hooks/use-set/index.html index f5e47d76ef..367b904f4a 100644 --- a/hooks/use-set/index.html +++ b/hooks/use-set/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-set

    Use Set as React state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-set

    Use Set as React state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useSet return Set object that can be used as React state: add, clear and delete methods trigger state updates.

    Duplicate scopes are not allowed

    @mantine@mantine-tests@mantinex
    import { useState } from 'react';
@@ -43,4 +43,4 @@
   );
 }

    Definition

    -
    function useSet<T>(values?: T[]): Set<T>;

    Previous

    use-queue

    Next

    use-set-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useSet<T>(values?: T[]): Set<T>;

    Previous

    use-queue

    Next

    use-set-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-shallow-effect/index.html b/hooks/use-shallow-effect/index.html index ddce527521..46bb172c0f 100644 --- a/hooks/use-shallow-effect/index.html +++ b/hooks/use-shallow-effect/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-shallow-effect

    useEffect drop in replacement with dependencies shallow comparison

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-shallow-effect

    useEffect drop in replacement with dependencies shallow comparison

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-shallow-effect works exactly like useEffect, but performs shallow dependencies comparison instead of referential comparison:

    import { useEffect } from 'react';
 import { useShallowEffect } from '@mantine/hooks';
@@ -32,4 +32,4 @@
 
    function useShallowEffect(
   cb: () => void,
   dependencies?: React.DependencyList
-): void;
    Previous
    use-mounted
    Next
    use-form
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): void;

    Previous

    use-mounted

    Next

    use-form

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-state-history/index.html b/hooks/use-state-history/index.html index 91e1eb3b8b..6cdc2c54bb 100644 --- a/hooks/use-state-history/index.html +++ b/hooks/use-state-history/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-state-history

    Move back/forward in state history

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-state-history

    Move back/forward in state history

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useStateHistory hook is used to create a state with history, it returns current value, handlers to go back/forward and a history object with all previous values and current index.

    Current value: 1

    {
@@ -47,4 +47,4 @@
 
 function useStateHistory<T>(
   initialValue: T
-): [T, UseStateHistoryHandlers<T>, StateHistory<T>];

    Previous

    use-set-state

    Next

    use-throttled-callback

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): [T, UseStateHistoryHandlers<T>, StateHistory<T>];

    Previous

    use-set-state

    Next

    use-throttled-callback

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-text-selection/index.html b/hooks/use-text-selection/index.html index f8f42b3a04..50f2b0ab4d 100644 --- a/hooks/use-text-selection/index.html +++ b/hooks/use-text-selection/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-text-selection

    Returns current selected text on the page

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-text-selection

    Returns current selected text on the page

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-text-selection returns current text selection:

    Select some text here or anywhere on the page and it will be displayed below
    Selected text: 
    import { useTextSelection } from '@mantine/hooks';
 
@@ -18,4 +18,4 @@
   );
 }

    Definition

    -
    function useTextSelection(): Selection | null;

    Previous

    use-page-leave

    Next

    use-timeout

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useTextSelection(): Selection | null;

    Previous

    use-page-leave

    Next

    use-timeout

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-throttled-callback/index.html b/hooks/use-throttled-callback/index.html index c035c41db5..5cd5b9944b 100644 --- a/hooks/use-throttled-callback/index.html +++ b/hooks/use-throttled-callback/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-throttled-callback

    Throttles function calls

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-throttled-callback

    Throttles function calls

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useThrottledCallback accepts a function and a wait time in milliseconds. It returns a throttled version of the function that will only be called at most once every wait milliseconds.

    Throttled value: –

    import { Text, TextInput } from '@mantine/core';
@@ -28,4 +28,4 @@
 
    function useThrottledCallback<T extends (...args: any[]) => any>(
   callback: T,
   wait: number
-): (...args: Parameters<T>) => void;
    Previous
    use-state-history
    Next
    use-throttled-state
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): (...args: Parameters<T>) => void;

    Previous

    use-state-history

    Next

    use-throttled-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-throttled-state/index.html b/hooks/use-throttled-state/index.html index c6ecce8492..83ec2f6f55 100644 --- a/hooks/use-throttled-state/index.html +++ b/hooks/use-throttled-state/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-throttled-state

    Throttles state changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-throttled-state

    Throttles state changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useThrottledState works similar to useState but throttles the state updates. setThrottledState handler in the example below will be called at most once every 1000ms.

    Throttled value: –

    import { Text, TextInput } from '@mantine/core';
@@ -27,4 +27,4 @@
 
    function useThrottledState<T = any>(
   defaultValue: T,
   wait: number
-): readonly [T, (newValue: React.SetStateAction<T>) => void];
    Previous
    use-throttled-callback
    Next
    use-throttled-value
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): readonly [T, (newValue: React.SetStateAction<T>) => void];

    Previous

    use-throttled-callback

    Next

    use-throttled-value

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-throttled-value/index.html b/hooks/use-throttled-value/index.html index 4aa57d834f..061a2b0117 100644 --- a/hooks/use-throttled-value/index.html +++ b/hooks/use-throttled-value/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-throttled-value

    Throttles value changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-throttled-value

    Throttles value changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useThrottledValue accepts a value and a wait time in milliseconds. It returns a throttled value that cannot change more than once every wait milliseconds.

    Throttled value: –

    import { Text, TextInput } from '@mantine/core';
@@ -22,4 +22,4 @@
   );
 }

    Definition

    -
    function useThrottledValue<T>(value: T, wait: number): T;

    Previous

    use-throttled-state

    Next

    use-toggle

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useThrottledValue<T>(value: T, wait: number): T;

    Previous

    use-throttled-state

    Next

    use-toggle

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-timeout/index.html b/hooks/use-timeout/index.html index 28650e81f3..f012c63e77 100644 --- a/hooks/use-timeout/index.html +++ b/hooks/use-timeout/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-timeout

    Calls function in given timeout

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-timeout

    Calls function in given timeout

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Random value: 

    import { useState } from 'react';
 import { Button, Text, Group } from '@mantine/core';
 import { randomId, useTimeout } from '@mantine/hooks';
@@ -50,4 +50,4 @@
 ): {
   start: (...callbackParams: any[]) => void;
   clear: () => void;
-};

    Previous

    use-text-selection

    Next

    use-did-update

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-text-selection

    Next

    use-did-update

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-toggle/index.html b/hooks/use-toggle/index.html index 26ef5d3e53..fc487a1665 100644 --- a/hooks/use-toggle/index.html +++ b/hooks/use-toggle/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-toggle

    Switches between given values

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-toggle

    Switches between given values

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-toggle implements a common state pattern – it switches state between given values:

    import { Button } from '@mantine/core';
 import { useToggle } from '@mantine/hooks';
@@ -46,4 +46,4 @@
 
    Definition
    
 
    function useToggle<T = boolean>(
   options?: readonly T[]
-): readonly [T, (value?: React.SetStateAction<T>) => void];
    Previous
    use-throttled-value
    Next
    use-uncontrolled
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): readonly [T, (value?: React.SetStateAction<T>) => void];

    Previous

    use-throttled-value

    Next

    use-uncontrolled

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-uncontrolled/index.html b/hooks/use-uncontrolled/index.html index 8ec82c9de4..7506092751 100644 --- a/hooks/use-uncontrolled/index.html +++ b/hooks/use-uncontrolled/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-uncontrolled

    Manage state of both controlled and uncontrolled components

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-uncontrolled

    Manage state of both controlled and uncontrolled components

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-uncontrolled manages state for both controlled and uncontrolled components:

    import { useUncontrolled } from '@mantine/hooks';
 
@@ -65,4 +65,4 @@
   T, // current value
   (value: T) => void, // onChange function
   boolean, // value that indicates if input is controlled or not
-];

    Previous

    use-toggle

    Next

    use-validated-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +];

    Previous

    use-toggle

    Next

    use-validated-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-validated-state/index.html b/hooks/use-validated-state/index.html index 5a12fdf3fc..d1e47004f8 100644 --- a/hooks/use-validated-state/index.html +++ b/hooks/use-validated-state/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-validated-state

    Manages state with validation

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-validated-state

    Manages state with validation

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-validated-state validates state with a given rule each time state is set. It returns an object with current validation state, last valid value and current value:

    import { useValidatedState } from '@mantine/hooks';
@@ -71,4 +71,4 @@
     valid: boolean;
   },
   (val: T) => void,
-];

    Previous

    use-uncontrolled

    Next

    use-clipboard

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +];

    Previous

    use-uncontrolled

    Next

    use-clipboard

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-viewport-size/index.html b/hooks/use-viewport-size/index.html index 998a9ec26b..cefc2f1a87 100644 --- a/hooks/use-viewport-size/index.html +++ b/hooks/use-viewport-size/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-viewport-size

    Returns viewport width and height and subscribes to changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-viewport-size

    Returns viewport width and height and subscribes to changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-viewport-size returns current viewport's width and height, it subscribes to resize and orientationchange events, during ssr hook will return { width: 0, height: 0 }:

    Width: 0, height: 0

    import { useViewportSize } from '@mantine/hooks';
@@ -17,4 +17,4 @@
 
    function useViewportSize(): {
   height: number;
   width: number;
-};
    Previous
    use-scroll-into-view
    Next
    use-window-event
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-scroll-into-view

    Next

    use-window-event

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-window-event/index.html b/hooks/use-window-event/index.html index e8f4eb5325..a1aec7b117 100644 --- a/hooks/use-window-event/index.html +++ b/hooks/use-window-event/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-window-event

    Adds event listener to the window object on component mount and removes the event when the component unmounts

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-window-event

    Adds event listener to the window object on component mount and removes the event when the component unmounts

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-window-event adds event listener to window object on component mount and removes it on unmount:

    import { useEffect } from 'react';
 import { useWindowEvent } from '@mantine/hooks';
@@ -42,4 +42,4 @@
   type: K,
   listener: (this: Window, ev: WindowEventMap[K]) => any,
   options?: boolean | AddEventListenerOptions
-): void;

    Previous

    use-viewport-size

    Next

    use-window-scroll

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): void;

    Previous

    use-viewport-size

    Next

    use-window-scroll

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-window-scroll/index.html b/hooks/use-window-scroll/index.html index 534c858b3e..90c79faa49 100644 --- a/hooks/use-window-scroll/index.html +++ b/hooks/use-window-scroll/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-window-scroll

    Tracks window scroll position

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-window-scroll

    Tracks window scroll position

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-window-scroll returns current scroll position and a function to scroll smoothly to given position:

    Scroll position x: 0, y: 0

    import { useWindowScroll } from '@mantine/hooks';
 import { Button, Text, Group } from '@mantine/core';
@@ -25,4 +25,4 @@
 
    function useWindowScroll(): readonly [
   { x: number; y: number },
   (position: { x?: number; y?: number }) => void,
-];
    Previous
    use-window-event
    Next
    use-counter
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +];

    Previous

    use-window-event

    Next

    use-counter

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/index.html b/index.html index a63cbb6f16..d58715d35f 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever – Mantine includes more than 100 customizable components and 50 hooks to cover you in any situation

    Free and open source

    All packages have MIT license, you can use Mantine in any project

    TypeScript based

    Build type safe applications, all components and hooks export types

    Use anywhere

    Mantine supports all modern frameworks: Next.js, Remix, etc.

    Get startedGitHub

    100+ components

    Every input can have description...

    ...and error

    Dark color scheme

    Dark and light theme

    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.

    import { MantineProvider } from '@mantine/core';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever – Mantine includes more than 100 customizable components and 50 hooks to cover you in any situation
    Free and open source
    All packages have MIT license, you can use Mantine in any project
    TypeScript based
    Build type safe applications, all components and hooks export types
    Use anywhere
    Mantine supports all modern frameworks: Next.js, Remix, etc.
    Get startedGitHub
    100+ components
    Every input can have description...
    ...and error
    Dark color scheme
    Dark and light theme
    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.
    import { MantineProvider } from '@mantine/core';
 
 function Demo() {
   return (
@@ -89,4 +89,4 @@
       <div>Width: {width}, height: {height}</div>
     </>
   );
-}

    What people say

    sideral
    @sideral

    You nailed it!

    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 @rtivital and the contributors!

    smsuraj100
    @smsuraj100

    One of the best UI libraries I've come across.

    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 :)

    Thank you so much for this.

    leighton-carr
    @leighton-carr

    Absurdly good

    Hope this kind of post is ok - just wanted to say thank you.

    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.

    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.

    Bravo, thank you.

    Gitgud6969
    @Gitgud6969

    Thank you mantine 💘

    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 company 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!

    SeeSharpCode
    @SeeSharpCode

    A solution for every problem

    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!

    OmkoBass
    @OmkoBass

    Thank you Mantine!

    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.

    wvha
    @wvha

    Mantine >>>

    I started using Mantine for a personal project and it covers so many cases!! Enjoying every part of it so far and can't wait to get more in-depth with it.

    adamhp
    @adamhp

    Insane documentation

    I just have to say that the level of documentation, examples, and pure utility this provides is insane. Thanks to all the contributors.

    View more user feedback

    Ready to get started?

    Mantine can be used both for SPA and SSR applications. Follow one of the getting started guides to build an application with Mantine using Vite, Next.js, Remix, RedwoodJS or Gatsby:

    Recommended

    Vite

    Best choice for a single page application (SPA)

    Recommended

    Next.js

    Best choice for an application with SSR

    Remix

    Get started with Remix

    Redwood

    Get started with RedwoodJS

    Gatsby

    Get started with Gatsby

    Join the community

    Chat on Discord
    Join a community of 10,000+ developers to ask questions, share feedback and explore upcoming features
    Start a discussion
    Request new features, ask questions and provide feedback with GitHub discussions
    Help center
    Explore 30+ frequently asked questions
    Follow on X
    Get notified about new minor and major releases
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    What people say

    sideral
    @sideral

    You nailed it!

    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 @rtivital and the contributors!

    smsuraj100
    @smsuraj100

    One of the best UI libraries I've come across.

    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 :)

    Thank you so much for this.

    leighton-carr
    @leighton-carr

    Absurdly good

    Hope this kind of post is ok - just wanted to say thank you.

    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.

    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.

    Bravo, thank you.

    Gitgud6969
    @Gitgud6969

    Thank you mantine 💘

    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 company 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!

    SeeSharpCode
    @SeeSharpCode

    A solution for every problem

    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!

    OmkoBass
    @OmkoBass

    Thank you Mantine!

    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.

    wvha
    @wvha

    Mantine >>>

    I started using Mantine for a personal project and it covers so many cases!! Enjoying every part of it so far and can't wait to get more in-depth with it.

    adamhp
    @adamhp

    Insane documentation

    I just have to say that the level of documentation, examples, and pure utility this provides is insane. Thanks to all the contributors.

    View more user feedback

    Ready to get started?

    Mantine can be used both for SPA and SSR applications. Follow one of the getting started guides to build an application with Mantine using Vite, Next.js, Remix, RedwoodJS or Gatsby:

    Recommended

    Vite

    Best choice for a single page application (SPA)

    Recommended

    Next.js

    Best choice for an application with SSR

    Remix

    Get started with Remix

    Redwood

    Get started with RedwoodJS

    Gatsby

    Get started with Gatsby

    Join the community

    Chat on Discord
    Join a community of 10,000+ developers to ask questions, share feedback and explore upcoming features
    Start a discussion
    Request new features, ask questions and provide feedback with GitHub discussions
    Help center
    Explore 30+ frequently asked questions
    Follow on X
    Get notified about new minor and major releases
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/others/carousel/index.html b/others/carousel/index.html index 653c3a47cc..7597db585f 100644 --- a/others/carousel/index.html +++ b/others/carousel/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file diff --git a/others/code-highlight/index.html b/others/code-highlight/index.html index cd72d9eb9e..6989cbf411 100644 --- a/others/code-highlight/index.html +++ b/others/code-highlight/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file diff --git a/others/dropzone/index.html b/others/dropzone/index.html index 718e516331..477dc25aaf 100644 --- a/others/dropzone/index.html +++ b/others/dropzone/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file diff --git a/others/modals/index.html b/others/modals/index.html index 6267bdc6d8..f2175b545a 100644 --- a/others/modals/index.html +++ b/others/modals/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file diff --git a/others/notifications/index.html b/others/notifications/index.html index b847479cd7..4d119a7980 100644 --- a/others/notifications/index.html +++ b/others/notifications/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file diff --git a/others/nprogress/index.html b/others/nprogress/index.html index e8677f90ee..8cb498d3ed 100644 --- a/others/nprogress/index.html +++ b/others/nprogress/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file diff --git a/others/spotlight/index.html b/others/spotlight/index.html index d3fab8939a..cafe4b8a36 100644 --- a/others/spotlight/index.html +++ b/others/spotlight/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file diff --git a/others/tiptap/index.html b/others/tiptap/index.html index b3b729692e..5fc379f355 100644 --- a/others/tiptap/index.html +++ b/others/tiptap/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file diff --git a/overview/index.html b/overview/index.html index 5ae555ddee..87a7c1caf8 100644 --- a/overview/index.html +++ b/overview/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    API overview

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    API overview

    This guide will help you get familiar with core Mantine concepts. Please read this guide, theming and styles sections before starting development to learn about all of the available theming and styling features.

    @@ -276,4 +276,4 @@ <Tabs.Panel value="account">Account panel</Tabs.Panel> </Tabs> ); -}
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml index 20555fb709..48df3b657a 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -1,297 +1,297 @@ -https://mantine.dev2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/4042024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/about2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/app-shell2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/colors-generator2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/combobox2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/contribute2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/getting-started2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/overview2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/submit-template2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/templates-usage2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/charts/area-chart2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/charts/bar-chart2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/charts/bubble-chart2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/charts/composite-chart2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/charts/donut-chart2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/charts/funnel-chart2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/charts/getting-started2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/charts/line-chart2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/charts/pie-chart2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/charts/radar-chart2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/charts/radial-bar-chart2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/charts/scatter-chart2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/changelog/7-0-02024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/charts/sparkline2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/changelog/7-1-02024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/changelog/7-10-02024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/changelog/7-11-02024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/changelog/7-12-02024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/changelog/7-13-02024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/changelog/7-14-02024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/changelog/7-3-02024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/changelog/7-2-02024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/changelog/7-4-02024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/changelog/7-5-02024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/changelog/7-6-02024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/changelog/7-7-02024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/changelog/7-9-02024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/changelog/7-8-02024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/changelog/previous-versions2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/changelog/all-releases2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/dates/calendar2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/dates/date-input2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/dates/date-picker2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/dates/date-picker-input2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/dates/date-time-picker2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/dates/dates-provider2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/dates/month-picker2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/dates/getting-started2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/dates/month-picker-input2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/dates/time-input2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/dates/year-picker-input2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/dates/year-picker2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/accordion2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/action-icon2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/alert2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/affix2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/anchor2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/angle-slider2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/app-shell2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/aspect-ratio2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/autocomplete2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/avatar2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/background-image2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/badge2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/blockquote2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/breadcrumbs2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/box2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/burger2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/button2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/card2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/checkbox2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/center2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/close-button2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/code2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/chip2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/collapse2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/color-input2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/color-picker2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/color-swatch2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/combobox2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/container2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/copy-button2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/divider2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/dialog2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/drawer2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/fieldset2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/file-input2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/file-button2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/flex2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/floating-indicator2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/focus-trap2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/group2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/grid2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/highlight2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/hover-card2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/image2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/indicator2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/input2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/json-input2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/kbd2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/list2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/loader2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/loading-overlay2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/mark2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/menu2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/modal2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/multi-select2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/native-select2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/nav-link2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/number-formatter2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/notification2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/overlay2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/number-input2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/paper2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/pagination2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/pill2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/password-input2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/pills-input2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/pin-input2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/popover2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/portal2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/progress2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/radio2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/ring-progress2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/rating2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/scroll-area2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/segmented-control2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/semi-circle-progress2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/select2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/skeleton2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/simple-grid2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/slider2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/space2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/spoiler2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/stack2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/stepper2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/switch2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/table2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/tabs2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/text2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/tags-input2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/textarea2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/text-input2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/theme-icon2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/timeline2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/title2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/tree2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/transition2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/tooltip2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/typography-styles-provider2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/unstyled-button2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/form/create-form-context2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/form/errors2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/form/actions2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/core/visually-hidden2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/form/get-input-props2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/form/nested2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/form/recipes2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/form/status2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/form/uncontrolled2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/form/schema-validation2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/form/use-field2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/form/use-form2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/form/validation2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/form/validators2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/form/values2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/guides/6x-to-7x2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/guides/javascript2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/guides/gatsby2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/guides/icons2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/guides/functions-reference2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/guides/jest2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/guides/next2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/guides/polymorphic2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/guides/remix2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/guides/redwood2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/guides/storybook2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/guides/typescript2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/others/carousel2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/guides/vitest2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/others/code-highlight2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/guides/vite2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/others/notifications2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/others/modals2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/others/dropzone2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/others/nprogress2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/others/spotlight2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/others/tiptap2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/hooks/use-click-outside2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/hooks/use-color-scheme2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/hooks/use-clipboard2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/hooks/use-debounced-callback2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/hooks/use-counter2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/hooks/use-debounced-state2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/hooks/use-debounced-value2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/hooks/use-did-update2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/hooks/use-disclosure2024-11-12T15:35:49.492Zdaily0.7 -https://mantine.dev/hooks/use-document-title2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-document-visibility2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-element-size2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-event-listener2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-eye-dropper2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-favicon2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-fetch2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-focus-return2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-focus-trap2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-focus-within2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-force-update2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-fullscreen2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-hash2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-headroom2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-hotkeys2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-id2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-hover2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-in-viewport2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-idle2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-input-state2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-intersection2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-interval2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-is-first-render2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-isomorphic-effect2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-local-storage2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-map2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-logger2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-list-state2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-media-query2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-merged-ref2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-mouse2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-mounted2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-move2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-mutation-observer2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-network2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-orientation2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-page-leave2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-pagination2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-os2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-previous2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-queue2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-resize-observer2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-scroll-into-view2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-set2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-reduced-motion2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-set-state2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-state-history2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-shallow-effect2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-text-selection2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-throttled-callback2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-throttled-value2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-timeout2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-toggle2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-uncontrolled2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-throttled-state2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-validated-state2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-window-event2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-viewport-size2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/hooks/use-window-scroll2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/color-functions2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/css-files-list2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/css-modules2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/css-variables2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/css-variables-list2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/data-attributes2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/emotion2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/global-styles2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/mantine-styles2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/postcss-preset2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/responsive2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/rem2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/rtl2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/sass2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/style2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/styles-api2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/style-props2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/styles-overview2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/styles-performance2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/unstyled2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/vanilla-extract2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/styles/variants-sizes2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/theming/color-schemes2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/theming/colors2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/theming/default-theme2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/theming/default-props2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/theming/mantine-provider2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/theming/typography2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/x/carousel2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/x/code-highlight2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/theming/theme-object2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/x/dropzone2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/x/notifications2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/x/nprogress2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/x/spotlight2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/x/modals2024-11-12T15:35:49.493Zdaily0.7 -https://mantine.dev/x/tiptap2024-11-12T15:35:49.493Zdaily0.7 +https://mantine.dev2024-11-12T16:09:19.247Zdaily0.7 +https://mantine.dev/4042024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/app-shell2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/about2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/combobox2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/colors-generator2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/contribute2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/getting-started2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/overview2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/templates-usage2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/submit-template2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/changelog/7-0-02024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/changelog/7-1-02024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/changelog/7-10-02024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/changelog/7-13-02024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/changelog/7-12-02024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/changelog/7-2-02024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/changelog/7-3-02024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/changelog/7-14-02024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/changelog/7-5-02024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/changelog/7-4-02024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/changelog/7-11-02024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/changelog/7-6-02024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/changelog/7-8-02024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/changelog/7-7-02024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/changelog/all-releases2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/changelog/previous-versions2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/changelog/7-9-02024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/charts/area-chart2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/charts/bar-chart2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/charts/composite-chart2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/charts/donut-chart2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/charts/getting-started2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/charts/bubble-chart2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/charts/pie-chart2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/charts/line-chart2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/charts/radial-bar-chart2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/charts/funnel-chart2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/charts/scatter-chart2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/charts/sparkline2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/dates/calendar2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/dates/date-input2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/charts/radar-chart2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/dates/date-picker-input2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/dates/date-time-picker2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/dates/dates-provider2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/dates/date-picker2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/dates/getting-started2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/dates/month-picker2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/dates/month-picker-input2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/dates/time-input2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/dates/year-picker-input2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/dates/year-picker2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/guides/6x-to-7x2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/guides/gatsby2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/guides/icons2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/guides/functions-reference2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/guides/javascript2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/guides/next2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/guides/jest2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/guides/redwood2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/guides/polymorphic2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/guides/typescript2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/guides/storybook2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/guides/remix2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/guides/vitest2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/accordion2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/action-icon2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/affix2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/alert2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/anchor2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/guides/vite2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/angle-slider2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/app-shell2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/aspect-ratio2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/background-image2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/avatar2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/autocomplete2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/badge2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/blockquote2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/breadcrumbs2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/box2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/burger2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/button2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/center2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/chip2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/checkbox2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/close-button2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/collapse2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/card2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/code2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/color-picker2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/color-swatch2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/combobox2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/container2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/color-input2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/copy-button2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/dialog2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/divider2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/drawer2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/file-input2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/flex2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/floating-indicator2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/focus-trap2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/file-button2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/grid2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/group2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/highlight2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/hover-card2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/fieldset2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/image2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/indicator2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/json-input2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/list2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/kbd2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/input2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/loader2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/mark2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/modal2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/loading-overlay2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/multi-select2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/native-select2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/nav-link2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/notification2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/number-formatter2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/number-input2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/menu2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/overlay2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/pagination2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/paper2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/password-input2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/pills-input2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/pill2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/pin-input2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/popover2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/portal2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/progress2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/radio2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/rating2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/ring-progress2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/scroll-area2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/segmented-control2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/select2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/semi-circle-progress2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/simple-grid2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/spoiler2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/skeleton2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/space2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/stepper2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/stack2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/table2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/switch2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/tabs2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/slider2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/text2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/tags-input2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/text-input2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/textarea2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/tooltip2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/timeline2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/title2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/transition2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/theme-icon2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/unstyled-button2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/typography-styles-provider2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/tree2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/core/visually-hidden2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-clipboard2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-click-outside2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-color-scheme2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-debounced-callback2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-debounced-state2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-debounced-value2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-disclosure2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-did-update2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-counter2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-document-visibility2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-element-size2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-document-title2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-event-listener2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-eye-dropper2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-fetch2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-focus-trap2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-force-update2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-focus-return2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-favicon2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-headroom2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-focus-within2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-fullscreen2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-hotkeys2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-id2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-hover2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-hash2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-idle2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-intersection2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-interval2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-input-state2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-is-first-render2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-in-viewport2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-isomorphic-effect2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-list-state2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-map2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-logger2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-media-query2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-merged-ref2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-mouse2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-local-storage2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-move2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-mounted2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-network2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-mutation-observer2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-orientation2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-page-leave2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-previous2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-pagination2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-reduced-motion2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-queue2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-resize-observer2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-os2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-scroll-into-view2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-set-state2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-set2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-state-history2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-throttled-callback2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-text-selection2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-throttled-state2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-timeout2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-shallow-effect2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-throttled-value2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-uncontrolled2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-toggle2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-window-event2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-window-scroll2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/form/actions2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-viewport-size2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/form/create-form-context2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/form/errors2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/form/get-input-props2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/hooks/use-validated-state2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/form/nested2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/form/recipes2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/form/schema-validation2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/form/status2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/form/use-field2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/form/uncontrolled2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/form/validation2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/form/use-form2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/form/validators2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/form/values2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/others/carousel2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/others/dropzone2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/others/modals2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/others/code-highlight2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/others/notifications2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/others/nprogress2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/others/spotlight2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/color-functions2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/others/tiptap2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/css-files-list2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/css-modules2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/css-variables2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/css-variables-list2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/data-attributes2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/emotion2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/global-styles2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/mantine-styles2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/postcss-preset2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/rem2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/responsive2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/rtl2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/sass2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/style2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/style-props2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/styles-api2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/styles-overview2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/styles-performance2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/unstyled2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/vanilla-extract2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/styles/variants-sizes2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/x/carousel2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/x/code-highlight2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/x/modals2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/x/notifications2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/x/dropzone2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/x/tiptap2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/x/nprogress2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/x/spotlight2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/theming/color-schemes2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/theming/colors2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/theming/default-props2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/theming/default-theme2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/theming/mantine-provider2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/theming/typography2024-11-12T16:09:19.248Zdaily0.7 +https://mantine.dev/theming/theme-object2024-11-12T16:09:19.248Zdaily0.7 \ No newline at end of file diff --git a/styles/color-functions/index.html b/styles/color-functions/index.html index 3b62fa1535..480358a33c 100644 --- a/styles/color-functions/index.html +++ b/styles/color-functions/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Color functions

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Color functions

    @mantine/core package exports several functions that can be used to manipulate colors or extract information before using them as CSS value.

    darken and lighten

    @@ -145,4 +145,4 @@ luminance('#fff'); // -> 1 luminance('#000'); // -> 0 -luminance('#4578FC'); // -> 0.21726425554966

    Previous

    Style props

    Next

    RTL (right-to-left)

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +luminance('#4578FC'); // -> 0.21726425554966

    Previous

    Style props

    Next

    RTL (right-to-left)

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/css-files-list/index.html b/styles/css-files-list/index.html index ea0633e0b2..da271192c3 100644 --- a/styles/css-files-list/index.html +++ b/styles/css-files-list/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CSS files list

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CSS files list

    This page contains a list of CSS files that you can import from @mantine/core package as a replacement for @mantine/core/styles.css.

    Components dependencies

    @@ -46,4 +46,4 @@ import '@mantine/core/styles/Button.css'; import '@mantine/core/styles/UnstyledButton.css';

    Files list

    -
    ComponentImport
    global
    import '@mantine/core/styles/global.css';
    Accordion
    import '@mantine/core/styles/Accordion.css';
    ActionIcon
    import '@mantine/core/styles/ActionIcon.css';
    Affix
    import '@mantine/core/styles/Affix.css';
    Alert
    import '@mantine/core/styles/Alert.css';
    Anchor
    import '@mantine/core/styles/Anchor.css';
    AngleSlider
    import '@mantine/core/styles/AngleSlider.css';
    AppShell
    import '@mantine/core/styles/AppShell.css';
    AspectRatio
    import '@mantine/core/styles/AspectRatio.css';
    Avatar
    import '@mantine/core/styles/Avatar.css';
    BackgroundImage
    import '@mantine/core/styles/BackgroundImage.css';
    Badge
    import '@mantine/core/styles/Badge.css';
    Blockquote
    import '@mantine/core/styles/Blockquote.css';
    Breadcrumbs
    import '@mantine/core/styles/Breadcrumbs.css';
    Burger
    import '@mantine/core/styles/Burger.css';
    Card
    import '@mantine/core/styles/Card.css';
    Button
    import '@mantine/core/styles/Button.css';
    Center
    import '@mantine/core/styles/Center.css';
    Checkbox
    import '@mantine/core/styles/Checkbox.css';
    CloseButton
    import '@mantine/core/styles/CloseButton.css';
    Chip
    import '@mantine/core/styles/Chip.css';
    Code
    import '@mantine/core/styles/Code.css';
    ColorInput
    import '@mantine/core/styles/ColorInput.css';
    ColorPicker
    import '@mantine/core/styles/ColorPicker.css';
    ColorSwatch
    import '@mantine/core/styles/ColorSwatch.css';
    Combobox
    import '@mantine/core/styles/Combobox.css';
    Container
    import '@mantine/core/styles/Container.css';
    Dialog
    import '@mantine/core/styles/Dialog.css';
    Divider
    import '@mantine/core/styles/Divider.css';
    Fieldset
    import '@mantine/core/styles/Fieldset.css';
    Drawer
    import '@mantine/core/styles/Drawer.css';
    FloatingIndicator
    import '@mantine/core/styles/FloatingIndicator.css';
    Flex
    import '@mantine/core/styles/Flex.css';
    Group
    import '@mantine/core/styles/Group.css';
    Grid
    import '@mantine/core/styles/Grid.css';
    Image
    import '@mantine/core/styles/Image.css';
    Indicator
    import '@mantine/core/styles/Indicator.css';
    InlineInput
    import '@mantine/core/styles/InlineInput.css';
    Input
    import '@mantine/core/styles/Input.css';
    Loader
    import '@mantine/core/styles/Loader.css';
    Kbd
    import '@mantine/core/styles/Kbd.css';
    List
    import '@mantine/core/styles/List.css';
    LoadingOverlay
    import '@mantine/core/styles/LoadingOverlay.css';
    ModalBase
    import '@mantine/core/styles/ModalBase.css';
    Mark
    import '@mantine/core/styles/Mark.css';
    Menu
    import '@mantine/core/styles/Menu.css';
    Modal
    import '@mantine/core/styles/Modal.css';
    Notification
    import '@mantine/core/styles/Notification.css';
    NavLink
    import '@mantine/core/styles/NavLink.css';
    NumberInput
    import '@mantine/core/styles/NumberInput.css';
    Overlay
    import '@mantine/core/styles/Overlay.css';
    Paper
    import '@mantine/core/styles/Paper.css';
    Pagination
    import '@mantine/core/styles/Pagination.css';
    PasswordInput
    import '@mantine/core/styles/PasswordInput.css';
    Popover
    import '@mantine/core/styles/Popover.css';
    PinInput
    import '@mantine/core/styles/PinInput.css';
    PillsInput
    import '@mantine/core/styles/PillsInput.css';
    Pill
    import '@mantine/core/styles/Pill.css';
    Rating
    import '@mantine/core/styles/Rating.css';
    Progress
    import '@mantine/core/styles/Progress.css';
    Radio
    import '@mantine/core/styles/Radio.css';
    RingProgress
    import '@mantine/core/styles/RingProgress.css';
    SemiCircleProgress
    import '@mantine/core/styles/SemiCircleProgress.css';
    ScrollArea
    import '@mantine/core/styles/ScrollArea.css';
    SegmentedControl
    import '@mantine/core/styles/SegmentedControl.css';
    SimpleGrid
    import '@mantine/core/styles/SimpleGrid.css';
    Spoiler
    import '@mantine/core/styles/Spoiler.css';
    Slider
    import '@mantine/core/styles/Slider.css';
    Skeleton
    import '@mantine/core/styles/Skeleton.css';
    Stack
    import '@mantine/core/styles/Stack.css';
    Tabs
    import '@mantine/core/styles/Tabs.css';
    Switch
    import '@mantine/core/styles/Switch.css';
    Table
    import '@mantine/core/styles/Table.css';
    Stepper
    import '@mantine/core/styles/Stepper.css';
    Text
    import '@mantine/core/styles/Text.css';
    ThemeIcon
    import '@mantine/core/styles/ThemeIcon.css';
    Timeline
    import '@mantine/core/styles/Timeline.css';
    Title
    import '@mantine/core/styles/Title.css';
    Tooltip
    import '@mantine/core/styles/Tooltip.css';
    Tree
    import '@mantine/core/styles/Tree.css';
    VisuallyHidden
    import '@mantine/core/styles/VisuallyHidden.css';
    TypographyStylesProvider
    import '@mantine/core/styles/TypographyStylesProvider.css';
    UnstyledButton
    import '@mantine/core/styles/UnstyledButton.css';
    CheckboxCard
    import '@mantine/core/styles/CheckboxCard.css';
    CheckboxIndicator
    import '@mantine/core/styles/CheckboxIndicator.css';
    RadioIndicator
    import '@mantine/core/styles/RadioIndicator.css';
    RadioCard
    import '@mantine/core/styles/RadioCard.css';

    Previous

    Mantine styles

    Next

    CSS modules

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    ComponentImport
    global
    import '@mantine/core/styles/global.css';
    ActionIcon
    import '@mantine/core/styles/ActionIcon.css';
    Accordion
    import '@mantine/core/styles/Accordion.css';
    Affix
    import '@mantine/core/styles/Affix.css';
    Alert
    import '@mantine/core/styles/Alert.css';
    AngleSlider
    import '@mantine/core/styles/AngleSlider.css';
    Anchor
    import '@mantine/core/styles/Anchor.css';
    AppShell
    import '@mantine/core/styles/AppShell.css';
    AspectRatio
    import '@mantine/core/styles/AspectRatio.css';
    Badge
    import '@mantine/core/styles/Badge.css';
    Avatar
    import '@mantine/core/styles/Avatar.css';
    BackgroundImage
    import '@mantine/core/styles/BackgroundImage.css';
    Blockquote
    import '@mantine/core/styles/Blockquote.css';
    Button
    import '@mantine/core/styles/Button.css';
    Card
    import '@mantine/core/styles/Card.css';
    Burger
    import '@mantine/core/styles/Burger.css';
    Breadcrumbs
    import '@mantine/core/styles/Breadcrumbs.css';
    Center
    import '@mantine/core/styles/Center.css';
    Chip
    import '@mantine/core/styles/Chip.css';
    CloseButton
    import '@mantine/core/styles/CloseButton.css';
    Checkbox
    import '@mantine/core/styles/Checkbox.css';
    Code
    import '@mantine/core/styles/Code.css';
    ColorInput
    import '@mantine/core/styles/ColorInput.css';
    ColorPicker
    import '@mantine/core/styles/ColorPicker.css';
    ColorSwatch
    import '@mantine/core/styles/ColorSwatch.css';
    Container
    import '@mantine/core/styles/Container.css';
    Combobox
    import '@mantine/core/styles/Combobox.css';
    Dialog
    import '@mantine/core/styles/Dialog.css';
    Divider
    import '@mantine/core/styles/Divider.css';
    Fieldset
    import '@mantine/core/styles/Fieldset.css';
    Drawer
    import '@mantine/core/styles/Drawer.css';
    Flex
    import '@mantine/core/styles/Flex.css';
    Grid
    import '@mantine/core/styles/Grid.css';
    FloatingIndicator
    import '@mantine/core/styles/FloatingIndicator.css';
    Image
    import '@mantine/core/styles/Image.css';
    Group
    import '@mantine/core/styles/Group.css';
    InlineInput
    import '@mantine/core/styles/InlineInput.css';
    Input
    import '@mantine/core/styles/Input.css';
    Indicator
    import '@mantine/core/styles/Indicator.css';
    Kbd
    import '@mantine/core/styles/Kbd.css';
    List
    import '@mantine/core/styles/List.css';
    Loader
    import '@mantine/core/styles/Loader.css';
    LoadingOverlay
    import '@mantine/core/styles/LoadingOverlay.css';
    Mark
    import '@mantine/core/styles/Mark.css';
    Menu
    import '@mantine/core/styles/Menu.css';
    Modal
    import '@mantine/core/styles/Modal.css';
    ModalBase
    import '@mantine/core/styles/ModalBase.css';
    NavLink
    import '@mantine/core/styles/NavLink.css';
    Notification
    import '@mantine/core/styles/Notification.css';
    NumberInput
    import '@mantine/core/styles/NumberInput.css';
    Overlay
    import '@mantine/core/styles/Overlay.css';
    Paper
    import '@mantine/core/styles/Paper.css';
    PasswordInput
    import '@mantine/core/styles/PasswordInput.css';
    Pill
    import '@mantine/core/styles/Pill.css';
    Pagination
    import '@mantine/core/styles/Pagination.css';
    Popover
    import '@mantine/core/styles/Popover.css';
    PillsInput
    import '@mantine/core/styles/PillsInput.css';
    PinInput
    import '@mantine/core/styles/PinInput.css';
    Progress
    import '@mantine/core/styles/Progress.css';
    Radio
    import '@mantine/core/styles/Radio.css';
    RingProgress
    import '@mantine/core/styles/RingProgress.css';
    Rating
    import '@mantine/core/styles/Rating.css';
    ScrollArea
    import '@mantine/core/styles/ScrollArea.css';
    SegmentedControl
    import '@mantine/core/styles/SegmentedControl.css';
    SemiCircleProgress
    import '@mantine/core/styles/SemiCircleProgress.css';
    SimpleGrid
    import '@mantine/core/styles/SimpleGrid.css';
    Skeleton
    import '@mantine/core/styles/Skeleton.css';
    Slider
    import '@mantine/core/styles/Slider.css';
    Stack
    import '@mantine/core/styles/Stack.css';
    Spoiler
    import '@mantine/core/styles/Spoiler.css';
    Stepper
    import '@mantine/core/styles/Stepper.css';
    Switch
    import '@mantine/core/styles/Switch.css';
    Table
    import '@mantine/core/styles/Table.css';
    Tabs
    import '@mantine/core/styles/Tabs.css';
    Text
    import '@mantine/core/styles/Text.css';
    ThemeIcon
    import '@mantine/core/styles/ThemeIcon.css';
    Timeline
    import '@mantine/core/styles/Timeline.css';
    Title
    import '@mantine/core/styles/Title.css';
    Tooltip
    import '@mantine/core/styles/Tooltip.css';
    Tree
    import '@mantine/core/styles/Tree.css';
    TypographyStylesProvider
    import '@mantine/core/styles/TypographyStylesProvider.css';
    UnstyledButton
    import '@mantine/core/styles/UnstyledButton.css';
    VisuallyHidden
    import '@mantine/core/styles/VisuallyHidden.css';
    CheckboxCard
    import '@mantine/core/styles/CheckboxCard.css';
    CheckboxIndicator
    import '@mantine/core/styles/CheckboxIndicator.css';
    RadioCard
    import '@mantine/core/styles/RadioCard.css';
    RadioIndicator
    import '@mantine/core/styles/RadioIndicator.css';

    Previous

    Mantine styles

    Next

    CSS modules

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/css-modules/index.html b/styles/css-modules/index.html index d570d53c1e..1d85522cac 100644 --- a/styles/css-modules/index.html +++ b/styles/css-modules/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CSS modules

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CSS modules

    All Mantine components use CSS modules for styling. It is recommended to use CSS modules in your project as well, but it is not required – Mantine components are fully compatible with any third-party styling solution and native CSS.

    @@ -160,4 +160,4 @@
  • It is hard to customize styles based on data-* attributes when using utility-based CSS libraries
  • It is impossible to style inner elements of Mantine components with static selectors when using styled-components and other similar libraries if component uses Portal because some elements will be rendered outside of the component root and inner elements are not part of the component tree
    • -

    Previous

    CSS files list

    Next

    PostCSS preset

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    CSS files list

    Next

    PostCSS preset

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/css-variables-list/index.html b/styles/css-variables-list/index.html index 0925684930..91af9707ff 100644 --- a/styles/css-variables-list/index.html +++ b/styles/css-variables-list/index.html @@ -4,6 +4,6 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Default CSS variables list

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Default CSS variables list

    This page contains a list of all Mantine CSS variables that are generated from default theme.

    -

    CSS variables not depending on color scheme

    --mantine-scale1
    --mantine-cursor-typedefault
    --mantine-color-schemelight dark
    --mantine-webkit-font-smoothingantialiased
    --mantine-moz-font-smoothinggrayscale
    --mantine-color-white#fff
    --mantine-color-black#000
    --mantine-line-height1.55
    --mantine-font-family-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji
    --mantine-font-family-monospaceui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
    --mantine-font-family-headings-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji
    --mantine-heading-font-weight700
    --mantine-heading-text-wrapwrap
    --mantine-radius-default0.25rem
    --mantine-primary-color-filledvar(--mantine-color-blue-filled)
    --mantine-primary-color-filled-hovervar(--mantine-color-blue-filled-hover)
    --mantine-primary-color-lightvar(--mantine-color-blue-light)
    --mantine-primary-color-light-hovervar(--mantine-color-blue-light-hover)
    --mantine-primary-color-light-colorvar(--mantine-color-blue-light-color)
    --mantine-breakpoint-xs36em
    --mantine-breakpoint-sm48em
    --mantine-breakpoint-md62em
    --mantine-breakpoint-lg75em
    --mantine-breakpoint-xl88em
    --mantine-spacing-xs0.625rem
    --mantine-spacing-sm0.75rem
    --mantine-spacing-md1rem
    --mantine-spacing-lg1.25rem
    --mantine-spacing-xl2rem
    --mantine-font-size-xs0.75rem
    --mantine-font-size-sm0.875rem
    --mantine-font-size-md1rem
    --mantine-font-size-lg1.125rem
    --mantine-font-size-xl1.25rem
    --mantine-line-height-xs1.4
    --mantine-line-height-sm1.45
    --mantine-line-height-md1.55
    --mantine-line-height-lg1.6
    --mantine-line-height-xl1.65
    --mantine-shadow-xs0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1)
    --mantine-shadow-sm0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 0.625rem 0.9375rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.4375rem 0.4375rem -0.3125rem
    --mantine-shadow-md0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.25rem 1.5625rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.625rem 0.625rem -0.3125rem
    --mantine-shadow-lg0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.75rem 1.4375rem -0.4375rem, rgba(0, 0, 0, 0.04) 0 0.75rem 0.75rem -0.4375rem
    --mantine-shadow-xl0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 2.25rem 1.75rem -0.4375rem, rgba(0, 0, 0, 0.04) 0 1.0625rem 1.0625rem -0.4375rem
    --mantine-radius-xs0.125rem
    --mantine-radius-sm0.25rem
    --mantine-radius-md0.5rem
    --mantine-radius-lg1rem
    --mantine-radius-xl2rem
    --mantine-primary-color-0var(--mantine-color-blue-0)
    --mantine-primary-color-1var(--mantine-color-blue-1)
    --mantine-primary-color-2var(--mantine-color-blue-2)
    --mantine-primary-color-3var(--mantine-color-blue-3)
    --mantine-primary-color-4var(--mantine-color-blue-4)
    --mantine-primary-color-5var(--mantine-color-blue-5)
    --mantine-primary-color-6var(--mantine-color-blue-6)
    --mantine-primary-color-7var(--mantine-color-blue-7)
    --mantine-primary-color-8var(--mantine-color-blue-8)
    --mantine-primary-color-9var(--mantine-color-blue-9)
    --mantine-color-dark-0#C9C9C9
    --mantine-color-dark-1#b8b8b8
    --mantine-color-dark-2#828282
    --mantine-color-dark-3#696969
    --mantine-color-dark-4#424242
    --mantine-color-dark-5#3b3b3b
    --mantine-color-dark-6#2e2e2e
    --mantine-color-dark-7#242424
    --mantine-color-dark-8#1f1f1f
    --mantine-color-dark-9#141414
    --mantine-color-gray-0#f8f9fa
    --mantine-color-gray-1#f1f3f5
    --mantine-color-gray-2#e9ecef
    --mantine-color-gray-3#dee2e6
    --mantine-color-gray-4#ced4da
    --mantine-color-gray-5#adb5bd
    --mantine-color-gray-6#868e96
    --mantine-color-gray-7#495057
    --mantine-color-gray-8#343a40
    --mantine-color-gray-9#212529
    --mantine-color-red-0#fff5f5
    --mantine-color-red-1#ffe3e3
    --mantine-color-red-2#ffc9c9
    --mantine-color-red-3#ffa8a8
    --mantine-color-red-4#ff8787
    --mantine-color-red-5#ff6b6b
    --mantine-color-red-6#fa5252
    --mantine-color-red-7#f03e3e
    --mantine-color-red-8#e03131
    --mantine-color-red-9#c92a2a
    --mantine-color-pink-0#fff0f6
    --mantine-color-pink-1#ffdeeb
    --mantine-color-pink-2#fcc2d7
    --mantine-color-pink-3#faa2c1
    --mantine-color-pink-4#f783ac
    --mantine-color-pink-5#f06595
    --mantine-color-pink-6#e64980
    --mantine-color-pink-7#d6336c
    --mantine-color-pink-8#c2255c
    --mantine-color-pink-9#a61e4d
    --mantine-color-grape-0#f8f0fc
    --mantine-color-grape-1#f3d9fa
    --mantine-color-grape-2#eebefa
    --mantine-color-grape-3#e599f7
    --mantine-color-grape-4#da77f2
    --mantine-color-grape-5#cc5de8
    --mantine-color-grape-6#be4bdb
    --mantine-color-grape-7#ae3ec9
    --mantine-color-grape-8#9c36b5
    --mantine-color-grape-9#862e9c
    --mantine-color-violet-0#f3f0ff
    --mantine-color-violet-1#e5dbff
    --mantine-color-violet-2#d0bfff
    --mantine-color-violet-3#b197fc
    --mantine-color-violet-4#9775fa
    --mantine-color-violet-5#845ef7
    --mantine-color-violet-6#7950f2
    --mantine-color-violet-7#7048e8
    --mantine-color-violet-8#6741d9
    --mantine-color-violet-9#5f3dc4
    --mantine-color-indigo-0#edf2ff
    --mantine-color-indigo-1#dbe4ff
    --mantine-color-indigo-2#bac8ff
    --mantine-color-indigo-3#91a7ff
    --mantine-color-indigo-4#748ffc
    --mantine-color-indigo-5#5c7cfa
    --mantine-color-indigo-6#4c6ef5
    --mantine-color-indigo-7#4263eb
    --mantine-color-indigo-8#3b5bdb
    --mantine-color-indigo-9#364fc7
    --mantine-color-blue-0#e7f5ff
    --mantine-color-blue-1#d0ebff
    --mantine-color-blue-2#a5d8ff
    --mantine-color-blue-3#74c0fc
    --mantine-color-blue-4#4dabf7
    --mantine-color-blue-5#339af0
    --mantine-color-blue-6#228be6
    --mantine-color-blue-7#1c7ed6
    --mantine-color-blue-8#1971c2
    --mantine-color-blue-9#1864ab
    --mantine-color-cyan-0#e3fafc
    --mantine-color-cyan-1#c5f6fa
    --mantine-color-cyan-2#99e9f2
    --mantine-color-cyan-3#66d9e8
    --mantine-color-cyan-4#3bc9db
    --mantine-color-cyan-5#22b8cf
    --mantine-color-cyan-6#15aabf
    --mantine-color-cyan-7#1098ad
    --mantine-color-cyan-8#0c8599
    --mantine-color-cyan-9#0b7285
    --mantine-color-teal-0#e6fcf5
    --mantine-color-teal-1#c3fae8
    --mantine-color-teal-2#96f2d7
    --mantine-color-teal-3#63e6be
    --mantine-color-teal-4#38d9a9
    --mantine-color-teal-5#20c997
    --mantine-color-teal-6#12b886
    --mantine-color-teal-7#0ca678
    --mantine-color-teal-8#099268
    --mantine-color-teal-9#087f5b
    --mantine-color-green-0#ebfbee
    --mantine-color-green-1#d3f9d8
    --mantine-color-green-2#b2f2bb
    --mantine-color-green-3#8ce99a
    --mantine-color-green-4#69db7c
    --mantine-color-green-5#51cf66
    --mantine-color-green-6#40c057
    --mantine-color-green-7#37b24d
    --mantine-color-green-8#2f9e44
    --mantine-color-green-9#2b8a3e
    --mantine-color-lime-0#f4fce3
    --mantine-color-lime-1#e9fac8
    --mantine-color-lime-2#d8f5a2
    --mantine-color-lime-3#c0eb75
    --mantine-color-lime-4#a9e34b
    --mantine-color-lime-5#94d82d
    --mantine-color-lime-6#82c91e
    --mantine-color-lime-7#74b816
    --mantine-color-lime-8#66a80f
    --mantine-color-lime-9#5c940d
    --mantine-color-yellow-0#fff9db
    --mantine-color-yellow-1#fff3bf
    --mantine-color-yellow-2#ffec99
    --mantine-color-yellow-3#ffe066
    --mantine-color-yellow-4#ffd43b
    --mantine-color-yellow-5#fcc419
    --mantine-color-yellow-6#fab005
    --mantine-color-yellow-7#f59f00
    --mantine-color-yellow-8#f08c00
    --mantine-color-yellow-9#e67700
    --mantine-color-orange-0#fff4e6
    --mantine-color-orange-1#ffe8cc
    --mantine-color-orange-2#ffd8a8
    --mantine-color-orange-3#ffc078
    --mantine-color-orange-4#ffa94d
    --mantine-color-orange-5#ff922b
    --mantine-color-orange-6#fd7e14
    --mantine-color-orange-7#f76707
    --mantine-color-orange-8#e8590c
    --mantine-color-orange-9#d9480f
    --mantine-h1-font-size2.125rem
    --mantine-h1-line-height1.3
    --mantine-h1-font-weight700
    --mantine-h2-font-size1.625rem
    --mantine-h2-line-height1.35
    --mantine-h2-font-weight700
    --mantine-h3-font-size1.375rem
    --mantine-h3-line-height1.4
    --mantine-h3-font-weight700
    --mantine-h4-font-size1.125rem
    --mantine-h4-line-height1.45
    --mantine-h4-font-weight700
    --mantine-h5-font-size1rem
    --mantine-h5-line-height1.5
    --mantine-h5-font-weight700
    --mantine-h6-font-size0.875rem
    --mantine-h6-line-height1.5
    --mantine-h6-font-weight700

    Light color scheme only variables

    --mantine-primary-color-contrastvar(--mantine-color-white)
    --mantine-color-brightvar(--mantine-color-black)
    --mantine-color-text#000
    --mantine-color-body#fff
    --mantine-color-errorvar(--mantine-color-red-6)
    --mantine-color-placeholdervar(--mantine-color-gray-5)
    --mantine-color-anchorvar(--mantine-color-blue-6)
    --mantine-color-defaultvar(--mantine-color-white)
    --mantine-color-default-hovervar(--mantine-color-gray-0)
    --mantine-color-default-colorvar(--mantine-color-black)
    --mantine-color-default-bordervar(--mantine-color-gray-4)
    --mantine-color-dimmedvar(--mantine-color-gray-6)
    --mantine-color-dark-textvar(--mantine-color-dark-filled)
    --mantine-color-dark-filledvar(--mantine-color-dark-6)
    --mantine-color-dark-filled-hovervar(--mantine-color-dark-7)
    --mantine-color-dark-lightrgba(46, 46, 46, 0.1)
    --mantine-color-dark-light-hoverrgba(46, 46, 46, 0.12)
    --mantine-color-dark-light-colorvar(--mantine-color-dark-6)
    --mantine-color-dark-outlinevar(--mantine-color-dark-6)
    --mantine-color-dark-outline-hoverrgba(46, 46, 46, 0.05)
    --mantine-color-gray-textvar(--mantine-color-gray-filled)
    --mantine-color-gray-filledvar(--mantine-color-gray-6)
    --mantine-color-gray-filled-hovervar(--mantine-color-gray-7)
    --mantine-color-gray-lightrgba(134, 142, 150, 0.1)
    --mantine-color-gray-light-hoverrgba(134, 142, 150, 0.12)
    --mantine-color-gray-light-colorvar(--mantine-color-gray-6)
    --mantine-color-gray-outlinevar(--mantine-color-gray-6)
    --mantine-color-gray-outline-hoverrgba(134, 142, 150, 0.05)
    --mantine-color-red-textvar(--mantine-color-red-filled)
    --mantine-color-red-filledvar(--mantine-color-red-6)
    --mantine-color-red-filled-hovervar(--mantine-color-red-7)
    --mantine-color-red-lightrgba(250, 82, 82, 0.1)
    --mantine-color-red-light-hoverrgba(250, 82, 82, 0.12)
    --mantine-color-red-light-colorvar(--mantine-color-red-6)
    --mantine-color-red-outlinevar(--mantine-color-red-6)
    --mantine-color-red-outline-hoverrgba(250, 82, 82, 0.05)
    --mantine-color-pink-textvar(--mantine-color-pink-filled)
    --mantine-color-pink-filledvar(--mantine-color-pink-6)
    --mantine-color-pink-filled-hovervar(--mantine-color-pink-7)
    --mantine-color-pink-lightrgba(230, 73, 128, 0.1)
    --mantine-color-pink-light-hoverrgba(230, 73, 128, 0.12)
    --mantine-color-pink-light-colorvar(--mantine-color-pink-6)
    --mantine-color-pink-outlinevar(--mantine-color-pink-6)
    --mantine-color-pink-outline-hoverrgba(230, 73, 128, 0.05)
    --mantine-color-grape-textvar(--mantine-color-grape-filled)
    --mantine-color-grape-filledvar(--mantine-color-grape-6)
    --mantine-color-grape-filled-hovervar(--mantine-color-grape-7)
    --mantine-color-grape-lightrgba(190, 75, 219, 0.1)
    --mantine-color-grape-light-hoverrgba(190, 75, 219, 0.12)
    --mantine-color-grape-light-colorvar(--mantine-color-grape-6)
    --mantine-color-grape-outlinevar(--mantine-color-grape-6)
    --mantine-color-grape-outline-hoverrgba(190, 75, 219, 0.05)
    --mantine-color-violet-textvar(--mantine-color-violet-filled)
    --mantine-color-violet-filledvar(--mantine-color-violet-6)
    --mantine-color-violet-filled-hovervar(--mantine-color-violet-7)
    --mantine-color-violet-lightrgba(121, 80, 242, 0.1)
    --mantine-color-violet-light-hoverrgba(121, 80, 242, 0.12)
    --mantine-color-violet-light-colorvar(--mantine-color-violet-6)
    --mantine-color-violet-outlinevar(--mantine-color-violet-6)
    --mantine-color-violet-outline-hoverrgba(121, 80, 242, 0.05)
    --mantine-color-indigo-textvar(--mantine-color-indigo-filled)
    --mantine-color-indigo-filledvar(--mantine-color-indigo-6)
    --mantine-color-indigo-filled-hovervar(--mantine-color-indigo-7)
    --mantine-color-indigo-lightrgba(76, 110, 245, 0.1)
    --mantine-color-indigo-light-hoverrgba(76, 110, 245, 0.12)
    --mantine-color-indigo-light-colorvar(--mantine-color-indigo-6)
    --mantine-color-indigo-outlinevar(--mantine-color-indigo-6)
    --mantine-color-indigo-outline-hoverrgba(76, 110, 245, 0.05)
    --mantine-color-blue-textvar(--mantine-color-blue-filled)
    --mantine-color-blue-filledvar(--mantine-color-blue-6)
    --mantine-color-blue-filled-hovervar(--mantine-color-blue-7)
    --mantine-color-blue-lightrgba(34, 139, 230, 0.1)
    --mantine-color-blue-light-hoverrgba(34, 139, 230, 0.12)
    --mantine-color-blue-light-colorvar(--mantine-color-blue-6)
    --mantine-color-blue-outlinevar(--mantine-color-blue-6)
    --mantine-color-blue-outline-hoverrgba(34, 139, 230, 0.05)
    --mantine-color-cyan-textvar(--mantine-color-cyan-filled)
    --mantine-color-cyan-filledvar(--mantine-color-cyan-6)
    --mantine-color-cyan-filled-hovervar(--mantine-color-cyan-7)
    --mantine-color-cyan-lightrgba(21, 170, 191, 0.1)
    --mantine-color-cyan-light-hoverrgba(21, 170, 191, 0.12)
    --mantine-color-cyan-light-colorvar(--mantine-color-cyan-6)
    --mantine-color-cyan-outlinevar(--mantine-color-cyan-6)
    --mantine-color-cyan-outline-hoverrgba(21, 170, 191, 0.05)
    --mantine-color-teal-textvar(--mantine-color-teal-filled)
    --mantine-color-teal-filledvar(--mantine-color-teal-6)
    --mantine-color-teal-filled-hovervar(--mantine-color-teal-7)
    --mantine-color-teal-lightrgba(18, 184, 134, 0.1)
    --mantine-color-teal-light-hoverrgba(18, 184, 134, 0.12)
    --mantine-color-teal-light-colorvar(--mantine-color-teal-6)
    --mantine-color-teal-outlinevar(--mantine-color-teal-6)
    --mantine-color-teal-outline-hoverrgba(18, 184, 134, 0.05)
    --mantine-color-green-textvar(--mantine-color-green-filled)
    --mantine-color-green-filledvar(--mantine-color-green-6)
    --mantine-color-green-filled-hovervar(--mantine-color-green-7)
    --mantine-color-green-lightrgba(64, 192, 87, 0.1)
    --mantine-color-green-light-hoverrgba(64, 192, 87, 0.12)
    --mantine-color-green-light-colorvar(--mantine-color-green-6)
    --mantine-color-green-outlinevar(--mantine-color-green-6)
    --mantine-color-green-outline-hoverrgba(64, 192, 87, 0.05)
    --mantine-color-lime-textvar(--mantine-color-lime-filled)
    --mantine-color-lime-filledvar(--mantine-color-lime-6)
    --mantine-color-lime-filled-hovervar(--mantine-color-lime-7)
    --mantine-color-lime-lightrgba(130, 201, 30, 0.1)
    --mantine-color-lime-light-hoverrgba(130, 201, 30, 0.12)
    --mantine-color-lime-light-colorvar(--mantine-color-lime-6)
    --mantine-color-lime-outlinevar(--mantine-color-lime-6)
    --mantine-color-lime-outline-hoverrgba(130, 201, 30, 0.05)
    --mantine-color-yellow-textvar(--mantine-color-yellow-filled)
    --mantine-color-yellow-filledvar(--mantine-color-yellow-6)
    --mantine-color-yellow-filled-hovervar(--mantine-color-yellow-7)
    --mantine-color-yellow-lightrgba(250, 176, 5, 0.1)
    --mantine-color-yellow-light-hoverrgba(250, 176, 5, 0.12)
    --mantine-color-yellow-light-colorvar(--mantine-color-yellow-6)
    --mantine-color-yellow-outlinevar(--mantine-color-yellow-6)
    --mantine-color-yellow-outline-hoverrgba(250, 176, 5, 0.05)
    --mantine-color-orange-textvar(--mantine-color-orange-filled)
    --mantine-color-orange-filledvar(--mantine-color-orange-6)
    --mantine-color-orange-filled-hovervar(--mantine-color-orange-7)
    --mantine-color-orange-lightrgba(253, 126, 20, 0.1)
    --mantine-color-orange-light-hoverrgba(253, 126, 20, 0.12)
    --mantine-color-orange-light-colorvar(--mantine-color-orange-6)
    --mantine-color-orange-outlinevar(--mantine-color-orange-6)
    --mantine-color-orange-outline-hoverrgba(253, 126, 20, 0.05)

    Dark color scheme only variables

    --mantine-primary-color-contrastvar(--mantine-color-white)
    --mantine-color-brightvar(--mantine-color-white)
    --mantine-color-textvar(--mantine-color-dark-0)
    --mantine-color-bodyvar(--mantine-color-dark-7)
    --mantine-color-errorvar(--mantine-color-red-8)
    --mantine-color-placeholdervar(--mantine-color-dark-3)
    --mantine-color-anchorvar(--mantine-color-blue-4)
    --mantine-color-defaultvar(--mantine-color-dark-6)
    --mantine-color-default-hovervar(--mantine-color-dark-5)
    --mantine-color-default-colorvar(--mantine-color-white)
    --mantine-color-default-bordervar(--mantine-color-dark-4)
    --mantine-color-dimmedvar(--mantine-color-dark-2)
    --mantine-color-dark-textvar(--mantine-color-dark-4)
    --mantine-color-dark-filledvar(--mantine-color-dark-8)
    --mantine-color-dark-filled-hovervar(--mantine-color-dark-9)
    --mantine-color-dark-lightrgba(46, 46, 46, 0.15)
    --mantine-color-dark-light-hoverrgba(46, 46, 46, 0.2)
    --mantine-color-dark-light-colorvar(--mantine-color-dark-3)
    --mantine-color-dark-outlinevar(--mantine-color-dark-4)
    --mantine-color-dark-outline-hoverrgba(66, 66, 66, 0.05)
    --mantine-color-gray-textvar(--mantine-color-gray-4)
    --mantine-color-gray-filledvar(--mantine-color-gray-8)
    --mantine-color-gray-filled-hovervar(--mantine-color-gray-9)
    --mantine-color-gray-lightrgba(134, 142, 150, 0.15)
    --mantine-color-gray-light-hoverrgba(134, 142, 150, 0.2)
    --mantine-color-gray-light-colorvar(--mantine-color-gray-3)
    --mantine-color-gray-outlinevar(--mantine-color-gray-4)
    --mantine-color-gray-outline-hoverrgba(206, 212, 218, 0.05)
    --mantine-color-red-textvar(--mantine-color-red-4)
    --mantine-color-red-filledvar(--mantine-color-red-8)
    --mantine-color-red-filled-hovervar(--mantine-color-red-9)
    --mantine-color-red-lightrgba(250, 82, 82, 0.15)
    --mantine-color-red-light-hoverrgba(250, 82, 82, 0.2)
    --mantine-color-red-light-colorvar(--mantine-color-red-3)
    --mantine-color-red-outlinevar(--mantine-color-red-4)
    --mantine-color-red-outline-hoverrgba(255, 135, 135, 0.05)
    --mantine-color-pink-textvar(--mantine-color-pink-4)
    --mantine-color-pink-filledvar(--mantine-color-pink-8)
    --mantine-color-pink-filled-hovervar(--mantine-color-pink-9)
    --mantine-color-pink-lightrgba(230, 73, 128, 0.15)
    --mantine-color-pink-light-hoverrgba(230, 73, 128, 0.2)
    --mantine-color-pink-light-colorvar(--mantine-color-pink-3)
    --mantine-color-pink-outlinevar(--mantine-color-pink-4)
    --mantine-color-pink-outline-hoverrgba(247, 131, 172, 0.05)
    --mantine-color-grape-textvar(--mantine-color-grape-4)
    --mantine-color-grape-filledvar(--mantine-color-grape-8)
    --mantine-color-grape-filled-hovervar(--mantine-color-grape-9)
    --mantine-color-grape-lightrgba(190, 75, 219, 0.15)
    --mantine-color-grape-light-hoverrgba(190, 75, 219, 0.2)
    --mantine-color-grape-light-colorvar(--mantine-color-grape-3)
    --mantine-color-grape-outlinevar(--mantine-color-grape-4)
    --mantine-color-grape-outline-hoverrgba(218, 119, 242, 0.05)
    --mantine-color-violet-textvar(--mantine-color-violet-4)
    --mantine-color-violet-filledvar(--mantine-color-violet-8)
    --mantine-color-violet-filled-hovervar(--mantine-color-violet-9)
    --mantine-color-violet-lightrgba(121, 80, 242, 0.15)
    --mantine-color-violet-light-hoverrgba(121, 80, 242, 0.2)
    --mantine-color-violet-light-colorvar(--mantine-color-violet-3)
    --mantine-color-violet-outlinevar(--mantine-color-violet-4)
    --mantine-color-violet-outline-hoverrgba(151, 117, 250, 0.05)
    --mantine-color-indigo-textvar(--mantine-color-indigo-4)
    --mantine-color-indigo-filledvar(--mantine-color-indigo-8)
    --mantine-color-indigo-filled-hovervar(--mantine-color-indigo-9)
    --mantine-color-indigo-lightrgba(76, 110, 245, 0.15)
    --mantine-color-indigo-light-hoverrgba(76, 110, 245, 0.2)
    --mantine-color-indigo-light-colorvar(--mantine-color-indigo-3)
    --mantine-color-indigo-outlinevar(--mantine-color-indigo-4)
    --mantine-color-indigo-outline-hoverrgba(116, 143, 252, 0.05)
    --mantine-color-blue-textvar(--mantine-color-blue-4)
    --mantine-color-blue-filledvar(--mantine-color-blue-8)
    --mantine-color-blue-filled-hovervar(--mantine-color-blue-9)
    --mantine-color-blue-lightrgba(34, 139, 230, 0.15)
    --mantine-color-blue-light-hoverrgba(34, 139, 230, 0.2)
    --mantine-color-blue-light-colorvar(--mantine-color-blue-3)
    --mantine-color-blue-outlinevar(--mantine-color-blue-4)
    --mantine-color-blue-outline-hoverrgba(77, 171, 247, 0.05)
    --mantine-color-cyan-textvar(--mantine-color-cyan-4)
    --mantine-color-cyan-filledvar(--mantine-color-cyan-8)
    --mantine-color-cyan-filled-hovervar(--mantine-color-cyan-9)
    --mantine-color-cyan-lightrgba(21, 170, 191, 0.15)
    --mantine-color-cyan-light-hoverrgba(21, 170, 191, 0.2)
    --mantine-color-cyan-light-colorvar(--mantine-color-cyan-3)
    --mantine-color-cyan-outlinevar(--mantine-color-cyan-4)
    --mantine-color-cyan-outline-hoverrgba(59, 201, 219, 0.05)
    --mantine-color-teal-textvar(--mantine-color-teal-4)
    --mantine-color-teal-filledvar(--mantine-color-teal-8)
    --mantine-color-teal-filled-hovervar(--mantine-color-teal-9)
    --mantine-color-teal-lightrgba(18, 184, 134, 0.15)
    --mantine-color-teal-light-hoverrgba(18, 184, 134, 0.2)
    --mantine-color-teal-light-colorvar(--mantine-color-teal-3)
    --mantine-color-teal-outlinevar(--mantine-color-teal-4)
    --mantine-color-teal-outline-hoverrgba(56, 217, 169, 0.05)
    --mantine-color-green-textvar(--mantine-color-green-4)
    --mantine-color-green-filledvar(--mantine-color-green-8)
    --mantine-color-green-filled-hovervar(--mantine-color-green-9)
    --mantine-color-green-lightrgba(64, 192, 87, 0.15)
    --mantine-color-green-light-hoverrgba(64, 192, 87, 0.2)
    --mantine-color-green-light-colorvar(--mantine-color-green-3)
    --mantine-color-green-outlinevar(--mantine-color-green-4)
    --mantine-color-green-outline-hoverrgba(105, 219, 124, 0.05)
    --mantine-color-lime-textvar(--mantine-color-lime-4)
    --mantine-color-lime-filledvar(--mantine-color-lime-8)
    --mantine-color-lime-filled-hovervar(--mantine-color-lime-9)
    --mantine-color-lime-lightrgba(130, 201, 30, 0.15)
    --mantine-color-lime-light-hoverrgba(130, 201, 30, 0.2)
    --mantine-color-lime-light-colorvar(--mantine-color-lime-3)
    --mantine-color-lime-outlinevar(--mantine-color-lime-4)
    --mantine-color-lime-outline-hoverrgba(169, 227, 75, 0.05)
    --mantine-color-yellow-textvar(--mantine-color-yellow-4)
    --mantine-color-yellow-filledvar(--mantine-color-yellow-8)
    --mantine-color-yellow-filled-hovervar(--mantine-color-yellow-9)
    --mantine-color-yellow-lightrgba(250, 176, 5, 0.15)
    --mantine-color-yellow-light-hoverrgba(250, 176, 5, 0.2)
    --mantine-color-yellow-light-colorvar(--mantine-color-yellow-3)
    --mantine-color-yellow-outlinevar(--mantine-color-yellow-4)
    --mantine-color-yellow-outline-hoverrgba(255, 212, 59, 0.05)
    --mantine-color-orange-textvar(--mantine-color-orange-4)
    --mantine-color-orange-filledvar(--mantine-color-orange-8)
    --mantine-color-orange-filled-hovervar(--mantine-color-orange-9)
    --mantine-color-orange-lightrgba(253, 126, 20, 0.15)
    --mantine-color-orange-light-hoverrgba(253, 126, 20, 0.2)
    --mantine-color-orange-light-colorvar(--mantine-color-orange-3)
    --mantine-color-orange-outlinevar(--mantine-color-orange-4)
    --mantine-color-orange-outline-hoverrgba(255, 169, 77, 0.05)

    Previous

    CSS variables

    Next

    rem, em and px units

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    CSS variables not depending on color scheme

    --mantine-scale1
    --mantine-cursor-typedefault
    --mantine-color-schemelight dark
    --mantine-webkit-font-smoothingantialiased
    --mantine-moz-font-smoothinggrayscale
    --mantine-color-white#fff
    --mantine-color-black#000
    --mantine-line-height1.55
    --mantine-font-family-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji
    --mantine-font-family-monospaceui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
    --mantine-font-family-headings-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji
    --mantine-heading-font-weight700
    --mantine-heading-text-wrapwrap
    --mantine-radius-default0.25rem
    --mantine-primary-color-filledvar(--mantine-color-blue-filled)
    --mantine-primary-color-filled-hovervar(--mantine-color-blue-filled-hover)
    --mantine-primary-color-lightvar(--mantine-color-blue-light)
    --mantine-primary-color-light-hovervar(--mantine-color-blue-light-hover)
    --mantine-primary-color-light-colorvar(--mantine-color-blue-light-color)
    --mantine-breakpoint-xs36em
    --mantine-breakpoint-sm48em
    --mantine-breakpoint-md62em
    --mantine-breakpoint-lg75em
    --mantine-breakpoint-xl88em
    --mantine-spacing-xs0.625rem
    --mantine-spacing-sm0.75rem
    --mantine-spacing-md1rem
    --mantine-spacing-lg1.25rem
    --mantine-spacing-xl2rem
    --mantine-font-size-xs0.75rem
    --mantine-font-size-sm0.875rem
    --mantine-font-size-md1rem
    --mantine-font-size-lg1.125rem
    --mantine-font-size-xl1.25rem
    --mantine-line-height-xs1.4
    --mantine-line-height-sm1.45
    --mantine-line-height-md1.55
    --mantine-line-height-lg1.6
    --mantine-line-height-xl1.65
    --mantine-shadow-xs0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1)
    --mantine-shadow-sm0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 0.625rem 0.9375rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.4375rem 0.4375rem -0.3125rem
    --mantine-shadow-md0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.25rem 1.5625rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.625rem 0.625rem -0.3125rem
    --mantine-shadow-lg0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.75rem 1.4375rem -0.4375rem, rgba(0, 0, 0, 0.04) 0 0.75rem 0.75rem -0.4375rem
    --mantine-shadow-xl0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 2.25rem 1.75rem -0.4375rem, rgba(0, 0, 0, 0.04) 0 1.0625rem 1.0625rem -0.4375rem
    --mantine-radius-xs0.125rem
    --mantine-radius-sm0.25rem
    --mantine-radius-md0.5rem
    --mantine-radius-lg1rem
    --mantine-radius-xl2rem
    --mantine-primary-color-0var(--mantine-color-blue-0)
    --mantine-primary-color-1var(--mantine-color-blue-1)
    --mantine-primary-color-2var(--mantine-color-blue-2)
    --mantine-primary-color-3var(--mantine-color-blue-3)
    --mantine-primary-color-4var(--mantine-color-blue-4)
    --mantine-primary-color-5var(--mantine-color-blue-5)
    --mantine-primary-color-6var(--mantine-color-blue-6)
    --mantine-primary-color-7var(--mantine-color-blue-7)
    --mantine-primary-color-8var(--mantine-color-blue-8)
    --mantine-primary-color-9var(--mantine-color-blue-9)
    --mantine-color-dark-0#C9C9C9
    --mantine-color-dark-1#b8b8b8
    --mantine-color-dark-2#828282
    --mantine-color-dark-3#696969
    --mantine-color-dark-4#424242
    --mantine-color-dark-5#3b3b3b
    --mantine-color-dark-6#2e2e2e
    --mantine-color-dark-7#242424
    --mantine-color-dark-8#1f1f1f
    --mantine-color-dark-9#141414
    --mantine-color-gray-0#f8f9fa
    --mantine-color-gray-1#f1f3f5
    --mantine-color-gray-2#e9ecef
    --mantine-color-gray-3#dee2e6
    --mantine-color-gray-4#ced4da
    --mantine-color-gray-5#adb5bd
    --mantine-color-gray-6#868e96
    --mantine-color-gray-7#495057
    --mantine-color-gray-8#343a40
    --mantine-color-gray-9#212529
    --mantine-color-red-0#fff5f5
    --mantine-color-red-1#ffe3e3
    --mantine-color-red-2#ffc9c9
    --mantine-color-red-3#ffa8a8
    --mantine-color-red-4#ff8787
    --mantine-color-red-5#ff6b6b
    --mantine-color-red-6#fa5252
    --mantine-color-red-7#f03e3e
    --mantine-color-red-8#e03131
    --mantine-color-red-9#c92a2a
    --mantine-color-pink-0#fff0f6
    --mantine-color-pink-1#ffdeeb
    --mantine-color-pink-2#fcc2d7
    --mantine-color-pink-3#faa2c1
    --mantine-color-pink-4#f783ac
    --mantine-color-pink-5#f06595
    --mantine-color-pink-6#e64980
    --mantine-color-pink-7#d6336c
    --mantine-color-pink-8#c2255c
    --mantine-color-pink-9#a61e4d
    --mantine-color-grape-0#f8f0fc
    --mantine-color-grape-1#f3d9fa
    --mantine-color-grape-2#eebefa
    --mantine-color-grape-3#e599f7
    --mantine-color-grape-4#da77f2
    --mantine-color-grape-5#cc5de8
    --mantine-color-grape-6#be4bdb
    --mantine-color-grape-7#ae3ec9
    --mantine-color-grape-8#9c36b5
    --mantine-color-grape-9#862e9c
    --mantine-color-violet-0#f3f0ff
    --mantine-color-violet-1#e5dbff
    --mantine-color-violet-2#d0bfff
    --mantine-color-violet-3#b197fc
    --mantine-color-violet-4#9775fa
    --mantine-color-violet-5#845ef7
    --mantine-color-violet-6#7950f2
    --mantine-color-violet-7#7048e8
    --mantine-color-violet-8#6741d9
    --mantine-color-violet-9#5f3dc4
    --mantine-color-indigo-0#edf2ff
    --mantine-color-indigo-1#dbe4ff
    --mantine-color-indigo-2#bac8ff
    --mantine-color-indigo-3#91a7ff
    --mantine-color-indigo-4#748ffc
    --mantine-color-indigo-5#5c7cfa
    --mantine-color-indigo-6#4c6ef5
    --mantine-color-indigo-7#4263eb
    --mantine-color-indigo-8#3b5bdb
    --mantine-color-indigo-9#364fc7
    --mantine-color-blue-0#e7f5ff
    --mantine-color-blue-1#d0ebff
    --mantine-color-blue-2#a5d8ff
    --mantine-color-blue-3#74c0fc
    --mantine-color-blue-4#4dabf7
    --mantine-color-blue-5#339af0
    --mantine-color-blue-6#228be6
    --mantine-color-blue-7#1c7ed6
    --mantine-color-blue-8#1971c2
    --mantine-color-blue-9#1864ab
    --mantine-color-cyan-0#e3fafc
    --mantine-color-cyan-1#c5f6fa
    --mantine-color-cyan-2#99e9f2
    --mantine-color-cyan-3#66d9e8
    --mantine-color-cyan-4#3bc9db
    --mantine-color-cyan-5#22b8cf
    --mantine-color-cyan-6#15aabf
    --mantine-color-cyan-7#1098ad
    --mantine-color-cyan-8#0c8599
    --mantine-color-cyan-9#0b7285
    --mantine-color-teal-0#e6fcf5
    --mantine-color-teal-1#c3fae8
    --mantine-color-teal-2#96f2d7
    --mantine-color-teal-3#63e6be
    --mantine-color-teal-4#38d9a9
    --mantine-color-teal-5#20c997
    --mantine-color-teal-6#12b886
    --mantine-color-teal-7#0ca678
    --mantine-color-teal-8#099268
    --mantine-color-teal-9#087f5b
    --mantine-color-green-0#ebfbee
    --mantine-color-green-1#d3f9d8
    --mantine-color-green-2#b2f2bb
    --mantine-color-green-3#8ce99a
    --mantine-color-green-4#69db7c
    --mantine-color-green-5#51cf66
    --mantine-color-green-6#40c057
    --mantine-color-green-7#37b24d
    --mantine-color-green-8#2f9e44
    --mantine-color-green-9#2b8a3e
    --mantine-color-lime-0#f4fce3
    --mantine-color-lime-1#e9fac8
    --mantine-color-lime-2#d8f5a2
    --mantine-color-lime-3#c0eb75
    --mantine-color-lime-4#a9e34b
    --mantine-color-lime-5#94d82d
    --mantine-color-lime-6#82c91e
    --mantine-color-lime-7#74b816
    --mantine-color-lime-8#66a80f
    --mantine-color-lime-9#5c940d
    --mantine-color-yellow-0#fff9db
    --mantine-color-yellow-1#fff3bf
    --mantine-color-yellow-2#ffec99
    --mantine-color-yellow-3#ffe066
    --mantine-color-yellow-4#ffd43b
    --mantine-color-yellow-5#fcc419
    --mantine-color-yellow-6#fab005
    --mantine-color-yellow-7#f59f00
    --mantine-color-yellow-8#f08c00
    --mantine-color-yellow-9#e67700
    --mantine-color-orange-0#fff4e6
    --mantine-color-orange-1#ffe8cc
    --mantine-color-orange-2#ffd8a8
    --mantine-color-orange-3#ffc078
    --mantine-color-orange-4#ffa94d
    --mantine-color-orange-5#ff922b
    --mantine-color-orange-6#fd7e14
    --mantine-color-orange-7#f76707
    --mantine-color-orange-8#e8590c
    --mantine-color-orange-9#d9480f
    --mantine-h1-font-size2.125rem
    --mantine-h1-line-height1.3
    --mantine-h1-font-weight700
    --mantine-h2-font-size1.625rem
    --mantine-h2-line-height1.35
    --mantine-h2-font-weight700
    --mantine-h3-font-size1.375rem
    --mantine-h3-line-height1.4
    --mantine-h3-font-weight700
    --mantine-h4-font-size1.125rem
    --mantine-h4-line-height1.45
    --mantine-h4-font-weight700
    --mantine-h5-font-size1rem
    --mantine-h5-line-height1.5
    --mantine-h5-font-weight700
    --mantine-h6-font-size0.875rem
    --mantine-h6-line-height1.5
    --mantine-h6-font-weight700

    Light color scheme only variables

    --mantine-primary-color-contrastvar(--mantine-color-white)
    --mantine-color-brightvar(--mantine-color-black)
    --mantine-color-text#000
    --mantine-color-body#fff
    --mantine-color-errorvar(--mantine-color-red-6)
    --mantine-color-placeholdervar(--mantine-color-gray-5)
    --mantine-color-anchorvar(--mantine-color-blue-6)
    --mantine-color-defaultvar(--mantine-color-white)
    --mantine-color-default-hovervar(--mantine-color-gray-0)
    --mantine-color-default-colorvar(--mantine-color-black)
    --mantine-color-default-bordervar(--mantine-color-gray-4)
    --mantine-color-dimmedvar(--mantine-color-gray-6)
    --mantine-color-dark-textvar(--mantine-color-dark-filled)
    --mantine-color-dark-filledvar(--mantine-color-dark-6)
    --mantine-color-dark-filled-hovervar(--mantine-color-dark-7)
    --mantine-color-dark-lightrgba(46, 46, 46, 0.1)
    --mantine-color-dark-light-hoverrgba(46, 46, 46, 0.12)
    --mantine-color-dark-light-colorvar(--mantine-color-dark-6)
    --mantine-color-dark-outlinevar(--mantine-color-dark-6)
    --mantine-color-dark-outline-hoverrgba(46, 46, 46, 0.05)
    --mantine-color-gray-textvar(--mantine-color-gray-filled)
    --mantine-color-gray-filledvar(--mantine-color-gray-6)
    --mantine-color-gray-filled-hovervar(--mantine-color-gray-7)
    --mantine-color-gray-lightrgba(134, 142, 150, 0.1)
    --mantine-color-gray-light-hoverrgba(134, 142, 150, 0.12)
    --mantine-color-gray-light-colorvar(--mantine-color-gray-6)
    --mantine-color-gray-outlinevar(--mantine-color-gray-6)
    --mantine-color-gray-outline-hoverrgba(134, 142, 150, 0.05)
    --mantine-color-red-textvar(--mantine-color-red-filled)
    --mantine-color-red-filledvar(--mantine-color-red-6)
    --mantine-color-red-filled-hovervar(--mantine-color-red-7)
    --mantine-color-red-lightrgba(250, 82, 82, 0.1)
    --mantine-color-red-light-hoverrgba(250, 82, 82, 0.12)
    --mantine-color-red-light-colorvar(--mantine-color-red-6)
    --mantine-color-red-outlinevar(--mantine-color-red-6)
    --mantine-color-red-outline-hoverrgba(250, 82, 82, 0.05)
    --mantine-color-pink-textvar(--mantine-color-pink-filled)
    --mantine-color-pink-filledvar(--mantine-color-pink-6)
    --mantine-color-pink-filled-hovervar(--mantine-color-pink-7)
    --mantine-color-pink-lightrgba(230, 73, 128, 0.1)
    --mantine-color-pink-light-hoverrgba(230, 73, 128, 0.12)
    --mantine-color-pink-light-colorvar(--mantine-color-pink-6)
    --mantine-color-pink-outlinevar(--mantine-color-pink-6)
    --mantine-color-pink-outline-hoverrgba(230, 73, 128, 0.05)
    --mantine-color-grape-textvar(--mantine-color-grape-filled)
    --mantine-color-grape-filledvar(--mantine-color-grape-6)
    --mantine-color-grape-filled-hovervar(--mantine-color-grape-7)
    --mantine-color-grape-lightrgba(190, 75, 219, 0.1)
    --mantine-color-grape-light-hoverrgba(190, 75, 219, 0.12)
    --mantine-color-grape-light-colorvar(--mantine-color-grape-6)
    --mantine-color-grape-outlinevar(--mantine-color-grape-6)
    --mantine-color-grape-outline-hoverrgba(190, 75, 219, 0.05)
    --mantine-color-violet-textvar(--mantine-color-violet-filled)
    --mantine-color-violet-filledvar(--mantine-color-violet-6)
    --mantine-color-violet-filled-hovervar(--mantine-color-violet-7)
    --mantine-color-violet-lightrgba(121, 80, 242, 0.1)
    --mantine-color-violet-light-hoverrgba(121, 80, 242, 0.12)
    --mantine-color-violet-light-colorvar(--mantine-color-violet-6)
    --mantine-color-violet-outlinevar(--mantine-color-violet-6)
    --mantine-color-violet-outline-hoverrgba(121, 80, 242, 0.05)
    --mantine-color-indigo-textvar(--mantine-color-indigo-filled)
    --mantine-color-indigo-filledvar(--mantine-color-indigo-6)
    --mantine-color-indigo-filled-hovervar(--mantine-color-indigo-7)
    --mantine-color-indigo-lightrgba(76, 110, 245, 0.1)
    --mantine-color-indigo-light-hoverrgba(76, 110, 245, 0.12)
    --mantine-color-indigo-light-colorvar(--mantine-color-indigo-6)
    --mantine-color-indigo-outlinevar(--mantine-color-indigo-6)
    --mantine-color-indigo-outline-hoverrgba(76, 110, 245, 0.05)
    --mantine-color-blue-textvar(--mantine-color-blue-filled)
    --mantine-color-blue-filledvar(--mantine-color-blue-6)
    --mantine-color-blue-filled-hovervar(--mantine-color-blue-7)
    --mantine-color-blue-lightrgba(34, 139, 230, 0.1)
    --mantine-color-blue-light-hoverrgba(34, 139, 230, 0.12)
    --mantine-color-blue-light-colorvar(--mantine-color-blue-6)
    --mantine-color-blue-outlinevar(--mantine-color-blue-6)
    --mantine-color-blue-outline-hoverrgba(34, 139, 230, 0.05)
    --mantine-color-cyan-textvar(--mantine-color-cyan-filled)
    --mantine-color-cyan-filledvar(--mantine-color-cyan-6)
    --mantine-color-cyan-filled-hovervar(--mantine-color-cyan-7)
    --mantine-color-cyan-lightrgba(21, 170, 191, 0.1)
    --mantine-color-cyan-light-hoverrgba(21, 170, 191, 0.12)
    --mantine-color-cyan-light-colorvar(--mantine-color-cyan-6)
    --mantine-color-cyan-outlinevar(--mantine-color-cyan-6)
    --mantine-color-cyan-outline-hoverrgba(21, 170, 191, 0.05)
    --mantine-color-teal-textvar(--mantine-color-teal-filled)
    --mantine-color-teal-filledvar(--mantine-color-teal-6)
    --mantine-color-teal-filled-hovervar(--mantine-color-teal-7)
    --mantine-color-teal-lightrgba(18, 184, 134, 0.1)
    --mantine-color-teal-light-hoverrgba(18, 184, 134, 0.12)
    --mantine-color-teal-light-colorvar(--mantine-color-teal-6)
    --mantine-color-teal-outlinevar(--mantine-color-teal-6)
    --mantine-color-teal-outline-hoverrgba(18, 184, 134, 0.05)
    --mantine-color-green-textvar(--mantine-color-green-filled)
    --mantine-color-green-filledvar(--mantine-color-green-6)
    --mantine-color-green-filled-hovervar(--mantine-color-green-7)
    --mantine-color-green-lightrgba(64, 192, 87, 0.1)
    --mantine-color-green-light-hoverrgba(64, 192, 87, 0.12)
    --mantine-color-green-light-colorvar(--mantine-color-green-6)
    --mantine-color-green-outlinevar(--mantine-color-green-6)
    --mantine-color-green-outline-hoverrgba(64, 192, 87, 0.05)
    --mantine-color-lime-textvar(--mantine-color-lime-filled)
    --mantine-color-lime-filledvar(--mantine-color-lime-6)
    --mantine-color-lime-filled-hovervar(--mantine-color-lime-7)
    --mantine-color-lime-lightrgba(130, 201, 30, 0.1)
    --mantine-color-lime-light-hoverrgba(130, 201, 30, 0.12)
    --mantine-color-lime-light-colorvar(--mantine-color-lime-6)
    --mantine-color-lime-outlinevar(--mantine-color-lime-6)
    --mantine-color-lime-outline-hoverrgba(130, 201, 30, 0.05)
    --mantine-color-yellow-textvar(--mantine-color-yellow-filled)
    --mantine-color-yellow-filledvar(--mantine-color-yellow-6)
    --mantine-color-yellow-filled-hovervar(--mantine-color-yellow-7)
    --mantine-color-yellow-lightrgba(250, 176, 5, 0.1)
    --mantine-color-yellow-light-hoverrgba(250, 176, 5, 0.12)
    --mantine-color-yellow-light-colorvar(--mantine-color-yellow-6)
    --mantine-color-yellow-outlinevar(--mantine-color-yellow-6)
    --mantine-color-yellow-outline-hoverrgba(250, 176, 5, 0.05)
    --mantine-color-orange-textvar(--mantine-color-orange-filled)
    --mantine-color-orange-filledvar(--mantine-color-orange-6)
    --mantine-color-orange-filled-hovervar(--mantine-color-orange-7)
    --mantine-color-orange-lightrgba(253, 126, 20, 0.1)
    --mantine-color-orange-light-hoverrgba(253, 126, 20, 0.12)
    --mantine-color-orange-light-colorvar(--mantine-color-orange-6)
    --mantine-color-orange-outlinevar(--mantine-color-orange-6)
    --mantine-color-orange-outline-hoverrgba(253, 126, 20, 0.05)

    Dark color scheme only variables

    --mantine-primary-color-contrastvar(--mantine-color-white)
    --mantine-color-brightvar(--mantine-color-white)
    --mantine-color-textvar(--mantine-color-dark-0)
    --mantine-color-bodyvar(--mantine-color-dark-7)
    --mantine-color-errorvar(--mantine-color-red-8)
    --mantine-color-placeholdervar(--mantine-color-dark-3)
    --mantine-color-anchorvar(--mantine-color-blue-4)
    --mantine-color-defaultvar(--mantine-color-dark-6)
    --mantine-color-default-hovervar(--mantine-color-dark-5)
    --mantine-color-default-colorvar(--mantine-color-white)
    --mantine-color-default-bordervar(--mantine-color-dark-4)
    --mantine-color-dimmedvar(--mantine-color-dark-2)
    --mantine-color-dark-textvar(--mantine-color-dark-4)
    --mantine-color-dark-filledvar(--mantine-color-dark-8)
    --mantine-color-dark-filled-hovervar(--mantine-color-dark-9)
    --mantine-color-dark-lightrgba(46, 46, 46, 0.15)
    --mantine-color-dark-light-hoverrgba(46, 46, 46, 0.2)
    --mantine-color-dark-light-colorvar(--mantine-color-dark-3)
    --mantine-color-dark-outlinevar(--mantine-color-dark-4)
    --mantine-color-dark-outline-hoverrgba(66, 66, 66, 0.05)
    --mantine-color-gray-textvar(--mantine-color-gray-4)
    --mantine-color-gray-filledvar(--mantine-color-gray-8)
    --mantine-color-gray-filled-hovervar(--mantine-color-gray-9)
    --mantine-color-gray-lightrgba(134, 142, 150, 0.15)
    --mantine-color-gray-light-hoverrgba(134, 142, 150, 0.2)
    --mantine-color-gray-light-colorvar(--mantine-color-gray-3)
    --mantine-color-gray-outlinevar(--mantine-color-gray-4)
    --mantine-color-gray-outline-hoverrgba(206, 212, 218, 0.05)
    --mantine-color-red-textvar(--mantine-color-red-4)
    --mantine-color-red-filledvar(--mantine-color-red-8)
    --mantine-color-red-filled-hovervar(--mantine-color-red-9)
    --mantine-color-red-lightrgba(250, 82, 82, 0.15)
    --mantine-color-red-light-hoverrgba(250, 82, 82, 0.2)
    --mantine-color-red-light-colorvar(--mantine-color-red-3)
    --mantine-color-red-outlinevar(--mantine-color-red-4)
    --mantine-color-red-outline-hoverrgba(255, 135, 135, 0.05)
    --mantine-color-pink-textvar(--mantine-color-pink-4)
    --mantine-color-pink-filledvar(--mantine-color-pink-8)
    --mantine-color-pink-filled-hovervar(--mantine-color-pink-9)
    --mantine-color-pink-lightrgba(230, 73, 128, 0.15)
    --mantine-color-pink-light-hoverrgba(230, 73, 128, 0.2)
    --mantine-color-pink-light-colorvar(--mantine-color-pink-3)
    --mantine-color-pink-outlinevar(--mantine-color-pink-4)
    --mantine-color-pink-outline-hoverrgba(247, 131, 172, 0.05)
    --mantine-color-grape-textvar(--mantine-color-grape-4)
    --mantine-color-grape-filledvar(--mantine-color-grape-8)
    --mantine-color-grape-filled-hovervar(--mantine-color-grape-9)
    --mantine-color-grape-lightrgba(190, 75, 219, 0.15)
    --mantine-color-grape-light-hoverrgba(190, 75, 219, 0.2)
    --mantine-color-grape-light-colorvar(--mantine-color-grape-3)
    --mantine-color-grape-outlinevar(--mantine-color-grape-4)
    --mantine-color-grape-outline-hoverrgba(218, 119, 242, 0.05)
    --mantine-color-violet-textvar(--mantine-color-violet-4)
    --mantine-color-violet-filledvar(--mantine-color-violet-8)
    --mantine-color-violet-filled-hovervar(--mantine-color-violet-9)
    --mantine-color-violet-lightrgba(121, 80, 242, 0.15)
    --mantine-color-violet-light-hoverrgba(121, 80, 242, 0.2)
    --mantine-color-violet-light-colorvar(--mantine-color-violet-3)
    --mantine-color-violet-outlinevar(--mantine-color-violet-4)
    --mantine-color-violet-outline-hoverrgba(151, 117, 250, 0.05)
    --mantine-color-indigo-textvar(--mantine-color-indigo-4)
    --mantine-color-indigo-filledvar(--mantine-color-indigo-8)
    --mantine-color-indigo-filled-hovervar(--mantine-color-indigo-9)
    --mantine-color-indigo-lightrgba(76, 110, 245, 0.15)
    --mantine-color-indigo-light-hoverrgba(76, 110, 245, 0.2)
    --mantine-color-indigo-light-colorvar(--mantine-color-indigo-3)
    --mantine-color-indigo-outlinevar(--mantine-color-indigo-4)
    --mantine-color-indigo-outline-hoverrgba(116, 143, 252, 0.05)
    --mantine-color-blue-textvar(--mantine-color-blue-4)
    --mantine-color-blue-filledvar(--mantine-color-blue-8)
    --mantine-color-blue-filled-hovervar(--mantine-color-blue-9)
    --mantine-color-blue-lightrgba(34, 139, 230, 0.15)
    --mantine-color-blue-light-hoverrgba(34, 139, 230, 0.2)
    --mantine-color-blue-light-colorvar(--mantine-color-blue-3)
    --mantine-color-blue-outlinevar(--mantine-color-blue-4)
    --mantine-color-blue-outline-hoverrgba(77, 171, 247, 0.05)
    --mantine-color-cyan-textvar(--mantine-color-cyan-4)
    --mantine-color-cyan-filledvar(--mantine-color-cyan-8)
    --mantine-color-cyan-filled-hovervar(--mantine-color-cyan-9)
    --mantine-color-cyan-lightrgba(21, 170, 191, 0.15)
    --mantine-color-cyan-light-hoverrgba(21, 170, 191, 0.2)
    --mantine-color-cyan-light-colorvar(--mantine-color-cyan-3)
    --mantine-color-cyan-outlinevar(--mantine-color-cyan-4)
    --mantine-color-cyan-outline-hoverrgba(59, 201, 219, 0.05)
    --mantine-color-teal-textvar(--mantine-color-teal-4)
    --mantine-color-teal-filledvar(--mantine-color-teal-8)
    --mantine-color-teal-filled-hovervar(--mantine-color-teal-9)
    --mantine-color-teal-lightrgba(18, 184, 134, 0.15)
    --mantine-color-teal-light-hoverrgba(18, 184, 134, 0.2)
    --mantine-color-teal-light-colorvar(--mantine-color-teal-3)
    --mantine-color-teal-outlinevar(--mantine-color-teal-4)
    --mantine-color-teal-outline-hoverrgba(56, 217, 169, 0.05)
    --mantine-color-green-textvar(--mantine-color-green-4)
    --mantine-color-green-filledvar(--mantine-color-green-8)
    --mantine-color-green-filled-hovervar(--mantine-color-green-9)
    --mantine-color-green-lightrgba(64, 192, 87, 0.15)
    --mantine-color-green-light-hoverrgba(64, 192, 87, 0.2)
    --mantine-color-green-light-colorvar(--mantine-color-green-3)
    --mantine-color-green-outlinevar(--mantine-color-green-4)
    --mantine-color-green-outline-hoverrgba(105, 219, 124, 0.05)
    --mantine-color-lime-textvar(--mantine-color-lime-4)
    --mantine-color-lime-filledvar(--mantine-color-lime-8)
    --mantine-color-lime-filled-hovervar(--mantine-color-lime-9)
    --mantine-color-lime-lightrgba(130, 201, 30, 0.15)
    --mantine-color-lime-light-hoverrgba(130, 201, 30, 0.2)
    --mantine-color-lime-light-colorvar(--mantine-color-lime-3)
    --mantine-color-lime-outlinevar(--mantine-color-lime-4)
    --mantine-color-lime-outline-hoverrgba(169, 227, 75, 0.05)
    --mantine-color-yellow-textvar(--mantine-color-yellow-4)
    --mantine-color-yellow-filledvar(--mantine-color-yellow-8)
    --mantine-color-yellow-filled-hovervar(--mantine-color-yellow-9)
    --mantine-color-yellow-lightrgba(250, 176, 5, 0.15)
    --mantine-color-yellow-light-hoverrgba(250, 176, 5, 0.2)
    --mantine-color-yellow-light-colorvar(--mantine-color-yellow-3)
    --mantine-color-yellow-outlinevar(--mantine-color-yellow-4)
    --mantine-color-yellow-outline-hoverrgba(255, 212, 59, 0.05)
    --mantine-color-orange-textvar(--mantine-color-orange-4)
    --mantine-color-orange-filledvar(--mantine-color-orange-8)
    --mantine-color-orange-filled-hovervar(--mantine-color-orange-9)
    --mantine-color-orange-lightrgba(253, 126, 20, 0.15)
    --mantine-color-orange-light-hoverrgba(253, 126, 20, 0.2)
    --mantine-color-orange-light-colorvar(--mantine-color-orange-3)
    --mantine-color-orange-outlinevar(--mantine-color-orange-4)
    --mantine-color-orange-outline-hoverrgba(255, 169, 77, 0.05)

    Previous

    CSS variables

    Next

    rem, em and px units

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/css-variables/index.html b/styles/css-variables/index.html index 6164446271..6f2f7d4f6b 100644 --- a/styles/css-variables/index.html +++ b/styles/css-variables/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mantine CSS variables

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mantine CSS variables

    MantineProvider exposes all Mantine CSS variables based on the given theme. You can use these variables in CSS files, style prop or any other styles. Note that not all values are documented on this page, you can find full list of variables on this page.

    @@ -448,4 +448,4 @@ /* background color will automatically change based on color scheme */ background-color: var(--mantine-color-deep-orange); -}

    Previous

    Global styles

    Next

    CSS variables list

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Global styles

    Next

    CSS variables list

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/data-attributes/index.html b/styles/data-attributes/index.html index 8c1ef9ea76..c6b03812c6 100644 --- a/styles/data-attributes/index.html +++ b/styles/data-attributes/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    data attributes

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    data attributes

    Mantine components use data-* attributes to apply styles. These attributes are used as a modifier to apply styles based on component state. General rule of Mantine components styles: one class with shared styles and any number of data-* attributes as modifiers.

    @@ -142,4 +142,4 @@ // -> <div data-button data-opened /> <Box mod={{ orientation: 'horizontal' }} />; -// -> <div data-orientation="horizontal" />

    Previous

    Styles API

    Next

    Variants and sizes

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +// -> <div data-orientation="horizontal" />

    Previous

    Styles API

    Next

    Variants and sizes

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/emotion/index.html b/styles/emotion/index.html index 72cc96fbed..02ac9ed665 100644 --- a/styles/emotion/index.html +++ b/styles/emotion/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Emotion

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Emotion

    Prior to version 7.0 Mantine used Emotion as a styling solution. It was replaced with CSS modules in version 7.0, but you can still use Emotion with Mantine if you prefer it over CSS modules.

    @@ -780,4 +780,4 @@ [u.rtl]: { padding: 10 }, [u.smallerThan('md')]: { lineHeight: 20 }, }, -};

    Previous

    PostCSS preset

    Next

    Usage with Sass

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    PostCSS preset

    Next

    Usage with Sass

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/global-styles/index.html b/styles/global-styles/index.html index 51b5cbc7e4..1997889d08 100644 --- a/styles/global-styles/index.html +++ b/styles/global-styles/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Global styles

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Global styles

    @mantine/core package includes some global styles that are required for components to work correctly. If you override these styles, some components might not work as expected.

    Global styles are automatically imported with:

    @@ -90,4 +90,4 @@ change styles of <body />, :root and other elements. For example, to change body background-color:

    body {
   background-color: var(--mantine-color-red-filled);
-}

    Previous

    Vanilla extract

    Next

    CSS variables

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Vanilla extract

    Next

    CSS variables

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/mantine-styles/index.html b/styles/mantine-styles/index.html index a182bb95b4..6df073edbd 100644 --- a/styles/mantine-styles/index.html +++ b/styles/mantine-styles/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mantine styles

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mantine styles

    This guide explains how to import styles of @mantine/* packages in your application and how to override them with CSS layers in case you do not have a way to control the order of stylesheets in your application.

    @@ -93,4 +93,4 @@ rel="stylesheet" href="https://unpkg.com/@mantine/core@7.4.2/styles.layer.css" />
    -

    Styles on unpkg CDN are available for all Mantine packages that export styles.

    Previous

    Styles overview

    Next

    CSS files list

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Styles on unpkg CDN are available for all Mantine packages that export styles.

    Previous

    Styles overview

    Next

    CSS files list

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/postcss-preset/index.html b/styles/postcss-preset/index.html index 830ebeb20f..b82429815e 100644 --- a/styles/postcss-preset/index.html +++ b/styles/postcss-preset/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mantine PostCSS preset

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mantine PostCSS preset

    postcss-preset-mantine provides several CSS functions and mixins to help you write styles. It is not required to use it, but highly recommended. All demos that feature styles assume that you have this preset installed.

    @@ -333,4 +333,4 @@ mixins: false, }, }, -};

    Previous

    CSS modules

    Next

    Usage with Emotion

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    CSS modules

    Next

    Usage with Emotion

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/rem/index.html b/styles/rem/index.html index 1a838950a6..b9b3d11e8f 100644 --- a/styles/rem/index.html +++ b/styles/rem/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    rem, em and px units

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    rem, em and px units

    rem units

    All Mantine components use rem units to apply size styles (margin, padding, width, etc.). By default, 1rem is considered to be 16px as it is a default setting in most browsers. @@ -115,4 +115,4 @@ autoRem: true, }, }, -};

    Previous

    CSS variables list

    Next

    style prop

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    CSS variables list

    Next

    style prop

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/responsive/index.html b/styles/responsive/index.html index 92e265e083..78b8d5789a 100644 --- a/styles/responsive/index.html +++ b/styles/responsive/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Responsive styles

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Responsive styles

    Media queries

    Demo
    .demo {
   background-color: var(--mantine-color-blue-filled);
@@ -255,4 +255,4 @@
   .element {
     width: 40rem;
   }
-}

    Previous

    style prop

    Next

    Styles API

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    style prop

    Next

    Styles API

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/rtl/index.html b/styles/rtl/index.html index 6b28247a3e..5f59545b97 100644 --- a/styles/rtl/index.html +++ b/styles/rtl/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Right-to-left direction

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Right-to-left direction

    All Mantine components support right-to-left direction out of the box. You can preview how components work with RTL direction by clicking direction control in the top right corner or pressing Ctrl + Shift + L.

    @@ -81,4 +81,4 @@ /* RTL styles override LTR styles */ background-color: var(--mantine-color-red-filled); } -}

    Previous

    Color functions

    Next

    Styles performance

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Color functions

    Next

    Styles performance

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/sass/index.html b/styles/sass/index.html index 08813a59c2..d560d6cddf 100644 --- a/styles/sass/index.html +++ b/styles/sass/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Sass

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Sass

    This guide will explain how to use Sass in combination with postcss-preset-mantine. Note that examples on mantine.dev website use only postcss-preset-mantine – you will need to modify them to use with Sass.

    @@ -223,4 +223,4 @@ @include mantine.smaller-than(mantine.$mantine-breakpoint-md) { font-size: mantine.rem(50px); } -}

    Previous

    Usage with Emotion

    Next

    Vanilla extract

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Usage with Emotion

    Next

    Vanilla extract

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/style-props/index.html b/styles/style-props/index.html index e24a8822b1..25fc428634 100644 --- a/styles/style-props/index.html +++ b/styles/style-props/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Style props

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Style props

    With style props, you can add inline styles to any Mantine component. Style props add styles to the root element, if you need to style nested elements, use Styles API instead.

    @@ -124,4 +124,4 @@ .element { width: 40rem; } -}

    Previous

    Unstyled / headless

    Next

    Color functions

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Unstyled / headless

    Next

    Color functions

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/style/index.html b/styles/style/index.html index 153904b359..697bcdcf1a 100644 --- a/styles/style/index.html +++ b/styles/style/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Style prop

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Style prop

    All Mantine components that have root element support style prop. It works similar to React style prop, but with some additional features.

    Style object

    @@ -62,4 +62,4 @@ function Demo({ style }: DemoProps) { return <Box style={[{ color: 'red' }, style]} />; -}

    Previous

    rem, em and px units

    Next

    Responsive styles

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    rem, em and px units

    Next

    Responsive styles

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/styles-api/index.html b/styles/styles-api/index.html index 0ec76b4af1..10f4547dbe 100644 --- a/styles/styles-api/index.html +++ b/styles/styles-api/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Styles API

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Styles API

    What is Styles API

    The styles API is a set of props and techniques that allows you to customize the style of any element inside a Mantine component – inline or using the theme object. All Mantine components that @@ -275,4 +275,4 @@ function Demo() { return <button type="button" className={Button.classes.root} />; -}

    Previous

    Responsive styles

    Next

    data-* attributes

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Responsive styles

    Next

    data-* attributes

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/styles-overview/index.html b/styles/styles-overview/index.html index f2dbf060b3..7688cee2a1 100644 --- a/styles/styles-overview/index.html +++ b/styles/styles-overview/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Styles overview

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Styles overview

    This guide will help you understand how to apply styles to Mantine and custom components.

    Component specific props

    Most of the components provide props that allow you to customize their styles. For example, @@ -209,4 +209,4 @@ </Box> </> ); -}

    Previous

    Default props

    Next

    Mantine styles

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Default props

    Next

    Mantine styles

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/styles-performance/index.html b/styles/styles-performance/index.html index 14806e3f41..c5f11f7ace 100644 --- a/styles/styles-performance/index.html +++ b/styles/styles-performance/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Styles performance

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Styles performance

    CSS modules

    CSS modules is the most performant way to apply styles – this approach generates static CSS that is never re-evaluated. 99% of Mantine components @@ -140,4 +140,4 @@

    Some components, like SimpleGrid and Grid rely on the same mechanism as responsive style props to apply styles. The limitations are the same – it is fine to use these several of these components on a page, but it is not recommended to use -them in large lists of components.

    Previous

    RTL (right-to-left)

    Next

    Polymorphic components

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +them in large lists of components.

    Previous

    RTL (right-to-left)

    Next

    Polymorphic components

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/unstyled/index.html b/styles/unstyled/index.html index 9984ece0a2..4421bfbf2d 100644 --- a/styles/unstyled/index.html +++ b/styles/unstyled/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Unstyled components

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Unstyled components

    Using Mantine as a headless UI library

    You can use Mantine as a headless UI library. To do that, simply do not import @mantine/*/styles.css in your application. Then you will be able to apply styles to Mantine components using Styles API @@ -70,4 +70,4 @@ styled with Mantine styles.

    Note that unstyled prop does not remove Mantine library styles from your .css bundle – it only does not apply them to component with unstyled prop.

    -

    Previous

    Variants and sizes

    Next

    Style props

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Variants and sizes

    Next

    Style props

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/vanilla-extract/index.html b/styles/vanilla-extract/index.html index 66d5a0d974..d58e5ab65f 100644 --- a/styles/vanilla-extract/index.html +++ b/styles/vanilla-extract/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Vanilla extract integration

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Vanilla extract integration

    Vanilla extract is a TypeScript CSS preprocessor that generates static CSS files at build time. It is a great alternative to CSS Modules if you prefer to write your styles in TypeScript.

    Vanilla extract vs CSS Modules

    @@ -164,4 +164,4 @@ paddingRight: 0, }, }, -});

    Previous

    Usage with Sass

    Next

    Global styles

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +});

    Previous

    Usage with Sass

    Next

    Global styles

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/variants-sizes/index.html b/styles/variants-sizes/index.html index 7841276f4c..0f58d020b4 100644 --- a/styles/variants-sizes/index.html +++ b/styles/variants-sizes/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Variants and sizes

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Variants and sizes

    Adding custom variants

    Most of Mantine components support variant prop, it can be used in CSS variables resolver, and it is also exposed as data-variant="{value}" attribute on the root element of the component. @@ -221,4 +221,4 @@ --button-padding-x-compact-xl: rem(14px); }

    Usually, it is more convenient to use data-size attribute or vars on theme -to customize sizes in this case.

    Previous

    data-* attributes

    Next

    Unstyled / headless

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +to customize sizes in this case.

    Previous

    data-* attributes

    Next

    Unstyled / headless

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/submit-template/index.html b/submit-template/index.html index 8524a93127..90c76d398e 100644 --- a/submit-template/index.html +++ b/submit-template/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Submit a template

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Submit a template

    You are welcome to create and share a template with the community. Templates that you submit are listed on the getting started page.

    What is a template

    @@ -34,4 +34,4 @@
  • Make sure that your template has all the properties listed above
  • Submit your template by creating an issue on Github
  • After your template is reviewed, it will be added to the getting started page
    • -
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/templates-usage/index.html b/templates-usage/index.html index 6437f527e4..456050cb6d 100644 --- a/templates-usage/index.html +++ b/templates-usage/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Templates

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Templates

    Mantine provides a set of templates for most common use cases. A template is a set of configuration files that are required to get started with Mantine and a React framework of your choice. @@ -35,4 +35,4 @@

  • Extract downloaded archive
  • Install dependencies by running yarn
  • Start development server by running yarn dev/yarn start (exact command depends on the framework of the template)
    • -
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/theming/color-schemes/index.html b/theming/color-schemes/index.html index 045016841a..9abc44f0f3 100644 --- a/theming/color-schemes/index.html +++ b/theming/color-schemes/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Color schemes

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Color schemes

    MantineProvider manages color scheme context in your application. You can configure the default color scheme value with defaultColorScheme prop, possible values are light, dark and auto (system color scheme is used). The default value is light.

    @@ -343,4 +343,4 @@ </body> </html> ); -}

    Previous

    Colors

    Next

    Typography

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Colors

    Next

    Typography

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/theming/colors/index.html b/theming/colors/index.html index 5aca53af27..ab985a6bbb 100644 --- a/theming/colors/index.html +++ b/theming/colors/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Colors

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Colors

    Mantine uses open-color in default theme with some additions. Each color has 10 shades.

    Colors are exposed on the theme object as an array of strings, @@ -442,4 +442,4 @@ export interface MantineThemeColorsOverride { colors: Record<ExtendedCustomColors, MantineColorsTuple>; } -}

    Previous

    Theme object

    Next

    Color schemes

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Theme object

    Next

    Color schemes

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/theming/default-props/index.html b/theming/default-props/index.html index 3d0b5e4069..aca77a3e36 100644 --- a/theming/default-props/index.html +++ b/theming/default-props/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Default props

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Default props

    You can define default props for every Mantine component by setting theme.components. These props will be used by default by all components of your application unless they are overridden by component props:

    import { MantineProvider, Button, Group, createTheme } from '@mantine/core';
@@ -172,4 +172,4 @@
       <PhoneInput placeholder="Personal phone" />
     </>
   );
-}

    Previous

    Typography

    Next

    Styles overview

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Typography

    Next

    Styles overview

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/theming/default-theme/index.html b/theming/default-theme/index.html index a2d5eb9f9c..8747802f01 100644 --- a/theming/default-theme/index.html +++ b/theming/default-theme/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Default theme object

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Default theme object

    Import default theme object

    You can import DEFAULT_THEME from @mantine/core package:

    import { DEFAULT_THEME } from '@mantine/core';
    @@ -279,4 +279,4 @@ }, "other": {}, "components": {} -}

    Next

    MantineProvider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Next

    MantineProvider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/theming/mantine-provider/index.html b/theming/mantine-provider/index.html index 2689ee6077..93fc988d89 100644 --- a/theming/mantine-provider/index.html +++ b/theming/mantine-provider/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    MantineProvider

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    MantineProvider

    MantineProvider provides a theme object context value, manages color scheme changes and injects CSS variables. It must be rendered at the root of your application and should be used only once.

    @@ -241,4 +241,4 @@

    getStyleNonce is a function to generate nonce attribute added to dynamic generated <style /> tags.

    cssVariablesResolver

    cssVariablesResolver is a function to generate CSS variables styles based on the theme object. -You can learn more about Mantine CSS variables in the CSS variables guide.

    Next

    Theme object

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +You can learn more about Mantine CSS variables in the CSS variables guide.

    Next

    Theme object

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/theming/theme-object/index.html b/theming/theme-object/index.html index 221d9236b7..071df4da1f 100644 --- a/theming/theme-object/index.html +++ b/theming/theme-object/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Theme object

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Theme object

    Mantine theme is an object where your application's colors, fonts, spacing, border-radius and other design tokens are stored.

    interface MantineTheme {
   /** Controls focus ring styles. Supports the following options:
@@ -481,4 +481,4 @@
 
 export const theme = mergeMantineTheme(DEFAULT_THEME, themeOverride);

    Then you will be able to import it anywhere in your application:

    -
    import { theme } from './theme';

    Previous

    MantineProvider

    Next

    Colors

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    import { theme } from './theme';

    Previous

    MantineProvider

    Next

    Colors

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/theming/typography/index.html b/theming/typography/index.html index 2a31579022..2ea84b3b9f 100644 --- a/theming/typography/index.html +++ b/theming/typography/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Typography

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Typography

    Change fonts

    You can change fonts and other text styles for headings, code and all other components with the following theme properties:

      @@ -160,4 +160,4 @@ <Title order={6}>Heading 6</Title> </MantineThemeProvider> ); -}

    Previous

    Color schemes

    Next

    Default props

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Color schemes

    Next

    Default props

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/x/carousel/index.html b/x/carousel/index.html index 2f381f458d..34597b3802 100644 --- a/x/carousel/index.html +++ b/x/carousel/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Carousel

    Embla based carousel component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/carousel

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Carousel

    Embla based carousel component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/carousel

    License

    MIT

    Installation

    yarn add embla-carousel-react@^7.1.0 @mantine/carousel

    After installation import package styles at the root of your application:

    import '@mantine/carousel/styles.css';
    @@ -488,4 +488,4 @@ </Modal> </> ); -}

    Previous

    Spotlight

    Next

    Dropzone

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Spotlight

    Next

    Dropzone

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/x/code-highlight/index.html b/x/code-highlight/index.html index 2fe9c81d12..5f2fbd4bf5 100644 --- a/x/code-highlight/index.html +++ b/x/code-highlight/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CodeHighlight

    Highlight code with highlight.js

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/code-highlight

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CodeHighlight

    Highlight code with highlight.js

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/code-highlight

    License

    MIT

    Installation

    yarn add @mantine/code-highlight

    After installation import package styles at the root of your application:

    import '@mantine/code-highlight/styles.css';
    @@ -413,4 +413,4 @@ Is not that cool? </Text> ); -}

    Previous

    Sparkline

    Next

    Notifications system

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Sparkline

    Next

    Notifications system

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/x/dropzone/index.html b/x/dropzone/index.html index 6a81ac79f5..b78613cf53 100644 --- a/x/dropzone/index.html +++ b/x/dropzone/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Dropzone

    Capture files from user with drag and drop

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dropzone

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Dropzone

    Capture files from user with drag and drop

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dropzone

    License

    MIT

    Installation

    yarn add @mantine/dropzone

    After installation import package styles at the root of your application:

    import '@mantine/dropzone/styles.css';
    @@ -325,4 +325,4 @@ </Dropzone.FullScreen> </> ); -}

    Previous

    Carousel

    Next

    NavigationProgress

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Carousel

    Next

    NavigationProgress

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/x/modals/index.html b/x/modals/index.html index 4ba27be3a2..15abafe2f2 100644 --- a/x/modals/index.html +++ b/x/modals/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Modals manager

    Centralized modals manager with option to handle state of multi-step modals

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/modals

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Modals manager

    Centralized modals manager with option to handle state of multi-step modals

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/modals

    License

    MIT

    Installation

    yarn add @mantine/modals

    Setup ModalsProvider

    Wrap your app with ModalsProvider component:

    @@ -277,4 +277,4 @@
    • Use internal component state, or
    • Use the modal component instead of modals manager
      • -

    Previous

    NavigationProgress

    Next

    Rich text editor

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    NavigationProgress

    Next

    Rich text editor

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/x/notifications/index.html b/x/notifications/index.html index e0eda503b5..0253de40d7 100644 --- a/x/notifications/index.html +++ b/x/notifications/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Notifications system

    Mantine notifications system

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/notifications

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Notifications system

    Mantine notifications system

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/notifications

    License

    MIT

    Installation

    yarn add @mantine/notifications

    After installation import package styles at the root of your application:

    import '@mantine/notifications/styles.css';
    @@ -393,4 +393,4 @@ <Code block>{JSON.stringify(notificationsStore.queue, null, 2)}</Code> </> ); -}

    Previous

    CodeHighlight

    Next

    Spotlight

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    CodeHighlight

    Next

    Spotlight

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/x/nprogress/index.html b/x/nprogress/index.html index 836574cf62..63c3eb1ad0 100644 --- a/x/nprogress/index.html +++ b/x/nprogress/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NavigationProgress

    Navigation progress bar

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/nprogress

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NavigationProgress

    Navigation progress bar

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/nprogress

    License

    MIT

    Installation

    yarn add @mantine/nprogress

    After installation import package styles at the root of your application:

    import '@mantine/nprogress/styles.css';
    @@ -40,4 +40,4 @@ </Group> </> ); -}

    Previous

    Dropzone

    Next

    Modals manager

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Dropzone

    Next

    Modals manager

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/x/spotlight/index.html b/x/spotlight/index.html index 404bc71588..3e9e0a4ffa 100644 --- a/x/spotlight/index.html +++ b/x/spotlight/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Spotlight

    Command center for your application

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/spotlight

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Spotlight

    Command center for your application

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/spotlight

    License

    MIT

    Installation

    yarn add @mantine/spotlight

    After installation import package styles at the root of your application:

    import '@mantine/spotlight/styles.css';
    @@ -381,4 +381,4 @@ </div> </> ); -}

    Previous

    Notifications system

    Next

    Carousel

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Notifications system

    Next

    Carousel

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/x/tiptap/index.html b/x/tiptap/index.html index 11aabc08b4..9cd919cb17 100644 --- a/x/tiptap/index.html +++ b/x/tiptap/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Rich text editor

    Tiptap based rich text editor

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/tiptap

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Rich text editor

    Tiptap based rich text editor

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/tiptap

    License

    MIT

    Installation

    Install with yarn:

    yarn add @mantine/tiptap @mantine/core @mantine/hooks @tiptap/react @tiptap/pm @tiptap/extension-link @tiptap/starter-kit

    After installation import package styles at the root of your application:

    @@ -842,4 +842,4 @@ colorPickerPalette: 'Color palette', colorPickerSave: 'Save', colorPickerColorLabel: (color) => `Set text color ${color}`, -};

    Previous

    Modals manager

    Next

    Version v7.14.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    Modals manager

    Next

    Version v7.14.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file