+
+
diff --git a/docs/components/HomePage/HomePage.module.css b/docs/components/HomePage/HomePage.module.css
new file mode 100644
index 00000000000..d11a5a9e179
--- /dev/null
+++ b/docs/components/HomePage/HomePage.module.css
@@ -0,0 +1,35 @@
+.root {
+ position: relative;
+ z-index: 1;
+ box-shadow: var(--mantine-shadow-md);
+ background-color: var(--mantine-color-body);
+ min-height: 100vh;
+
+ @mixin light {
+ --docs-home-page-gradient-text: linear-gradient(
+ 52deg,
+ var(--mantine-color-blue-7) 3%,
+ var(--mantine-color-cyan-5) 97%
+ );
+
+ --docs-home-page-gradient: linear-gradient(
+ 52deg,
+ var(--mantine-color-blue-7) 3%,
+ var(--mantine-color-cyan-5) 97%
+ );
+ }
+
+ @mixin dark {
+ --docs-home-page-gradient-text: linear-gradient(
+ 52deg,
+ var(--mantine-color-blue-5) 3%,
+ var(--mantine-color-cyan-4) 97%
+ );
+
+ --docs-home-page-gradient: linear-gradient(
+ 52deg,
+ var(--mantine-color-blue-7) 3%,
+ var(--mantine-color-cyan-5) 97%
+ );
+ }
+}
diff --git a/docs/components/HomePage/HomePage.tsx b/docs/components/HomePage/HomePage.tsx
new file mode 100644
index 00000000000..7691d98e564
--- /dev/null
+++ b/docs/components/HomePage/HomePage.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import Head from 'next/head';
+import { Shell } from '../Shell';
+import { Footer } from '../Footer';
+import { Jumbotron } from './Jumbotron/Jumbotron';
+import { Waves } from './Waves/Waves';
+import { Components } from './Components/Components';
+import { DarkTheme } from './DarkTheme/DarkTheme';
+import { CustomizeWithProps } from './CustomizeWithProps/CustomizeWithProps';
+import { CustomizeStyles } from './CustomizeStyles/CustomizeStyles';
+import { Theming } from './Theming/Theming';
+import { Banner } from './Banner/Banner';
+import { Hooks } from './Hooks/Hooks';
+import { Usage } from './Usage/Usage';
+import { JoinCommunity } from './JoinCommunity/JoinCommunity';
+import classes from './HomePage.module.css';
+
+export function HomePage() {
+ return (
+ <>
+
+
Mantine
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/components/HomePage/Hooks/Hooks.module.css b/docs/components/HomePage/Hooks/Hooks.module.css
new file mode 100644
index 00000000000..27bcb30735a
--- /dev/null
+++ b/docs/components/HomePage/Hooks/Hooks.module.css
@@ -0,0 +1,25 @@
+.demo {
+ & [data-with-padding] {
+ background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8));
+ }
+
+ & :global(textarea) {
+ @mixin light {
+ background-color: var(--mantine-color-gray-1) !important;
+ }
+
+ @mixin dark {
+ background-color: var(--mantine-color-dark-5) !important;
+ }
+ }
+
+ & :global(.mantine-CodeHighlightTabs-root) {
+ background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8));
+ }
+}
+
+.demoWrapper {
+ box-shadow: var(--mantine-shadow-md);
+ margin-bottom: var(--mantine-spacing-xl);
+ border-radius: var(--mantine-radius-md);
+}
diff --git a/docs/components/HomePage/Hooks/Hooks.tsx b/docs/components/HomePage/Hooks/Hooks.tsx
new file mode 100644
index 00000000000..7ca7c7eba73
--- /dev/null
+++ b/docs/components/HomePage/Hooks/Hooks.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { Box } from '@mantine/core';
+import {
+ IconArrowsMaximize,
+ IconClock,
+ IconForms,
+ IconHandOff,
+ IconMaximize,
+ IconResize,
+} from '@tabler/icons-react';
+import { Demo } from '@mantine/ds';
+import { FormDemos, HooksDemos } from '@mantine/demos';
+import { DemoTabs } from '../DemoTabs/DemoTabs';
+import classes from './Hooks.module.css';
+
+const data = [
+ {
+ demo: () => (
+
+
+ ),
+ icon: IconResize,
+ name: 'use-element-size',
+ description: 'Subscribe to element size changes',
+ },
+ {
+ demo: () => (
+
+
+ ),
+ icon: IconClock,
+ name: 'use-debounced-value',
+ description: 'Debounce value changes',
+ },
+ {
+ demo: () => (
+
+
+ ),
+ icon: IconHandOff,
+ name: 'use-idle',
+ description: 'Detect if user does nothing',
+ },
+ {
+ demo: () => (
+
+
+ ),
+ icon: IconMaximize,
+ name: 'use-fullscreen',
+ description: 'Enter/exit fullscreen',
+ },
+ {
+ demo: () => (
+
+
+ ),
+ icon: IconArrowsMaximize,
+ name: 'use-move',
+ description: 'Slide behavior over any element',
+ },
+ {
+ demo: () => (
+
+
+ ),
+ icon: IconForms,
+ name: 'use-form',
+ description: 'Forms management library',
+ },
+];
+
+export function Hooks() {
+ return (
+
+
+ );
+}
diff --git a/docs/components/HomePage/JoinCommunity/JoinCommunity.tsx b/docs/components/HomePage/JoinCommunity/JoinCommunity.tsx
new file mode 100644
index 00000000000..0c3f4f5ef84
--- /dev/null
+++ b/docs/components/HomePage/JoinCommunity/JoinCommunity.tsx
@@ -0,0 +1,14 @@
+import { Space } from '@mantine/core';
+import React from 'react';
+import { SocialCards } from '../../SocialCards';
+import { PageSection } from '../PageSection/PageSection';
+
+export function JoinCommunity() {
+ return (
+
+
+ );
+}
diff --git a/docs/src/components/HomePage/Jumbotron/Hero.tsx b/docs/components/HomePage/Jumbotron/Hero.tsx
similarity index 89%
rename from docs/src/components/HomePage/Jumbotron/Hero.tsx
rename to docs/components/HomePage/Jumbotron/Hero.tsx
index 842f04e34eb..cf176f61dd9 100644
--- a/docs/src/components/HomePage/Jumbotron/Hero.tsx
+++ b/docs/components/HomePage/Jumbotron/Hero.tsx
@@ -1,12 +1,18 @@
import React from 'react';
import { useMantineTheme } from '@mantine/core';
+import classes from './Jumbotron.module.css';
export function Hero() {
const theme = useMantineTheme();
return (
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/components/HomePage/Jumbotron/Jumbotron.module.css b/docs/components/HomePage/Jumbotron/Jumbotron.module.css
new file mode 100644
index 00000000000..850b7e15d7e
--- /dev/null
+++ b/docs/components/HomePage/Jumbotron/Jumbotron.module.css
@@ -0,0 +1,122 @@
+$jumbotron-breakpoint: em(960px);
+
+.jumbotron {
+ position: relative;
+ background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8));
+}
+
+.inner {
+ position: relative;
+ padding-top: rem(220px);
+ padding-bottom: rem(180px);
+
+ @media (max-width: $jumbotron-breakpoint) {
+ padding-top: rem(60px);
+ padding-bottom: rem(90px);
+ }
+}
+
+.description {
+ margin-top: calc(var(--mantine-spacing-xl) * 1.5);
+ font-size: rem(24px);
+ max-width: rem(800px);
+ color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+
+ @media (max-width: $jumbotron-breakpoint) {
+ margin-top: var(--mantine-spacing-lg);
+ font-size: rem(18px);
+ }
+}
+
+.controls {
+ margin-top: calc(var(--mantine-spacing-xl) * 1.5);
+
+ @media (max-width: $jumbotron-breakpoint) {
+ margin-top: var(--mantine-spacing-xl);
+ }
+}
+
+.control {
+ height: rem(64px);
+ padding-left: rem(46px);
+ padding-right: rem(46px);
+ font-size: rem(20px);
+ font-weight: 700;
+ border: 0;
+
+ @media (max-width: $jumbotron-breakpoint) {
+ height: rem(54px);
+ padding-left: rem(18px);
+ padding-right: rem(18px);
+ flex: 1;
+ }
+
+ &[data-primary] {
+ background-image: var(--docs-home-page-gradient);
+ }
+
+ &[data-github] {
+ background-color: var(--mantine-color-dark-6);
+ color: var(--mantine-color-white);
+
+ & :global(.mantine-Button-section) {
+ margin-right: rem(16px);
+
+ @mixin rtl {
+ margin-right: 0;
+ margin-left: rem(16px);
+ }
+ }
+
+ @mixin hover {
+ background-color: var(--mantine-color-dark-5);
+ }
+ }
+}
+
+.feature {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ @media (max-width: $mantine-breakpoint-md) {
+ flex-direction: row;
+ }
+}
+
+.featureBody {
+ margin-top: var(--mantine-spacing-xs);
+
+ @media (max-width: $mantine-breakpoint-md) {
+ margin-top: 0;
+ margin-left: var(--mantine-spacing-lg);
+
+ @mixin rtl {
+ margin-left: 0;
+ margin-right: var(--mantine-spacing-lg);
+ }
+ }
+}
+
+.featureTitle {
+ color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+}
+
+.featureIcon {
+ color: var(--mantine-color-white);
+ border-radius: var(--mantine-radius-md);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-width: rem(50px);
+ height: rem(50px);
+ background-image: var(--docs-home-page-gradient);
+
+ & svg {
+ display: block;
+ }
+}
+
+.heroSvg {
+ color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+}
diff --git a/docs/components/HomePage/Jumbotron/Jumbotron.tsx b/docs/components/HomePage/Jumbotron/Jumbotron.tsx
new file mode 100644
index 00000000000..6f3331a85f8
--- /dev/null
+++ b/docs/components/HomePage/Jumbotron/Jumbotron.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import Link from 'next/link';
+import { Container, Group, Button, Text, SimpleGrid, rem } from '@mantine/core';
+import { GithubIcon } from '@mantine/ds';
+import { Hero } from './Hero';
+import { FEATURES_DATA } from './features';
+import classes from './Jumbotron.module.css';
+
+export function Jumbotron() {
+ const features = FEATURES_DATA.map((feature) => (
+
+
+
+
+
+
+ {feature.title}
+
+
+ {feature.description}
+
+
+
+
+
+ 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
+
+
+
+ {features}
+
+
+
+
+ Get started
+
+
+
+
+
+ );
+}
diff --git a/docs/src/components/HomePage/Jumbotron/features.ts b/docs/components/HomePage/Jumbotron/features.ts
similarity index 100%
rename from docs/src/components/HomePage/Jumbotron/features.ts
rename to docs/components/HomePage/Jumbotron/features.ts
diff --git a/docs/components/HomePage/PageSection/PageSection.module.css b/docs/components/HomePage/PageSection/PageSection.module.css
new file mode 100644
index 00000000000..109024d4c69
--- /dev/null
+++ b/docs/components/HomePage/PageSection/PageSection.module.css
@@ -0,0 +1,19 @@
+.wrapper {
+ padding-top: rem(120px);
+ padding-bottom: rem(60px);
+ background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+
+ &[data-alt] {
+ background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8));
+ }
+}
+
+.description {
+ line-height: 1.6;
+ opacity: 0.85;
+ color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+
+ @media (max-width: em(960px)) {
+ font-size: var(--mantine-font-size-md);
+ }
+}
diff --git a/docs/components/HomePage/PageSection/PageSection.tsx b/docs/components/HomePage/PageSection/PageSection.tsx
new file mode 100644
index 00000000000..dcc57d904a6
--- /dev/null
+++ b/docs/components/HomePage/PageSection/PageSection.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Container, Text, BoxProps, ElementProps, Box } from '@mantine/core';
+import { SectionTitle } from '../SectionTitle/SectionTitle';
+import classes from './PageSection.module.css';
+
+interface PageSectionProps extends BoxProps, ElementProps<'div'> {
+ title: string;
+ description?: string;
+ children: React.ReactNode;
+ alt?: boolean;
+}
+
+export function PageSection({ title, description, children, alt, ...others }: PageSectionProps) {
+ return (
+
+
+ {title}
+
+ {description && (
+
+ {description}
+
+ )}
+
+ {children}
+
+
+ );
+}
diff --git a/docs/components/HomePage/SectionTitle/SectionTitle.module.css b/docs/components/HomePage/SectionTitle/SectionTitle.module.css
new file mode 100644
index 00000000000..18c32eed3ee
--- /dev/null
+++ b/docs/components/HomePage/SectionTitle/SectionTitle.module.css
@@ -0,0 +1,96 @@
+.title {
+ --title-color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+
+ display: inline-block;
+ position: relative;
+ font-family: var(--docs-font-primary);
+ font-size: rem(42px);
+ font-weight: 900;
+ line-height: 1.1;
+ margin: 0;
+ padding: 0;
+ text-align: left;
+ margin-bottom: calc(var(--mantine-spacing-xl) * 2);
+ letter-spacing: rem(1px);
+ margin-left: rem(22px);
+ text-transform: uppercase;
+ color: var(--title-color);
+
+ @mixin rtl {
+ margin-left: 0;
+ margin-right: rem(22px);
+ text-align: right;
+ }
+
+ @media (max-width: $mantine-breakpoint-sm) {
+ margin-bottom: var(--mantine-spacing-md);
+ }
+
+ &::before,
+ &::after {
+ content: '';
+ position: absolute;
+ width: rem(10px);
+ height: rem(10px);
+ }
+
+ &::before {
+ top: rem(-14px);
+ left: rem(-22px);
+ border-left: rem(5px) solid var(--title-color);
+ border-top: rem(5px) solid var(--title-color);
+
+ @mixin rtl {
+ left: auto;
+ right: rem(-22px);
+ border-left: none;
+ border-right: rem(5px) solid var(--title-color);
+ }
+ }
+
+ &::after {
+ bottom: rem(-14px);
+ right: rem(-22px);
+ border-right: rem(5px) solid var(--title-color);
+ border-bottom: rem(5px) solid var(--title-color);
+
+ @mixin rtl {
+ right: auto;
+ left: rem(-22px);
+ border-right: none;
+ border-left: rem(5px) solid var(--title-color);
+ }
+ }
+
+ @media (max-width: em(600px)) {
+ font-size: rem(28px);
+ margin-left: 0;
+
+ @mixin rtl {
+ margin-right: 0;
+ }
+
+ &::before,
+ &::after {
+ display: none;
+ }
+ }
+
+ &[data-white] {
+ color: var(--mantine-color-white);
+ text-shadow: rem(1px) rem(2px) rem(2px) rgba(0, 0, 0, 0.3);
+
+ &::before,
+ &::after {
+ filter: drop-shadow(rem(1px) rem(2px) rem(2px) rgba(0, 0, 0, 0.3));
+ border-color: var(--mantine-color-white);
+ }
+ }
+
+ &[data-default] {
+ &::before,
+ &::after {
+ border-color: var(--title-color);
+ }
+ }
+}
diff --git a/docs/components/HomePage/SectionTitle/SectionTitle.tsx b/docs/components/HomePage/SectionTitle/SectionTitle.tsx
new file mode 100644
index 00000000000..0cd3164d62b
--- /dev/null
+++ b/docs/components/HomePage/SectionTitle/SectionTitle.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import cx from 'clsx';
+import classes from './SectionTitle.module.css';
+
+interface SectionTitleProps extends React.ComponentProps<'h1'> {
+ type?: 'white' | 'default';
+}
+
+export function SectionTitle({
+ children,
+ className,
+ type = 'default',
+ ...others
+}: SectionTitleProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/docs/components/HomePage/Theming/Theming.module.css b/docs/components/HomePage/Theming/Theming.module.css
new file mode 100644
index 00000000000..96d119118c8
--- /dev/null
+++ b/docs/components/HomePage/Theming/Theming.module.css
@@ -0,0 +1,6 @@
+.codeHighlight {
+ background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8));
+ box-shadow: var(--mantine-shadow-md);
+ border-radius: var(--mantine-radius-md);
+ margin-top: var(--mantine-spacing-xl);
+}
diff --git a/docs/components/HomePage/Theming/Theming.tsx b/docs/components/HomePage/Theming/Theming.tsx
new file mode 100644
index 00000000000..1da8461bcb5
--- /dev/null
+++ b/docs/components/HomePage/Theming/Theming.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Group, Button, Badge } from '@mantine/core';
+import { CodeHighlight } from '@mantine/code-highlight';
+import { PageSection } from '../PageSection/PageSection';
+import classes from './Theming.module.css';
+
+const code = `
+import { Badge, Button, MantineProvider, createTheme } from '@mantine/core';
+
+const theme = createTheme({
+ fontFamily: 'Greycliff CF, sans-serif',
+ colors: {
+ 'ocean-blue': ['#7AD1DD', '#5FCCDB', '#44CADC', '#2AC9DE', '#1AC2D9', '#11B7CD', '#09ADC3', '#0E99AC', '#128797', '#147885'],
+ 'bright-pink': ['#F0BBDD', '#ED9BCF', '#EC7CC3', '#ED5DB8', '#F13EAF', '#F71FA7', '#FF00A1', '#E00890', '#C50E82', '#AD1374'],
+ },
+});
+
+function Demo() {
+ return (
+
+ Ocean blue button
+ Bright pink badge
+
+ );
+}
+`;
+
+export function Theming() {
+ return (
+
+
+
+ Ocean blue button
+
+
+ Bright pink badge
+
+
+
+
+ );
+}
diff --git a/docs/components/HomePage/Usage/Usage.tsx b/docs/components/HomePage/Usage/Usage.tsx
new file mode 100644
index 00000000000..e70e620c6ee
--- /dev/null
+++ b/docs/components/HomePage/Usage/Usage.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Space } from '@mantine/core';
+import { FrameworksGuides } from '../../FrameworksGuides';
+import { PageSection } from '../PageSection/PageSection';
+
+export function Usage() {
+ return (
+
+
+ );
+}
diff --git a/docs/components/HomePage/Waves/Waves.module.css b/docs/components/HomePage/Waves/Waves.module.css
new file mode 100644
index 00000000000..9cdaf963a25
--- /dev/null
+++ b/docs/components/HomePage/Waves/Waves.module.css
@@ -0,0 +1,34 @@
+.root {
+ overflow: hidden;
+ background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+
+ &[data-alt] {
+ transform: rotate(180deg);
+ background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8));
+ }
+}
+
+.waves {
+ fill: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8));
+ width: var(--waves-width);
+ height: var(--waves-height);
+ filter: drop-shadow(rem(10px) rem(5px) rem(5px) rgba(0, 0, 0, 0.03));
+ display: block;
+
+ &[data-flip] {
+ transform: scaleY(-1);
+
+ &[data-rotate] {
+ transform: scaleY(1) rotate(180deg);
+ }
+ }
+
+ &[data-alt] {
+ fill: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+ filter: none;
+ }
+
+ @media (max-width: $mantine-breakpoint-sm) {
+ height: rem(18px);
+ }
+}
diff --git a/docs/components/HomePage/Waves/Waves.tsx b/docs/components/HomePage/Waves/Waves.tsx
new file mode 100644
index 00000000000..4ed8df7878a
--- /dev/null
+++ b/docs/components/HomePage/Waves/Waves.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Box, rem } from '@mantine/core';
+import classes from './Waves.module.css';
+
+interface WavesProps {
+ height: number;
+ width: number;
+ flip?: boolean;
+ alt?: boolean;
+ rotate?: boolean;
+}
+
+export function Waves({ height, width, flip, alt, rotate }: WavesProps) {
+ return (
+
+
+
+
+ );
+}
diff --git a/docs/components/HomePage/index.ts b/docs/components/HomePage/index.ts
new file mode 100644
index 00000000000..0799f479a25
--- /dev/null
+++ b/docs/components/HomePage/index.ts
@@ -0,0 +1 @@
+export { HomePage } from './HomePage';
diff --git a/docs/components/HotKeysHandler/HotKeysHandler.tsx b/docs/components/HotKeysHandler/HotKeysHandler.tsx
new file mode 100644
index 00000000000..07d07a4ad9e
--- /dev/null
+++ b/docs/components/HotKeysHandler/HotKeysHandler.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { useHotkeys } from '@mantine/hooks';
+import { useMantineColorScheme, useComputedColorScheme, useDirection } from '@mantine/core';
+
+export function HotKeysHandler() {
+ const { setColorScheme } = useMantineColorScheme();
+ const { toggleDirection } = useDirection();
+ const computedColorScheme = useComputedColorScheme('light');
+ useHotkeys(
+ [
+ ['mod + J', () => setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')],
+ ['mod + shift + L', () => toggleDirection()],
+ ],
+ []
+ );
+ return <>{null};
+}
diff --git a/docs/components/HotKeysHandler/index.ts b/docs/components/HotKeysHandler/index.ts
new file mode 100644
index 00000000000..72cf65929be
--- /dev/null
+++ b/docs/components/HotKeysHandler/index.ts
@@ -0,0 +1 @@
+export { HotKeysHandler } from './HotKeysHandler';
diff --git a/docs/components/HtmlText/HtmlText.tsx b/docs/components/HtmlText/HtmlText.tsx
new file mode 100644
index 00000000000..201b5ba8386
--- /dev/null
+++ b/docs/components/HtmlText/HtmlText.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Text, TextProps, ElementProps } from '@mantine/core';
+
+interface HtmlTextProps extends TextProps, ElementProps<'span', 'color'> {
+ children: string;
+}
+
+function replaceBackticks(str: string): string {
+ return str.replace(/`([^`]+)`/g, '$1');
+}
+
+export function HtmlText({ children, ...others }: HtmlTextProps) {
+ return (
+
+ Welcome to Mantine, React components library that you always wished for
+
+
+
+
+
+
+
+
+ Download svg
+
+ clipboard.copy(code)}
+ >
+ {clipboard.copied ? 'Copied' : 'Copy svg code'}
+
+
+
{items}
;
+}
diff --git a/docs/components/LogoAssets/assets/index.ts b/docs/components/LogoAssets/assets/index.ts
new file mode 100644
index 00000000000..5e59dc35ead
--- /dev/null
+++ b/docs/components/LogoAssets/assets/index.ts
@@ -0,0 +1,28 @@
+import logoFull from './mantine-logo-full.svg';
+import logoWhite from './mantine-logo-white.svg';
+import logo from './mantine-logo.svg';
+import { LogoAssetProps } from '../LogoAsset/LogoAsset';
+
+export const logos: LogoAssetProps[] = [
+ {
+ image: logo.src,
+ code: '{children}
+
+ );
+}
+
+export function Layout(meta: Frontmatter) {
+ return ({ children }: { children: React.ReactNode }) => (
+ {children}
+ );
+}
diff --git a/docs/components/MdxLayout/index.ts b/docs/components/MdxLayout/index.ts
new file mode 100644
index 00000000000..91860e4e9bd
--- /dev/null
+++ b/docs/components/MdxLayout/index.ts
@@ -0,0 +1 @@
+export { MdxLayout, Layout } from './MdxLayout';
diff --git a/docs/components/MdxPage/MdxPage.tsx b/docs/components/MdxPage/MdxPage.tsx
new file mode 100644
index 00000000000..53da57083b1
--- /dev/null
+++ b/docs/components/MdxPage/MdxPage.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { MdxPageHeader } from '@/components/MdxPageHeader';
+import { MdxTabs } from '@/components/MdxTabs';
+import { MdxRawContent } from '@/components/MdxRawContent';
+import { Frontmatter } from '@/types';
+
+interface MdxPageProps {
+ meta: Frontmatter;
+ children: React.ReactNode;
+}
+
+export function MdxPage(props: MdxPageProps) {
+ return (
+ <>
+
+
+ {label}
+
+ {children}
+
+ );
+}
diff --git a/docs/components/MdxPageHeader/ImportStatement/ImportStatement.module.css b/docs/components/MdxPageHeader/ImportStatement/ImportStatement.module.css
new file mode 100644
index 00000000000..9c2906647d6
--- /dev/null
+++ b/docs/components/MdxPageHeader/ImportStatement/ImportStatement.module.css
@@ -0,0 +1,7 @@
+.wrapper {
+ white-space: nowrap;
+
+ @media (max-width: 31em) {
+ display: none;
+ }
+}
diff --git a/docs/components/MdxPageHeader/ImportStatement/ImportStatement.tsx b/docs/components/MdxPageHeader/ImportStatement/ImportStatement.tsx
new file mode 100644
index 00000000000..47729fc4a3d
--- /dev/null
+++ b/docs/components/MdxPageHeader/ImportStatement/ImportStatement.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { em, Tooltip, UnstyledButton } from '@mantine/core';
+import { InlineCodeHighlight } from '@mantine/code-highlight';
+import { useClipboard, useMediaQuery } from '@mantine/hooks';
+import { HeaderItem } from '../HeaderItem/HeaderItem';
+import classes from './ImportStatement.module.css';
+
+interface ImportStatementProps {
+ code: string;
+}
+
+export function ImportStatement({ code }: ImportStatementProps) {
+ const clipboard = useClipboard();
+ const mobile = useMediaQuery(`(max-width: ${em(500)})`);
+ return (
+
+
+ clipboard.copy(code)}>
+
+
+
+ );
+}
diff --git a/docs/components/MdxPageHeader/LinkItem/LinkItem.module.css b/docs/components/MdxPageHeader/LinkItem/LinkItem.module.css
new file mode 100644
index 00000000000..960b58de38f
--- /dev/null
+++ b/docs/components/MdxPageHeader/LinkItem/LinkItem.module.css
@@ -0,0 +1,29 @@
+.wrapper {
+ display: flex;
+ align-items: center;
+}
+
+.link {
+ display: flex;
+ align-items: center;
+ line-height: 1;
+
+ @mixin light {
+ color: var(--mantine-colors-gray-9);
+ }
+
+ @mixin dark {
+ color: var(--mantine-colors-dark-0);
+ }
+}
+
+.icon {
+ margin-right: rem(12px);
+ display: flex;
+ align-items: center;
+
+ @mixin rtl {
+ margin-left: rem(12px);
+ margin-right: 0;
+ }
+}
diff --git a/docs/components/MdxPageHeader/LinkItem/LinkItem.tsx b/docs/components/MdxPageHeader/LinkItem/LinkItem.tsx
new file mode 100644
index 00000000000..b58a421643a
--- /dev/null
+++ b/docs/components/MdxPageHeader/LinkItem/LinkItem.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import Link from 'next/link';
+import { Anchor } from '@mantine/core';
+import { HeaderItem } from '../HeaderItem/HeaderItem';
+import classes from './LinkItem.module.css';
+
+interface LinkItemProps {
+ label: React.ReactNode;
+ icon: React.ReactNode;
+ children: React.ReactNode;
+ link: string;
+}
+
+export function LinkItem({ label, icon, children, link }: LinkItemProps) {
+ return (
+
+
+
+ component={link.startsWith('/') ? Link : 'a'}
+ className={classes.link}
+ href={link}
+ fz="sm"
+ >
+ {icon}
+ {children}
+
+
+ );
+}
diff --git a/docs/components/MdxPageHeader/MdxPageHeader.module.css b/docs/components/MdxPageHeader/MdxPageHeader.module.css
new file mode 100644
index 00000000000..9a9400e5bf7
--- /dev/null
+++ b/docs/components/MdxPageHeader/MdxPageHeader.module.css
@@ -0,0 +1,73 @@
+.wrapper {
+ position: relative;
+ z-index: 4;
+ padding-left: calc(var(--mantine-spacing-xl) * 2);
+ padding-right: calc(var(--mantine-spacing-xl) * 2);
+
+ @mixin light {
+ background-color: var(--mantine-color-gray-0);
+ }
+
+ @mixin dark {
+ background-color: var(--mantine-color-dark-8);
+ }
+
+ @media (max-width: $docs-mdx-breakpoint) {
+ padding-left: var(--mantine-spacing-xl);
+ padding-right: var(--mantine-spacing-xl);
+ }
+}
+
+.header {
+ padding-top: var(--mantine-spacing-xl);
+ max-width: rem(1082px);
+ margin-left: auto;
+ margin-right: auto;
+ padding-bottom: calc(var(--mantine-spacing-xl) * 1.5);
+
+ &[data-with-tabs] {
+ padding-bottom: calc(var(--mantine-spacing-xl) * 1.5);
+ }
+
+ @media (max-width: $docs-mdx-breakpoint) {
+ max-width: 100%;
+ padding-bottom: var(--mantine-spacing-xl);
+ }
+}
+
+.title {
+ font-size: rem(44px);
+ margin-bottom: rem(5px);
+ font-weight: 900;
+ font-family: var(--docs-font-primary);
+
+ @media (max-width: $docs-mdx-breakpoint) {
+ font-size: rem(32px);
+ }
+
+ @mixin light {
+ color: var(--mantine-color-black);
+ }
+
+ @mixin dark {
+ color: var(--mantine-color-white);
+ }
+}
+
+.description {
+ max-width: rem(450px);
+ margin-bottom: var(--mantine-spacing-xl);
+ font-size: var(--mantine-font-size-lg);
+
+ @media (max-width: $docs-mdx-breakpoint) {
+ font-size: var(--mantine-font-size-md);
+ }
+
+ @mixin light {
+ color: var(--mantine-color-gray-6);
+ }
+
+ @mixin dark {
+ color: var(--mantine-color-dark-1);
+ }
+}
diff --git a/docs/components/MdxPageHeader/MdxPageHeader.tsx b/docs/components/MdxPageHeader/MdxPageHeader.tsx
new file mode 100644
index 00000000000..9630911be2f
--- /dev/null
+++ b/docs/components/MdxPageHeader/MdxPageHeader.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { Box, Title, Text, rem } from '@mantine/core';
+import { GithubIcon, NpmIcon } from '@mantine/ds';
+import { IconCalendar, IconLicense, IconPencil, IconSwitch2 } from '@tabler/icons-react';
+import { Frontmatter } from '@/types';
+import { LinkItem } from './LinkItem/LinkItem';
+import classes from './MdxPageHeader.module.css';
+import { ImportStatement } from './ImportStatement/ImportStatement';
+
+const REPO_BASE = 'https://github.com/rtivital/mantine/blob/master';
+const DOCS_BASE = `${REPO_BASE}/docs/pages`;
+const SOURCE_BASE = `${REPO_BASE}/src`;
+
+interface MdxPageHeaderProps {
+ meta: Frontmatter;
+}
+
+export function MdxPageHeader({ meta }: MdxPageHeaderProps) {
+ const withTabs = Array.isArray(meta.props);
+ const hasLinks = !!(meta.import || meta.source);
+ const withTitle = !!meta.title;
+
+ if (meta.hideHeader) {
+ return null;
+ }
+
+ if (!hasLinks && !withTabs && !meta.release && !withTitle) {
+ return null;
+ }
+
+ return (
+
+
+ {meta.title}
+ {meta.description}
+
+ {meta.import &&
+
+ );
+}
diff --git a/docs/components/MdxPageHeader/index.ts b/docs/components/MdxPageHeader/index.ts
new file mode 100644
index 00000000000..8a5290d50f9
--- /dev/null
+++ b/docs/components/MdxPageHeader/index.ts
@@ -0,0 +1 @@
+export { MdxPageHeader } from './MdxPageHeader';
diff --git a/docs/components/MdxProvider/MdxDataTable/MdxDataTable.tsx b/docs/components/MdxProvider/MdxDataTable/MdxDataTable.tsx
new file mode 100644
index 00000000000..07a95fc6c31
--- /dev/null
+++ b/docs/components/MdxProvider/MdxDataTable/MdxDataTable.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Table, rem } from '@mantine/core';
+import { DocsSection } from '@/components/DocsSection';
+
+interface DataTableProps {
+ data: React.ReactNode[][];
+ head?: string[];
+}
+
+function getTransformedScaledValue(value: unknown) {
+ if (typeof value !== 'string' || !value.includes('var(--mantine-scale)')) {
+ return value as string;
+ }
+
+ return value
+ .match(/^calc\((.*?)\)$/)?.[1]
+ .split('*')[0]
+ .trim();
+}
+
+export function MdxDataTable({ data, head }: DataTableProps) {
+ const rows = data.map((row, index) => {
+ const cells = row.map((cell, cellIndex) => (
+ {getTransformedScaledValue(cell)}
+ ));
+ return {cells} ;
+ });
+
+ const ths = Array.isArray(head)
+ ? head.map((cell, index) => {cell} )
+ : null;
+
+ return (
+
+
+
+
+ {ths && (
+
+ {ths}
+
+ )}
+ {rows}
+
+
+
+ );
+}
diff --git a/docs/components/MdxProvider/MdxInfo/MdxInfo.module.css b/docs/components/MdxProvider/MdxInfo/MdxInfo.module.css
new file mode 100644
index 00000000000..ebaf46a7a4d
--- /dev/null
+++ b/docs/components/MdxProvider/MdxInfo/MdxInfo.module.css
@@ -0,0 +1,62 @@
+.root {
+ margin-top: calc(var(--mantine-spacing-xl) * 1.5);
+ margin-bottom: var(--mantine-spacing-lg);
+
+ & > p {
+ line-height: 1.65;
+ font-size: rem(15px);
+ }
+
+ /* Considered to be a heading of the info */
+ & > p > strong:only-child {
+ font-family: var(--docs-font-primary);
+ font-size: var(--mantine-font-size-lg);
+
+ @mixin light {
+ color: var(--mantine-color-black);
+ }
+
+ @mixin dark {
+ color: var(--mantine-color-white);
+ }
+
+ & > code {
+ font-size: 80%;
+ }
+ }
+
+ & > p:first-of-type {
+ margin-top: 0;
+ }
+
+ & > p:last-of-type {
+ margin-bottom: 0;
+ }
+
+ & :global(.mantine-Code-root) {
+ @mixin light {
+ background-color: var(--docs-bq-code-bg-light);
+ }
+
+ @mixin dark {
+ background-color: var(--docs-bq-code-bg-dark);
+ }
+ }
+
+ & :global(.mantine-CodeHighlight-root) {
+ margin-top: var(--mantine-spacing-md);
+
+ @mixin light {
+ background-color: var(--mantine-color-white);
+ }
+
+ @mixin dark {
+ background-color: var(--mantine-color-dark-7);
+ }
+ }
+}
+
+.icon {
+ width: rem(28px);
+ height: rem(28px);
+}
diff --git a/docs/components/MdxProvider/MdxInfo/MdxInfo.tsx b/docs/components/MdxProvider/MdxInfo/MdxInfo.tsx
new file mode 100644
index 00000000000..7bb6ddc34f7
--- /dev/null
+++ b/docs/components/MdxProvider/MdxInfo/MdxInfo.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import cx from 'clsx';
+import { IconInfoCircle } from '@tabler/icons-react';
+import { Blockquote, BlockquoteProps, rgba, useMantineTheme } from '@mantine/core';
+import classes from './MdxInfo.module.css';
+
+export function MdxInfo({ className, ...others }: BlockquoteProps) {
+ const theme = useMantineTheme();
+ return (
+
+
+ {item.key}
+
+ {item.description}
+ {hasCondition && {item.condition ? {item.condition} : '–'} }
+
+ ));
+
+ return (
+
+
+
+
+
+ Key
+ Description
+ {hasCondition && Condition }
+
+
+ {rows}
+
+
+
((acc, item) => {
+ acc.push(...PACKAGES_DATA.find((i) => i.package === item)!.dependencies);
+ return acc;
+ }, []);
+
+ const unique = Array.from(
+ new Set(['@mantine/core', '@mantine/hooks', ...packages, ...extraPackages])
+ );
+ return unique.join(' ');
+}
+
+interface MdxPackagesInstallation {
+ extraPackages?: string[];
+}
+
+export function MdxPackagesInstallation({ extraPackages = [] }: MdxPackagesInstallation) {
+ const [selection, setSelection] = useState(['@mantine/core', '@mantine/hooks']);
+ const toggleSelection = (item: string) =>
+ setSelection((current) =>
+ current.includes(item) ? current.filter((i) => i !== item) : [...current, item]
+ );
+ const selectAll = () =>
+ setSelection((current) =>
+ current.length === PACKAGES_DATA.length ? [] : PACKAGES_DATA.map((item) => item.package)
+ );
+
+ const rows = PACKAGES_DATA.map((item) => (
+ toggleSelection(item.package)}
+ >
+
+ {}}
+ className={classes.checkbox}
+ />
+
+
+ {item.package}
+
+
+ {item.description}
+
+
+ ));
+
+ return (
+ <>
+ Choose packages that you will use in your application:
+
+
+
+
+ 0}
+ indeterminate={selection.length < PACKAGES_DATA.length && selection.length > 0}
+ />
+
+ Package
+ Description
+
+
+ {rows}
+
+
+ Install dependencies:
+
+ .*)/);
+ return matches && matches.groups && matches.groups.lang ? matches.groups.lang : 'tsx';
+}
+
+function getCode(children: any) {
+ return children.props.children;
+}
+
+export function MdxCodeHighlight({ className, ...others }: CodeHighlightProps) {
+ return
+ {children as any}
+
+ );
+}
diff --git a/docs/components/MdxProvider/MdxSharedContent/MdxComboboxData.tsx b/docs/components/MdxProvider/MdxSharedContent/MdxComboboxData.tsx
new file mode 100644
index 00000000000..62b7d4ba6a9
--- /dev/null
+++ b/docs/components/MdxProvider/MdxSharedContent/MdxComboboxData.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { MdxParagraph, MdxCode } from '../MdxTypography/MdxTypography';
+import { MdxCodeHighlight } from '../MdxPre/MdxPre';
+import { MdxTitle } from '../MdxTitle/MdxTitle';
+
+interface MdxComboboxDataProps {
+ component: string;
+}
+
+const getStringArrayCode = (component: string) => `
+import { ${component} } from '@mantine/core';
+function Demo() {
+ return <${component} data={['React', 'Angular']} />;
+}
+`;
+
+const getArrayCode = (component: string) => `
+import { ${component} } from '@mantine/core';
+
+function Demo() {
+ return (
+ <${component}
+ data={[
+ { value: 'react', label: 'React' },
+ { value: 'ng', label: 'Angular' },
+ ]}
+ />
+ );
+}
+`;
+
+const getStringGroupsCode = (component: string) => `
+import { ${component} } from '@mantine/core';
+
+function Demo() {
+ return (
+ <${component}
+ data={[
+ { group: 'Frontend', items: ['React', 'Angular'] },
+ { group: 'Backend', items: ['Express', 'Django'] },
+ ]}
+ />
+ );
+}
+`;
+
+const getGroupsCode = (component: string) => `
+import { ${component} } from '@mantine/core';
+
+function Demo() {
+ return (
+ <${component}
+ data={[
+ { group: 'Frontend', items: [{ value: 'react', label: 'React' }, { value: 'ng', label: 'Angular' }] },
+ { group: 'Backend', items: [{ value: 'express', label: 'Express' }, { value: 'django', label: 'Django' }] },
+ ]}
+ />
+ );
+}
+`;
+
+export function MdxComboboxData({ component }: MdxComboboxDataProps) {
+ return (
+ <>
+ Data formats
+
+ {component} data prop accepts data in one of the
+ following formats:
+
+
+ Array of strings:
+
+
+ Array of object with value , label and optional{' '}
+ disabled keys:
+
+ Array of groups with string options:
+ Array of groups with object options:
+ Made with Combobox
+
+ {component} 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 {component.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase()}{' '}
+ components on the examples page .
+
+
+ );
+}
diff --git a/docs/components/MdxProvider/MdxSharedContent/MdxComboboxFiltering.tsx b/docs/components/MdxProvider/MdxSharedContent/MdxComboboxFiltering.tsx
new file mode 100644
index 00000000000..d94f1a766eb
--- /dev/null
+++ b/docs/components/MdxProvider/MdxSharedContent/MdxComboboxFiltering.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { MdxParagraph, MdxCode, MdxLi, MdxUl } from '../MdxTypography/MdxTypography';
+import { MdxTitle } from '../MdxTitle/MdxTitle';
+
+interface MdxComboboxFilteringProps {
+ component: string;
+}
+
+const valueFormat = '{ value: string; label: string; disabled?: boolean }';
+
+export function MdxComboboxFiltering({ component }: MdxComboboxFilteringProps) {
+ return (
+ <>
+ Options filtering
+ By default, {component} filters options by checking if the option label
+ contains input value. You can change this behavior with filter prop.
+ filter function receives an object with the following properties as a
+ single argument:
+
+
+ options – array of options or options groups, all options are in{' '}
+ {valueFormat} format
+
+
+ search – current search query
+
+
+ limit – value of limit prop passed to{' '}
+ {component}
+
+
+
+ Example of a custom filter function that matches options by words instead of letters
+ sequence:
+
+
+ );
+}
diff --git a/docs/components/MdxProvider/MdxSharedContent/MdxComboboxLargeData.tsx b/docs/components/MdxProvider/MdxSharedContent/MdxComboboxLargeData.tsx
new file mode 100644
index 00000000000..cec0554d087
--- /dev/null
+++ b/docs/components/MdxProvider/MdxSharedContent/MdxComboboxLargeData.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { MdxParagraph, MdxCode } from '../MdxTypography/MdxTypography';
+import { MdxTitle } from '../MdxTitle/MdxTitle';
+
+interface MdxComboboxLargeDataProps {
+ component: string;
+}
+
+export function MdxComboboxLargeData({ component }: MdxComboboxLargeDataProps) {
+ return (
+ <>
+ Large data sets
+
+ The best strategy for large data sets is to limit the number of options that are rendered at
+ the same time. You can do it with limit prop. Note that if you use a
+ custom filter function, you need to implement your own logic to limit the
+ number of options in filter
+
+
+
+ Example of {component} with 100 000 options, 5 options are rendered at
+ the same time:
+
+
+ );
+}
diff --git a/docs/components/MdxProvider/MdxSharedContent/MdxComboboxProps.tsx b/docs/components/MdxProvider/MdxSharedContent/MdxComboboxProps.tsx
new file mode 100644
index 00000000000..87f4d213dbc
--- /dev/null
+++ b/docs/components/MdxProvider/MdxSharedContent/MdxComboboxProps.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { MdxParagraph, MdxCode } from '../MdxTypography/MdxTypography';
+import { MdxCodeHighlight } from '../MdxPre/MdxPre';
+import { MdxTitle } from '../MdxTitle/MdxTitle';
+import { MdxLink } from '../MdxLink/MdxLink';
+
+const getCode = (component: string) => `
+import { ${component} } from '@mantine/core';
+
+function Demo() {
+ return <${component} comboboxProps={{ withinPortal: false }} data={[]} />;
+}
+`;
+
+interface MdxComboboxPropsProps {
+ component: string;
+}
+
+export function MdxComboboxProps({ component }: MdxComboboxPropsProps) {
+ return (
+ <>
+ Combobox props
+
+ You can override Combobox props with{' '}
+ comboboxProps . It is useful when you need to change some of the props
+ that are not exposed by {component} , for example{' '}
+ withinPortal :
+
+
+ Browser support
+
+ {component} uses{' '}
+ flexbox gap to add spacing between
+ children. In older browsers, {component} children may not have spacing.
+ You can install PostCSS{' '}
+
+ flex-gap-polyfill
+ {' '}
+ to add support for older browsers.
+
+
+ );
+}
diff --git a/docs/components/MdxProvider/MdxSharedContent/MdxGetElementRef.tsx b/docs/components/MdxProvider/MdxSharedContent/MdxGetElementRef.tsx
new file mode 100644
index 00000000000..1f7faf25bc6
--- /dev/null
+++ b/docs/components/MdxProvider/MdxSharedContent/MdxGetElementRef.tsx
@@ -0,0 +1,40 @@
+/* eslint-disable react/no-unused-prop-types */
+import React from 'react';
+import { MdxTitle } from '../MdxTitle/MdxTitle';
+import { MdxCodeHighlight } from '../MdxPre/MdxPre';
+
+interface MdxGetElementRefProps {
+ component: string;
+ refType: string;
+ package?: string;
+}
+
+const commonRefs: Record = {
+ div: 'HTMLDivElement',
+ button: 'HTMLButtonElement',
+ input: 'HTMLInputElement',
+ textarea: 'HTMLTextAreaElement',
+ select: 'HTMLSelectElement',
+ a: 'HTMLAnchorElement',
+};
+
+function getRefCode(input: MdxGetElementRefProps) {
+ const refType = input.refType in commonRefs ? commonRefs[input.refType] : input.refType;
+ return `import { useRef } from 'react';
+import { ${input.component} } from '${input.package || '@mantine/core'}';
+
+function Demo() {
+ const ref = useRef<${refType}>(null);
+ return <${input.component} ref={ref} />;
+}
+ `;
+}
+
+export function MdxGetElementRef(props: MdxGetElementRefProps) {
+ return (
+ <>
+ Get element ref
+ 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 .
+
+ Gradient variant
+
+ When variant prop is set to gradient , you can control
+ gradient with gradient prop, it accepts an object with{' '}
+ from , to and deg properties. If the
+ gradient prop is not set, {component} will use{' '}
+ theme.defaultGradient which can be configured on the{' '}
+ theme object . gradient {' '}
+ prop is ignored when variant is not gradient .
+
+
+
+ Note that variant="gradient" supports only linear gradients
+ with two colors. If you need a more complex gradient, then use{' '}
+ Styles API to modify{' '}
+ {component} styles.
+
+
+ );
+}
diff --git a/docs/components/MdxProvider/MdxSharedContent/MdxInputAccessibility.tsx b/docs/components/MdxProvider/MdxSharedContent/MdxInputAccessibility.tsx
new file mode 100644
index 00000000000..2b55df15853
--- /dev/null
+++ b/docs/components/MdxProvider/MdxSharedContent/MdxInputAccessibility.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { MdxParagraph, MdxCode } from '../MdxTypography/MdxTypography';
+import { MdxCodeHighlight } from '../MdxPre/MdxPre';
+import { MdxTitle } from '../MdxTitle/MdxTitle';
+
+interface MdxInputAccessibilityProps {
+ component: string;
+ package?: string;
+}
+
+const getInaccessibleCode = (component: string, packageName: string) => `
+import { ${component} } from '${packageName}';
+
+// Inaccessible input – screen reader will not announce it properly
+function Demo() {
+ return <${component} />;
+}
+`;
+
+const getAriaLabelCode = (component: string, packageName: string) => `
+import { ${component} } from '${packageName}';
+
+// Accessible input – it has aria-label
+function Demo() {
+ return <${component} aria-label="My input" />;
+}
+`;
+
+const getLabelCode = (component: string, packageName: string) => `
+import { ${component} } from '${packageName}';
+
+// Accessible input – it has associated label element
+function Demo() {
+ return <${component} label="My input" />;
+}
+`;
+
+export function MdxInputAccessibility(props: MdxInputAccessibilityProps) {
+ const packageName = props.package || '@mantine/core';
+ return (
+ <>
+ Accessibility
+
+ If {props.component} is used without label prop, it
+ will not be announced properly by screen reader:
+
+
+ Set aria-label to make the input accessible. In this case label will not
+ be visible, but screen reader will announce it:
+
+
+ If label prop is set, input will be accessible it is not required to set{' '}
+ aria-label :
+
+
+ {component} component supports Input {' '}
+ and Input.Wrapper components features and all{' '}
+ {element} element props. {component} documentation does
+ not include all features supported by the component – see{' '}
+ Input documentation to learn about all available
+ features.
+
+ );
+}
diff --git a/docs/components/MdxProvider/MdxSharedContent/MdxPolymorphic.tsx b/docs/components/MdxProvider/MdxSharedContent/MdxPolymorphic.tsx
new file mode 100644
index 00000000000..52e44b3eea3
--- /dev/null
+++ b/docs/components/MdxProvider/MdxSharedContent/MdxPolymorphic.tsx
@@ -0,0 +1,98 @@
+/* eslint-disable react/no-unused-prop-types */
+import React from 'react';
+import { TypeScriptCircleIcon } from '@mantine/ds';
+import { MdxTitle } from '../MdxTitle/MdxTitle';
+import { MdxCodeHighlight } from '../MdxPre/MdxPre';
+import { MdxParagraph, MdxCode } from '../MdxTypography/MdxTypography';
+import { MdxLink } from '../MdxLink/MdxLink';
+import { MdxInfo } from '../MdxInfo/MdxInfo';
+
+interface MdxPolymorphicProps {
+ component: string;
+ defaultElement: string;
+ changeToElement: string;
+ withNext?: string;
+ package?: string;
+}
+
+function getElementCode(input: MdxPolymorphicProps) {
+ return `import { ${input.component} } from '${input.package || '@mantine/core'}';
+
+function Demo() {
+ return <${input.component} component="${input.changeToElement}" />;
+}
+ `;
+}
+
+function getNextLinkCode(input: MdxPolymorphicProps) {
+ return `import Link from 'next/link';
+import { ${input.component} } from '${input.package || '@mantine/core'}';
+
+function Demo() {
+ return <${input.component} component={Link} href="/" />;
+}`;
+}
+
+function getInterfaceCode(input: MdxPolymorphicProps) {
+ return `import type { ${input.component}Props, ElementProps } from '${
+ input.package || '@mantine/core'
+ }';
+
+interface My${input.component}Props extends ${input.component}Props,
+ ElementProps<'${input.changeToElement}', keyof ${input.component}Props> {}`;
+}
+
+export function MdxPolymorphic(props: MdxPolymorphicProps) {
+ return (
+ <>
+ Polymorphic component
+
+ {props.component} is a{' '}
+ polymorphic component – its default root
+ element is {props.defaultElement} , but it can be changed to any other
+ element or component with component prop:
+
+
+
+ You can also use components in component prop, for example, Next.js{' '}
+ Link :
+
+
+ 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,{' '}
+ {props.component}Props does not extend{' '}
+
+ React.ComponentPropsWithoutRef{"'<'"}div{"'>'"}
+ {' '}
+ although {props.defaultElement} 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:{' '}
+
+
+
+ If you want your component to remain polymorphic after wrapping, use{' '}
+ createPolymorphicComponent function described in{' '}
+ this guide .
+
+
+
+ );
+}
diff --git a/docs/components/MdxProvider/MdxSharedContent/MdxStylesApiSelectors.tsx b/docs/components/MdxProvider/MdxSharedContent/MdxStylesApiSelectors.tsx
new file mode 100644
index 00000000000..c7765b02b3b
--- /dev/null
+++ b/docs/components/MdxProvider/MdxSharedContent/MdxStylesApiSelectors.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { MdxParagraph, MdxCode } from '../MdxTypography/MdxTypography';
+import { MdxLink } from '../MdxLink/MdxLink';
+import { MdxTitle } from '../MdxTitle/MdxTitle';
+
+interface MdxStylesApiSelectorsProps {
+ component: string;
+}
+
+export function MdxStylesApiSelectors({ component }: MdxStylesApiSelectorsProps) {
+ return (
+ <>
+ Styles API
+
+ {component} supports{' '}
+ Styles API , you can add styles to any inner
+ element of the component with
+ classNames prop. Follow{' '}
+ Styles API documentation to learn more.
+
+
+ );
+}
diff --git a/docs/components/MdxProvider/MdxSharedContent/MdxTargetComponent.tsx b/docs/components/MdxProvider/MdxSharedContent/MdxTargetComponent.tsx
new file mode 100644
index 00000000000..0fc69b209e4
--- /dev/null
+++ b/docs/components/MdxProvider/MdxSharedContent/MdxTargetComponent.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import { MdxTitle } from '../MdxTitle/MdxTitle';
+import { MdxCode, MdxParagraph } from '../MdxTypography/MdxTypography';
+import { MdxCodeHighlight } from '../MdxPre/MdxPre';
+
+const getTargetCode = (component: string) => `import { ${component}, Button } from '@mantine/core';
+
+function Demo() {
+ return (
+ <>
+ <${component}.Target>
+ Native button – ok
+
+
+ {/* OK */}
+ <${component}.Target>
+ Mantine component – ok
+
+
+ {/* String, NOT OK – will throw error */}
+ <${component}.Target>Raw string
+
+ {/* Number, NOT OK – will throw error */}
+ <${component}.Target>{2}
+
+ {/* Fragment, NOT OK – will throw error */}
+ <${component}.Target>
+ <>Fragment, NOT OK, will throw error
+
+
+ {/* Multiple nodes, NOT OK – will throw error */}
+ <${component}.Target>
+ More that one node
+ NOT OK, will throw error
+
+
+ );
+}`;
+
+const getNoRefCode = (component: string) => `
+// Example of code that WILL NOT WORK
+import { ${component} } from '@mantine/core';
+
+function MyComponent() {
+ return My component
;
+}
+
+// This will not work – MyComponent does not support ref
+function Demo() {
+ return (
+ <${component}>
+ <${component}.Target>
+ >((props, ref) => (
+
+ My component
+
+));
+
+// Works correctly – ref is forwarded
+function Demo() {
+ return (
+ <${component}>
+ <${component}.Target>
+ {component}.Target children
+
+ {component}.Target requires an element or a component as a single child –
+ strings, fragments, numbers and multiple elements/components are not supported and{' '}
+ will throw error . Custom components must provide a prop to get root element ref, all
+ Mantine components support ref out of the box.
+
+
+ Required ref prop
+
+ Custom components that are rendered inside {component}.Target are required to support{' '}
+ ref prop:
+
+
+
+ Use forwardRef function to forward ref to root element:
+
+
+
+
+
+
+
+
+
+ {template.name}
+
+ {template.description}
+
+
+
+
+ );
+ });
+
+ return (
+
+ );
+}
diff --git a/docs/components/MdxProvider/MdxTemplatesList/data.ts b/docs/components/MdxProvider/MdxTemplatesList/data.ts
new file mode 100644
index 00000000000..96955104987
--- /dev/null
+++ b/docs/components/MdxProvider/MdxTemplatesList/data.ts
@@ -0,0 +1,85 @@
+export interface Template {
+ name: string;
+ link: string;
+ description: string;
+ type: 'next' | 'gatsby' | 'vite' | 'remix' | 'redwood';
+}
+
+export const TEMPLATES_DATA: Template[] = [
+ {
+ type: 'next',
+ name: 'next-app-template',
+ link: 'https://github.com/mantinedev/next-app-template',
+ description: 'Next.js template with app router and full setup: Jest, Storybook, ESLint',
+ },
+ {
+ type: 'next',
+ name: 'next-pages-template',
+ link: 'https://github.com/mantinedev/next-pages-template',
+ description: 'Next.js template with pages router and full setup: Jest, Storybook, ESLint',
+ },
+ {
+ type: 'next',
+ name: 'next-app-min-template',
+ link: 'https://github.com/mantinedev/next-app-min-template',
+ description:
+ 'Next.js template with app router and minimal setup – no additional tools included, only default Next.js configuration',
+ },
+ {
+ type: 'next',
+ name: 'next-pages-min-template',
+ link: 'https://github.com/mantinedev/next-pages-min-template',
+ description:
+ 'Next.js template with pages router and minimal setup – no additional tools included, only default Next.js configuration',
+ },
+ {
+ type: 'next',
+ name: 'next-vanilla-extract-template',
+ link: 'https://github.com/mantinedev/next-vanilla-extract-template',
+ description: 'Next.js template with Vanilla extract example',
+ },
+ {
+ type: 'vite',
+ name: 'vite-template',
+ link: 'https://github.com/mantinedev/vite-template',
+ description: 'Vite template with full setup: Jest, Storybook, ESLint',
+ },
+ {
+ type: 'vite',
+ name: 'vite-min-template',
+ link: 'https://github.com/mantinedev/vite-min-template',
+ description:
+ 'Vite template with minimal setup – no additional tools included, only default Vite configuration',
+ },
+ {
+ type: 'vite',
+ name: 'vite-vanilla-extract-template',
+ link: 'https://github.com/mantinedev/vite-vanilla-extract-template',
+ description: 'Vite template with Vanilla extract example',
+ },
+ {
+ type: 'remix',
+ name: 'remix-template',
+ link: 'https://github.com/mantinedev/remix-template',
+ description: 'Remix template with full setup: Jest, Storybook, ESLint',
+ },
+ {
+ type: 'remix',
+ name: 'remix-min-template',
+ link: 'https://github.com/mantinedev/remix-min-template',
+ description:
+ 'Remix template with minimal setup – no additional tools included, only default Remix configuration',
+ },
+ {
+ type: 'gatsby',
+ name: 'gatsby-template',
+ link: 'https://github.com/mantinedev/gatsby-template',
+ description: 'Gatsby template with basic setup',
+ },
+ {
+ type: 'redwood',
+ name: 'redwood-template',
+ link: 'https://github.com/mantinedev/redwood-template',
+ description: 'RedwoodJS template with basic setup',
+ },
+];
diff --git a/docs/components/MdxProvider/MdxTitle/MdxTitle.module.css b/docs/components/MdxProvider/MdxTitle/MdxTitle.module.css
new file mode 100644
index 00000000000..a990ec8362d
--- /dev/null
+++ b/docs/components/MdxProvider/MdxTitle/MdxTitle.module.css
@@ -0,0 +1,31 @@
+.title {
+ margin-top: calc(var(--mantine-spacing-xl) * 1.2);
+ margin-bottom: var(--mantine-spacing-md);
+ word-break: break-word;
+ font-family: var(--docs-font-primary);
+ font-weight: 700;
+
+ @mixin light {
+ color: var(--mantine-color-black);
+ }
+
+ @mixin dark {
+ color: var(--mantine-color-white);
+ }
+
+ &[data-h1] {
+ font-weight: 900;
+ font-size: rem(40px);
+ margin-top: 0;
+ }
+}
+
+.link {
+ text-decoration: none;
+ color: inherit;
+}
+
+.offset {
+ position: relative;
+ top: rem(-62px);
+}
diff --git a/docs/components/MdxProvider/MdxTitle/MdxTitle.tsx b/docs/components/MdxProvider/MdxTitle/MdxTitle.tsx
new file mode 100644
index 00000000000..780419fc711
--- /dev/null
+++ b/docs/components/MdxProvider/MdxTitle/MdxTitle.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import cx from 'clsx';
+import { Title, FOCUS_CLASS_NAMES } from '@mantine/core';
+import classes from './MdxTitle.module.css';
+
+export function MdxTitle({
+ id,
+ children,
+ order = 2,
+ ...others
+}: React.ComponentPropsWithoutRef) {
+ if (order === 1) {
+ return (
+
+ {children}
+
+ );
+ }
+
+ return (
+ <>
+
+
+ <a className={cx(classes.link, FOCUS_CLASS_NAMES.auto)} href={`#${id}`}>
+ {children}
+ </a>
+
+
+ );
+}
+
+export const h = (order: 1 | 2 | 3 | 4 | 5 | 6) => (props: any) => (
+
;
+}
+
+export function MdxUl({ className, ...others }: React.ComponentPropsWithoutRef<'ul'>) {
+ return ;
+}
+
+export function MdxLi({ className, ...others }: React.ComponentPropsWithoutRef<'li'>) {
+ return
+
+
+ );
+}
diff --git a/docs/components/MdxRawContent/index.ts b/docs/components/MdxRawContent/index.ts
new file mode 100644
index 00000000000..a22f873116b
--- /dev/null
+++ b/docs/components/MdxRawContent/index.ts
@@ -0,0 +1 @@
+export { MdxRawContent } from './MdxRawContent';
diff --git a/docs/components/MdxSiblings/MdxSiblings.module.css b/docs/components/MdxSiblings/MdxSiblings.module.css
new file mode 100644
index 00000000000..d5047b782c8
--- /dev/null
+++ b/docs/components/MdxSiblings/MdxSiblings.module.css
@@ -0,0 +1,84 @@
+.root {
+ display: flex;
+ align-items: center;
+ gap: var(--mantine-spacing-xl);
+ margin-top: rem(50px);
+
+ @media (max-width: em(700px)) {
+ flex-direction: column;
+ align-items: stretch;
+ gap: var(--mantine-spacing-md);
+ }
+}
+
+.link {
+ -webkit-tap-highlight-color: transparent;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ text-decoration: none;
+ padding: var(--mantine-spacing-md);
+ border-radius: var(--mantine-radius-md);
+
+ @mixin light {
+ color: var(--mantine-colors-black);
+ background-color: var(--mantine-color-white);
+ border: rem(1px) solid var(--mantine-color-gray-3);
+
+ @mixin hover {
+ background-color: var(--mantine-color-gray-0);
+ }
+ }
+
+ @mixin dark {
+ color: var(--mantine-colors-white);
+ background-color: var(--mantine-color-dark-6);
+ border: rem(1px) solid var(--mantine-color-dark-4);
+
+ @mixin hover {
+ background-color: var(--mantine-color-dark-5);
+ }
+ }
+}
+
+.body {
+ &[data-next] {
+ text-align: left;
+ margin-right: var(--mantine-spacing-md);
+
+ @mixin rtl {
+ margin-right: 0;
+ margin-left: var(--mantine-spacing-md);
+ text-align: right;
+ }
+ }
+
+ &[data-prev] {
+ text-align: right;
+ margin-left: var(--mantine-spacing-md);
+
+ @mixin rtl {
+ margin-left: 0;
+ margin-right: var(--mantine-spacing-md);
+ text-align: left;
+ }
+ }
+}
+
+.title {
+ font-size: var(--mantine-font-size-lg);
+}
+
+.description {
+ font-size: var(--mantine-font-size-sm);
+}
+
+.icon {
+ width: rem(25px);
+ height: rem(25px);
+
+ @mixin rtl {
+ transform: rotate(180deg);
+ }
+}
diff --git a/docs/components/MdxSiblings/MdxSiblings.tsx b/docs/components/MdxSiblings/MdxSiblings.tsx
new file mode 100644
index 00000000000..3a0f6f374a5
--- /dev/null
+++ b/docs/components/MdxSiblings/MdxSiblings.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import Link from 'next/link';
+import cx from 'clsx';
+import { IconArrowLeft, IconArrowRight } from '@tabler/icons-react';
+import { Text, Box, FOCUS_CLASS_NAMES } from '@mantine/core';
+import { getMdxSiblings } from './get-mdx-siblings';
+import classes from './MdxSiblings.module.css';
+import { Frontmatter } from '@/types';
+
+interface MdxSiblingsProps {
+ meta: Frontmatter;
+}
+
+export function MdxSiblings({ meta }: MdxSiblingsProps) {
+ const { next, prev } = getMdxSiblings(meta.slug);
+
+ if (meta.hideSiblings) {
+ return null;
+ }
+
+ return (
+
+ {prev && (
+
+ Previous
+
+ {prev.title}
+
+
+
+ )}
+
+ {next && (
+
+ Next
+
+ {next.title}
+
+
+
+ );
+}
diff --git a/docs/components/MdxSiblings/get-mdx-siblings.ts b/docs/components/MdxSiblings/get-mdx-siblings.ts
new file mode 100644
index 00000000000..dcf2b2bf049
--- /dev/null
+++ b/docs/components/MdxSiblings/get-mdx-siblings.ts
@@ -0,0 +1,13 @@
+import { Frontmatter } from '@/types';
+import { ALL_MDX_PAGES } from '@/mdx';
+
+export function getMdxSiblings(slug: string): {
+ prev: Frontmatter | undefined;
+ next: Frontmatter | undefined;
+} {
+ const index = ALL_MDX_PAGES.findIndex((page) => page.slug === slug);
+ const prev = ALL_MDX_PAGES[index - 1];
+ const next = ALL_MDX_PAGES[index + 1];
+
+ return { prev, next };
+}
diff --git a/docs/components/MdxSiblings/index.ts b/docs/components/MdxSiblings/index.ts
new file mode 100644
index 00000000000..e00ca862b59
--- /dev/null
+++ b/docs/components/MdxSiblings/index.ts
@@ -0,0 +1 @@
+export { MdxSiblings } from './MdxSiblings';
diff --git a/docs/components/MdxTabs/MdxTabs.module.css b/docs/components/MdxTabs/MdxTabs.module.css
new file mode 100644
index 00000000000..6402bc76632
--- /dev/null
+++ b/docs/components/MdxTabs/MdxTabs.module.css
@@ -0,0 +1,106 @@
+.tabsWrapper {
+ padding-left: calc(var(--mantine-spacing-xl) * 2);
+
+ @mixin light {
+ background-color: var(--mantine-color-gray-0);
+ border-bottom: rem(1px) solid var(--mantine-color-gray-2);
+ }
+
+ @mixin dark {
+ background-color: var(--mantine-color-dark-8);
+ border-bottom: rem(1px) solid var(--mantine-color-dark-6);
+ }
+
+ @media (max-width: $docs-mdx-breakpoint) {
+ padding-left: var(--mantine-spacing-xl);
+ }
+
+ @media (min-width: 86.25em) {
+ padding-left: 0;
+ }
+}
+
+.tabsList {
+ max-width: rem(1082px);
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: rem(-1px);
+
+ @media (max-width: $docs-mdx-breakpoint) {
+ max-width: 100%;
+ padding-right: 0;
+ }
+
+ &::before {
+ @mixin light {
+ border-color: var(--mantine-color-gray-2);
+ }
+
+ @mixin dark {
+ border-color: var(--mantine-color-dark-6);
+ }
+ }
+}
+
+.tab {
+ font-size: var(--mantine-font-size-md);
+ font-weight: 500;
+ height: rem(46px);
+ padding-left: var(--mantine-spacing-lg);
+ padding-right: var(--mantine-spacing-lg);
+ background-color: transparent;
+
+ @media (max-width: $docs-mdx-breakpoint) {
+ font-size: var(--mantine-font-size-sm);
+ padding-left: var(--mantine-spacing-md);
+ padding-right: var(--mantine-spacing-md);
+ }
+
+ &[data-active] {
+ background-color: var(--mantine-color-body);
+
+ @mixin light {
+ color: var(--mantine-color-black);
+ border-color: var(--mantine-color-gray-2);
+ border-bottom-color: transparent;
+ }
+
+ @mixin dark {
+ color: var(--mantine-color-white);
+ border-color: var(--mantine-color-dark-6);
+ border-bottom-color: transparent;
+ }
+ }
+}
+
+.tabContent {
+ padding-left: calc(var(--mantine-spacing-xl) * 2);
+ padding-right: calc(var(--mantine-spacing-xl) * 2);
+ padding-top: var(--mantine-spacing-xs);
+
+ @media (max-width: $docs-mdx-breakpoint) {
+ padding-left: var(--mantine-spacing-xl);
+ padding-right: var(--mantine-spacing-xl);
+ }
+}
+
+.main {
+ width: calc(100% - var(--docs-table-of-contents-width));
+ max-width: var(--docs-mdx-content-width);
+ margin-left: auto;
+ margin-right: auto;
+
+ @media (max-width: $docs-mdx-breakpoint) {
+ width: 100%;
+ padding-right: 0;
+ }
+}
+
+.tableOfContents {
+ flex: 0 0 var(--docs-table-of-contents-width);
+ margin-top: var(--mantine-spacing-xl);
+
+ @media (max-width: $docs-mdx-breakpoint) {
+ display: none;
+ }
+}
diff --git a/docs/components/MdxTabs/MdxTabs.tsx b/docs/components/MdxTabs/MdxTabs.tsx
new file mode 100644
index 00000000000..2d64af1677d
--- /dev/null
+++ b/docs/components/MdxTabs/MdxTabs.tsx
@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from 'react';
+import { Tabs, rem } from '@mantine/core';
+import { useRouter } from 'next/router';
+import { TableOfContents } from '@/components/TableOfContents';
+import { PageBase } from '@/components/PageBase';
+import { MdxSiblings } from '@/components/MdxSiblings';
+import { PropsTablesList } from '@/components/PropsTable';
+import { StylesApiTablesList } from '@/components/StylesApiTable';
+import { Frontmatter } from '@/types';
+import classes from './MdxTabs.module.css';
+
+interface MdxTabsProps {
+ children: React.ReactNode;
+ meta: Frontmatter;
+}
+
+export function MdxTabs({ children, meta }: MdxTabsProps) {
+ const router = useRouter();
+ const [activeTab, setActiveTab] = useState('docs');
+ const hasProps = Array.isArray(meta.props);
+ const hasStyles = Array.isArray(meta.styles);
+
+ useEffect(() => {
+ setActiveTab(window.location.search.replace('?t=', '') || 'docs');
+ }, []);
+
+ if (!hasProps && !hasStyles) {
+ return null;
+ }
+
+ return (
+
+ {
+ router.replace(value === 'docs' ? router.pathname : `${router.pathname}?t=${value}`);
+ setActiveTab(value!);
+ }}
+ >
+
+
+ Documentation
+ {hasProps && Props }
+ {hasStyles && Styles API }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/components/MdxTabs/index.ts b/docs/components/MdxTabs/index.ts
new file mode 100644
index 00000000000..5a87cdde268
--- /dev/null
+++ b/docs/components/MdxTabs/index.ts
@@ -0,0 +1 @@
+export { MdxTabs } from './MdxTabs';
diff --git a/docs/components/ModalsProviderDemo/ModalsProviderDemo.tsx b/docs/components/ModalsProviderDemo/ModalsProviderDemo.tsx
new file mode 100644
index 00000000000..9ea44e717a6
--- /dev/null
+++ b/docs/components/ModalsProviderDemo/ModalsProviderDemo.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Text, Button } from '@mantine/core';
+import { ModalsProvider, ContextModalProps } from '@mantine/modals';
+
+interface ModalsProviderDemoProps {
+ children: React.ReactNode;
+}
+
+const demonstrationModal = ({
+ context,
+ id,
+ innerProps,
+}: ContextModalProps<{ modalBody: string }>) => (
+ <>
+ {innerProps.modalBody}
+ context.closeModal(id)}>
+ Close modal
+
+
+);
+
+export function ModalsProviderDemo({ children }: ModalsProviderDemoProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/docs/components/ModalsProviderDemo/index.ts b/docs/components/ModalsProviderDemo/index.ts
new file mode 100644
index 00000000000..788a03e6060
--- /dev/null
+++ b/docs/components/ModalsProviderDemo/index.ts
@@ -0,0 +1 @@
+export { ModalsProviderDemo } from './ModalsProviderDemo';
diff --git a/docs/components/PageBase/PageBase.module.css b/docs/components/PageBase/PageBase.module.css
new file mode 100644
index 00000000000..c137150b923
--- /dev/null
+++ b/docs/components/PageBase/PageBase.module.css
@@ -0,0 +1,16 @@
+.content {
+ min-height: calc(100vh - rem(350px));
+ position: relative;
+ z-index: 1;
+ padding-bottom: rem(80px);
+
+ @mixin light {
+ background-color: var(--mantine-color-white);
+ box-shadow: var(--mantine-shadow-sm);
+ }
+
+ @mixin dark {
+ background-color: var(--mantine-color-dark-7);
+ box-shadow: none;
+ }
+}
diff --git a/docs/components/PageBase/PageBase.tsx b/docs/components/PageBase/PageBase.tsx
new file mode 100644
index 00000000000..044261b5ef8
--- /dev/null
+++ b/docs/components/PageBase/PageBase.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Footer } from '@/components/Footer';
+import classes from './PageBase.module.css';
+
+interface PageBaseProps {
+ children: React.ReactNode;
+}
+
+export function PageBase({ children }: PageBaseProps) {
+ return (
+ <>
+ {children}
+
+
+ );
+}
diff --git a/docs/components/PageBase/index.ts b/docs/components/PageBase/index.ts
new file mode 100644
index 00000000000..798daa67d9e
--- /dev/null
+++ b/docs/components/PageBase/index.ts
@@ -0,0 +1 @@
+export { PageBase } from './PageBase';
diff --git a/docs/components/PageContentContainer/PageContentContainer.module.css b/docs/components/PageContentContainer/PageContentContainer.module.css
new file mode 100644
index 00000000000..70501906a05
--- /dev/null
+++ b/docs/components/PageContentContainer/PageContentContainer.module.css
@@ -0,0 +1,17 @@
+.wrapper {
+ padding-left: calc(var(--mantine-spacing-xl) * 2);
+ padding-right: calc(var(--mantine-spacing-xl) * 2);
+ padding-top: var(--mantine-spacing-xl);
+
+ @media (max-width: $docs-mdx-breakpoint) {
+ padding-left: var(--mantine-spacing-xl);
+ padding-right: var(--mantine-spacing-xl);
+ }
+}
+
+.container {
+ width: 100%;
+ max-width: calc(var(--docs-mdx-content-width) + var(--docs-table-of-contents-width));
+ margin-left: auto;
+ margin-right: auto;
+}
diff --git a/docs/components/PageContentContainer/PageContentContainer.tsx b/docs/components/PageContentContainer/PageContentContainer.tsx
new file mode 100644
index 00000000000..4cdc61d929e
--- /dev/null
+++ b/docs/components/PageContentContainer/PageContentContainer.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import cx from 'clsx';
+import classes from './PageContentContainer.module.css';
+
+interface PageContentContainerProps extends React.ComponentPropsWithoutRef<'div'> {}
+
+export function PageContentContainer({
+ className,
+ children,
+ ...others
+}: PageContentContainerProps) {
+ return (
+
+ );
+}
diff --git a/docs/components/PageContentContainer/index.ts b/docs/components/PageContentContainer/index.ts
new file mode 100644
index 00000000000..132ef7feb66
--- /dev/null
+++ b/docs/components/PageContentContainer/index.ts
@@ -0,0 +1 @@
+export { PageContentContainer } from './PageContentContainer';
diff --git a/docs/components/PageHead/PageHead.tsx b/docs/components/PageHead/PageHead.tsx
new file mode 100644
index 00000000000..e1a8fe9fdb7
--- /dev/null
+++ b/docs/components/PageHead/PageHead.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import Head from 'next/head';
+
+interface PageHeadProps {
+ title: string | undefined;
+ description: string | undefined;
+}
+
+const metaDescription =
+ 'React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience';
+
+export function PageHead({ title, description }: PageHeadProps) {
+ const _title = title ? `${title} | Mantine` : 'Mantine';
+ const _description = description || metaDescription;
+ return (
+
+ {_title}
+ ;
+}
+
+const PROPS_DATA: Record = docgenData as any;
+
+interface PropsTableProps {
+ component: string;
+ query: string;
+}
+
+export function PropsTable({ component, query }: PropsTableProps) {
+ if (!PROPS_DATA[component]) {
+ return
+
+
+ {prop.name}
+
+
+ {prop.required && (
+
+ {' '}
+ *
+
+ )}
+
+
+
+ {prop.type.name}
+
+
+ {prop.description}
+
+
+ );
+ });
+
+ if (rows.length === 0) {
+ return (
+
+ Nothing found
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ Name
+ Type
+ Description
+
+
+ {rows}
+
+
+
+ );
+}
diff --git a/docs/components/PropsTable/PropsTablesList.module.css b/docs/components/PropsTable/PropsTablesList.module.css
new file mode 100644
index 00000000000..787821a2ce6
--- /dev/null
+++ b/docs/components/PropsTable/PropsTablesList.module.css
@@ -0,0 +1,35 @@
+.searchIcon {
+ width: rem(22px);
+ height: rem(22px);
+
+ @mixin light {
+ color: var(--mantine-color-gray-4);
+ }
+
+ @mixin dark {
+ color: var(--mantine-color-dark-3);
+ }
+}
+
+.title {
+ font-family: var(--docs-font-primary);
+ margin-bottom: var(--mantine-spacing-lg);
+
+ @mixin light {
+ color: var(--mantine-color-black);
+ }
+
+ @mixin dark {
+ color: var(--mantine-color-white);
+ }
+}
+
+.section {
+ & + & {
+ margin-top: rem(50px);
+ }
+}
+
+.search {
+ margin-bottom: var(--mantine-spacing-xl);
+}
diff --git a/docs/components/PropsTable/PropsTablesList.tsx b/docs/components/PropsTable/PropsTablesList.tsx
new file mode 100644
index 00000000000..bc7b5f2a34e
--- /dev/null
+++ b/docs/components/PropsTable/PropsTablesList.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { TextInput, Title } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
+import { PropsTable } from './PropsTable';
+import { getComponentName } from './getComponentName';
+import classes from './PropsTablesList.module.css';
+
+export interface PropsTablesListProps {
+ components: string[];
+ componentPrefix?: string;
+}
+
+export function PropsTablesList({ components, componentPrefix }: PropsTablesListProps) {
+ const [query, setQuery] = useState('');
+
+ const tables = components.map((component) => (
+
+
+ {getComponentName({ component, componentPrefix })} component props
+
+
+
+ setQuery(event.currentTarget.value)}
+ leftSection={
+ );
+}
diff --git a/docs/components/PropsTable/getComponentName.ts b/docs/components/PropsTable/getComponentName.ts
new file mode 100644
index 00000000000..900e240cb6d
--- /dev/null
+++ b/docs/components/PropsTable/getComponentName.ts
@@ -0,0 +1,12 @@
+interface GetComponentNameInput {
+ component: string;
+ componentPrefix: string | undefined;
+}
+
+export function getComponentName({ component, componentPrefix }: GetComponentNameInput) {
+ return componentPrefix
+ ? componentPrefix === component
+ ? component
+ : `${componentPrefix}.${component.replace(componentPrefix, '')}`
+ : component;
+}
diff --git a/docs/components/PropsTable/index.ts b/docs/components/PropsTable/index.ts
new file mode 100644
index 00000000000..1a7d9be99a5
--- /dev/null
+++ b/docs/components/PropsTable/index.ts
@@ -0,0 +1,3 @@
+export { PropsTable } from './PropsTable';
+export { PropsTablesList } from './PropsTablesList';
+export { getComponentName } from './getComponentName';
diff --git a/docs/components/Search/Search.tsx b/docs/components/Search/Search.tsx
new file mode 100644
index 00000000000..697d3f6ae42
--- /dev/null
+++ b/docs/components/Search/Search.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import { IconSearch } from '@tabler/icons-react';
+import { rem } from '@mantine/core';
+import { Spotlight, createSpotlight } from '@mantine/spotlight';
+import { ALL_MDX_PAGES } from '@/mdx';
+
+export const [searchStore, searchHandlers] = createSpotlight();
+
+export function Search() {
+ const router = useRouter();
+
+ const actions = ALL_MDX_PAGES.map((page) => ({
+ id: page.slug,
+ label: page.title,
+ description: page.search || page.description || page.date,
+ onClick: () => router.push(page.slug),
+ }));
+
+ return (
+ {item.v} {' '}
+
+ ({item.name})
+
+
+ ));
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/components/Shell/Navbar/Navbar.module.css b/docs/components/Shell/Navbar/Navbar.module.css
new file mode 100644
index 00000000000..c22dddf3655
--- /dev/null
+++ b/docs/components/Shell/Navbar/Navbar.module.css
@@ -0,0 +1,61 @@
+.navbar {
+ border-right: rem(1px) solid var(--navbar-border-color);
+ position: fixed;
+ top: var(--docs-header-height);
+ bottom: 0;
+ left: 0;
+ z-index: 100;
+ width: var(--docs-navbar-width);
+ display: flex;
+ flex-direction: column;
+
+ @mixin light {
+ --navbar-border-color: var(--mantine-color-gray-2);
+ background-color: var(--mantine-color-white);
+ }
+
+ @mixin dark {
+ --navbar-border-color: var(--mantine-color-dark-7);
+ background-color: var(--mantine-color-dark-8);
+ }
+
+ @mixin rtl {
+ border-left: rem(1px) solid var(--navbar-border-color);
+ border-right: 0;
+ left: unset;
+ right: 0;
+ }
+
+ &[data-hidden] {
+ @media (max-width: $docs-navbar-breakpoint) {
+ display: none !important;
+ }
+ }
+
+ &[data-mobile-only] {
+ display: none;
+
+ @media (max-width: $docs-navbar-breakpoint) {
+ display: flex;
+ }
+ }
+
+ @media (max-width: $docs-navbar-breakpoint) {
+ width: unset;
+ left: 0;
+ right: 0;
+ }
+}
+
+.scrollarea {
+ flex: 1;
+}
+
+.body {
+ padding-top: var(--mantine-spacing-md);
+ padding-bottom: rem(100px);
+}
+
+.groups {
+ padding-top: var(--mantine-spacing-xl);
+}
diff --git a/docs/components/Shell/Navbar/Navbar.tsx b/docs/components/Shell/Navbar/Navbar.tsx
new file mode 100644
index 00000000000..3d13d914d30
--- /dev/null
+++ b/docs/components/Shell/Navbar/Navbar.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+ IconBrandMantine,
+ IconCompass,
+ IconApi,
+ IconHeartHandshake,
+ IconPalette,
+} from '@tabler/icons-react';
+import { Box, ScrollArea, rem } from '@mantine/core';
+import { MDX_PAGES_GROUPS } from '@/mdx';
+import { NavbarMainLink } from './NavbarMainLink/NavbarMainLink';
+import { NavbarLinksGroup } from './NavbarLinksGroup/NavbarLinksGroup';
+import classes from './Navbar.module.css';
+
+interface NavbarProps {
+ navbarOpened: boolean;
+ mobileNavbarOnly: boolean | undefined;
+ onNavbarClose(): void;
+}
+
+export function Navbar({ navbarOpened, onNavbarClose, mobileNavbarOnly }: NavbarProps) {
+ const groups = MDX_PAGES_GROUPS.map((group) => (
+
+
+
+
}
+ href="/getting-started"
+ onNavbarClose={onNavbarClose}
+ >
+ Getting started
+
+
}
+ href="/about"
+ onNavbarClose={onNavbarClose}
+ >
+ About Mantine
+
+
}
+ href="/overview"
+ onNavbarClose={onNavbarClose}
+ >
+ API Overview
+
+
}
+ href="/contribute"
+ onNavbarClose={onNavbarClose}
+ >
+ Contribute
+
+
}
+ href="/colors-generator"
+ onNavbarClose={onNavbarClose}
+ >
+ Colors generator
+
+
}
+ href="https://ui.mantine.dev"
+ onNavbarClose={onNavbarClose}
+ >
+ Mantine UI
+
+
{groups}
+
+
+ );
+}
diff --git a/docs/components/Shell/Navbar/NavbarLinksGroup/NavbarLinksGroup.module.css b/docs/components/Shell/Navbar/NavbarLinksGroup/NavbarLinksGroup.module.css
new file mode 100644
index 00000000000..c0f969afbf5
--- /dev/null
+++ b/docs/components/Shell/Navbar/NavbarLinksGroup/NavbarLinksGroup.module.css
@@ -0,0 +1,196 @@
+.group {
+ margin-bottom: 0;
+ padding-left: var(--mantine-spacing-md);
+ padding-right: var(--mantine-spacing-md);
+
+ &[data-opened] {
+ margin-bottom: calc(var(--mantine-spacing-xl) * 1.2);
+ }
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ width: calc(100% + var(--mantine-spacing-md));
+ height: rem(32px);
+ cursor: pointer;
+
+ @mixin light {
+ color: var(--mantine-color-gray-7);
+ }
+
+ @mixin dark {
+ color: var(--mantine-color-white);
+ }
+}
+
+.chevron {
+ width: rem(15px);
+ height: rem(15px);
+ margin-right: var(--mantine-spacing-md);
+ transition: transform 150ms ease;
+
+ @mixin rtl {
+ margin-right: 0;
+ margin-left: var(--mantine-spacing-md);
+ }
+
+ &[data-collapsed] {
+ transform: rotate(-90deg);
+ }
+}
+
+.title {
+ user-select: none;
+ font-weight: 700;
+ font-family: var(--docs-font-primary);
+ line-height: 1;
+ padding-top: rem(4px);
+ letter-spacing: rem(0.5px);
+ word-spacing: rem(1px);
+ text-transform: uppercase;
+ font-size: var(--mantine-font-size-xs);
+}
+
+.category {
+ padding-top: rem(12px);
+}
+
+.categoryTitle {
+ position: relative;
+ padding-left: rem(23px);
+ margin-left: rem(7px);
+ margin-bottom: rem(5px);
+ border-left: rem(1px) solid;
+ height: rem(34px);
+ display: flex;
+ align-items: center;
+ font-size: var(--mantine-font-size-xs);
+ border-top-right-radius: var(--mantine-radius-sm);
+ border-bottom-right-radius: var(--mantine-radius-sm);
+ text-transform: capitalize;
+
+ @mixin light {
+ background-color: var(--mantine-color-gray-0);
+ border-color: var(--mantine-color-gray-3);
+ color: var(--mantine-color-gray-6);
+ }
+
+ @mixin dark {
+ background-color: var(--mantine-color-dark-7);
+ border-color: var(--mantine-color-dark-6);
+ color: var(--mantine-color-dark-2);
+ }
+
+ @mixin rtl {
+ padding-left: 0;
+ padding-right: rem(23px);
+ border-left: 0;
+ border-right: rem(1px) solid;
+ margin-left: 0;
+ margin-right: rem(7px);
+ border-radius: 0;
+ border-top-left-radius: var(--mantine-radius-sm);
+ border-bottom-left-radius: var(--mantine-radius-sm);
+
+ @mixin light {
+ border-color: var(--mantine-color-gray-3);
+ }
+
+ @mixin dark {
+ border-color: var(--mantine-color-dark-6);
+ }
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ bottom: rem(-5px);
+ left: rem(-1px);
+ height: rem(5px);
+ width: rem(1px);
+
+ @mixin light {
+ background-color: var(--mantine-color-gray-3);
+ }
+
+ @mixin dark {
+ background-color: var(--mantine-color-dark-6);
+ }
+
+ @mixin rtl {
+ left: unset;
+ right: rem(-1px);
+ }
+ }
+}
+
+.categoryIcon {
+ margin-right: var(--mantine-spacing-xs);
+ width: rem(14px);
+ height: rem(14px);
+
+ @mixin rtl {
+ margin-right: 0;
+ margin-left: var(--mantine-spacing-xs);
+ }
+}
+
+.link {
+ display: block;
+ border-left: rem(1px) solid;
+ padding-left: rem(23px);
+ padding-right: var(--mantine-spacing-md);
+ margin-left: rem(7px);
+ height: rem(34px);
+ line-height: rem(34px);
+ border-top-right-radius: var(--mantine-radius-sm);
+ border-bottom-right-radius: var(--mantine-radius-sm);
+ font-size: var(--mantine-font-size-sm);
+ user-select: none;
+
+ @mixin light {
+ border-color: var(--mantine-color-gray-3);
+ color: var(--mantine-color-gray-7);
+ }
+
+ @mixin dark {
+ border-color: var(--mantine-color-dark-6);
+ color: var(--mantine-color-dark-1);
+ }
+
+ @mixin rtl {
+ padding-left: var(--mantine-spacing-md);
+ padding-right: rem(23px);
+ border-left: 0;
+ border-right: rem(1px) solid;
+ margin-left: 0;
+ margin-right: rem(7px);
+ border-radius: 0;
+ border-top-left-radius: var(--mantine-radius-sm);
+ border-bottom-left-radius: var(--mantine-radius-sm);
+
+ @mixin light {
+ border-color: var(--mantine-color-gray-3);
+ }
+
+ @mixin dark {
+ border-color: var(--mantine-color-dark-6);
+ }
+ }
+
+ &[data-active] {
+ border-color: var(--mantine-color-blue-5) !important;
+ font-weight: 500;
+
+ @mixin light {
+ color: var(--mantine-color-blue-8);
+ background-color: var(--mantine-color-blue-0);
+ }
+
+ @mixin dark {
+ color: var(--mantine-color-blue-1);
+ background-color: rgba(24, 100, 171, 0.45);
+ }
+ }
+}
diff --git a/docs/components/Shell/Navbar/NavbarLinksGroup/NavbarLinksGroup.tsx b/docs/components/Shell/Navbar/NavbarLinksGroup/NavbarLinksGroup.tsx
new file mode 100644
index 00000000000..c0422556d68
--- /dev/null
+++ b/docs/components/Shell/Navbar/NavbarLinksGroup/NavbarLinksGroup.tsx
@@ -0,0 +1,127 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { IconChevronDown } from '@tabler/icons-react';
+import { UnstyledButton, Text, Box } from '@mantine/core';
+import { MdxPagesGroup, MdxPagesCategory, Frontmatter } from '@/types';
+import { CATEGORY_ICONS } from './category-icons';
+import classes from './NavbarLinksGroup.module.css';
+
+function hasCategory(page: Frontmatter | MdxPagesCategory): page is MdxPagesCategory {
+ return 'category' in page;
+}
+
+function hasActiveLink(data: MdxPagesGroup, pathname: string) {
+ return data.pages.some((page) => {
+ if (hasCategory(page)) {
+ return page.pages.some((nestedPage) => nestedPage.slug === pathname);
+ }
+
+ return page.slug === pathname;
+ });
+}
+
+interface NavbarLinkProps {
+ data: Frontmatter;
+ onNavbarClose(): void;
+ linkRef: React.ForwardedRef;
+}
+
+function NavbarLink({ data, onNavbarClose, linkRef }: NavbarLinkProps) {
+ const router = useRouter();
+ return (
+
+ {data.title}
+
+ );
+}
+
+interface NavbarLinksGroupProps {
+ data: MdxPagesGroup;
+ onNavbarClose(): void;
+}
+
+export function NavbarLinksGroup({ data, onNavbarClose }: NavbarLinksGroupProps) {
+ const router = useRouter();
+ const [opened, setOpened] = useState(hasActiveLink(data, router.pathname));
+ const itemRefs = useRef>({});
+
+ const scrollToLink = (pathname: string) => {
+ const element = itemRefs.current[pathname];
+
+ if (!element) {
+ return;
+ }
+
+ const height = typeof window !== 'undefined' ? window.innerHeight : 0;
+ const { top, bottom } = element.getBoundingClientRect();
+
+ if (top < 60 || bottom > height) {
+ element.scrollIntoView({ block: 'center' });
+ }
+ };
+
+ useEffect(() => {
+ if (hasActiveLink(data, router.pathname)) {
+ setOpened(true);
+ setTimeout(() => scrollToLink(router.pathname), 10);
+ }
+ }, [router.pathname]);
+
+ const pages = data.pages.map((page) => {
+ if (hasCategory(page)) {
+ const sorted = page.pages.sort((a, b) => a.title.localeCompare(b.title));
+ const nested = sorted.map((nestedPage) => (
+ {
+ itemRefs.current[nestedPage.slug] = node!;
+ }}
+ />
+ ));
+
+ const Icon = CATEGORY_ICONS[page.category];
+
+ return (
+
+
+
+
+ {nested}
+
+ );
+ }
+
+ return (
+ {
+ itemRefs.current[page.slug] = node!;
+ }}
+ />
+ );
+ });
+
+ return (
+
+ setOpened((o) => !o)}>
+ {data.group.replace('-', ' ')}
+
+ {opened && pages}
+
+ );
+}
diff --git a/docs/components/Shell/Navbar/NavbarLinksGroup/category-icons.ts b/docs/components/Shell/Navbar/NavbarLinksGroup/category-icons.ts
new file mode 100644
index 00000000000..0c4f8561b5d
--- /dev/null
+++ b/docs/components/Shell/Navbar/NavbarLinksGroup/category-icons.ts
@@ -0,0 +1,32 @@
+import {
+ IconRefresh,
+ IconBulb,
+ IconForms,
+ IconBox,
+ IconLayout2,
+ IconClick,
+ IconMenu2,
+ IconNotebook,
+ IconBoxMultiple,
+ IconLetterCase,
+ IconSpeakerphone,
+ IconComponents,
+ IconSelector,
+} from '@tabler/icons-react';
+
+export const CATEGORY_ICONS: Record = {
+ 'State management': IconBox,
+ 'UI and Dom': IconForms,
+ Utilities: IconBulb,
+ Lifecycle: IconRefresh,
+ 'Data display': IconNotebook,
+ overlays: IconBoxMultiple,
+ navigation: IconMenu2,
+ inputs: IconForms,
+ misc: IconComponents,
+ feedback: IconSpeakerphone,
+ typography: IconLetterCase,
+ layout: IconLayout2,
+ buttons: IconClick,
+ combobox: IconSelector,
+};
diff --git a/docs/components/Shell/Navbar/NavbarMainLink/NavbarMainLink.module.css b/docs/components/Shell/Navbar/NavbarMainLink/NavbarMainLink.module.css
new file mode 100644
index 00000000000..413d7736320
--- /dev/null
+++ b/docs/components/Shell/Navbar/NavbarMainLink/NavbarMainLink.module.css
@@ -0,0 +1,48 @@
+.link {
+ --offset: rem(6px);
+
+ height: rem(48px);
+ display: flex;
+ align-items: center;
+ padding-left: calc(var(--mantine-spacing-md) - var(--offset));
+ padding-right: calc(var(--mantine-spacing-md) - var(--offset));
+ margin-left: var(--offset);
+ margin-right: var(--offset);
+ border-radius: var(--mantine-radius-md);
+ color: var(--mantine-color-black);
+
+ @mixin dark {
+ color: var(--mantine-color-white);
+ }
+
+ &[data-active] {
+ background-color: var(--mantine-color-blue-light-hover);
+
+ & > .icon {
+ background: transparent;
+ }
+ }
+}
+
+.icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: rem(4px);
+ border-radius: var(--mantine-radius-md);
+ background-color: var(--mantine-color-blue-light-hover);
+ color: var(--mantine-color-blue-light-color);
+ width: rem(34px);
+ height: rem(34px);
+}
+
+.label {
+ font-size: var(--mantine-font-size-sm);
+ margin-left: var(--mantine-spacing-sm);
+ font-weight: 500;
+
+ @mixin rtl {
+ margin-left: 0;
+ margin-right: var(--mantine-spacing-sm);
+ }
+}
diff --git a/docs/components/Shell/Navbar/NavbarMainLink/NavbarMainLink.tsx b/docs/components/Shell/Navbar/NavbarMainLink/NavbarMainLink.tsx
new file mode 100644
index 00000000000..69620d337b7
--- /dev/null
+++ b/docs/components/Shell/Navbar/NavbarMainLink/NavbarMainLink.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import Link from 'next/link';
+import { UnstyledButton } from '@mantine/core';
+import { useRouter } from 'next/router';
+import classes from './NavbarMainLink.module.css';
+
+interface NavbarMainLinkProps extends React.ComponentPropsWithoutRef<'a'> {
+ external?: boolean;
+ children: React.ReactNode;
+ icon: React.ReactNode;
+ onNavbarClose(): void;
+}
+
+export function NavbarMainLink({
+ href,
+ external,
+ children,
+ icon,
+ onNavbarClose,
+}: NavbarMainLinkProps) {
+ const router = useRouter();
+ return (
+
+ component={external ? 'a' : Link}
+ href={href}
+ target={external ? '_blank' : undefined}
+ className={classes.link}
+ mod={{ active: router.pathname === href }}
+ onClick={onNavbarClose}
+ >
+ {icon}
+ {children}
+
+ );
+}
diff --git a/docs/components/Shell/Shell.module.css b/docs/components/Shell/Shell.module.css
new file mode 100644
index 00000000000..52e37507226
--- /dev/null
+++ b/docs/components/Shell/Shell.module.css
@@ -0,0 +1,25 @@
+.main {
+ padding-top: var(--docs-header-height);
+ padding-left: var(--docs-navbar-width);
+
+ @media (max-width: $docs-navbar-breakpoint) {
+ padding-left: 0;
+ }
+
+ @mixin rtl {
+ padding-left: 0;
+ padding-right: var(--docs-navbar-width);
+
+ @media (max-width: $docs-navbar-breakpoint) {
+ padding-right: 0;
+ }
+ }
+
+ @mixin light {
+ background-color: var(--mantine-color-white);
+ }
+
+ @mixin dark {
+ background-color: var(--mantine-color-dark-7);
+ }
+}
diff --git a/docs/components/Shell/Shell.tsx b/docs/components/Shell/Shell.tsx
new file mode 100644
index 00000000000..b303c07f8f0
--- /dev/null
+++ b/docs/components/Shell/Shell.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { useUncontrolled } from '@mantine/hooks';
+import { Header } from './Header/Header';
+import { Navbar } from './Navbar/Navbar';
+import classes from './Shell.module.css';
+
+interface ShellProps {
+ children: React.ReactNode;
+ withNavbar?: boolean;
+ navbarOpened?: boolean;
+ mobileNavbarOnly?: boolean;
+ onNavbarOpenedChange?(opened: boolean): void;
+}
+
+export function Shell({
+ children,
+ withNavbar = true,
+ mobileNavbarOnly = false,
+ navbarOpened,
+ onNavbarOpenedChange,
+}: ShellProps) {
+ const [opened, setNavbarOpened] = useUncontrolled({
+ value: navbarOpened,
+ defaultValue: false,
+ finalValue: false,
+ onChange: onNavbarOpenedChange,
+ });
+
+ const toggleNavbar = () => setNavbarOpened(!opened);
+ const closeNavbar = () => setNavbarOpened(false);
+
+ return (
+ <>
+
+ {withNavbar && (
+
+ {children}
+
+
+ );
+}
diff --git a/docs/components/Shell/index.ts b/docs/components/Shell/index.ts
new file mode 100644
index 00000000000..0a26c6f2bc9
--- /dev/null
+++ b/docs/components/Shell/index.ts
@@ -0,0 +1 @@
+export { Shell } from './Shell';
diff --git a/docs/components/SocialCards/SocialCards.module.css b/docs/components/SocialCards/SocialCards.module.css
new file mode 100644
index 00000000000..a89b0cbe1a6
--- /dev/null
+++ b/docs/components/SocialCards/SocialCards.module.css
@@ -0,0 +1,49 @@
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--mantine-spacing-lg);
+}
+
+.card {
+ flex: 1;
+ min-width: rem(300px);
+ display: flex;
+ color: var(--mantine-color-white);
+ border-radius: var(--mantine-radius-md);
+ padding: var(--mantine-spacing-md);
+ text-decoration: none;
+ transition: transform 200ms ease, box-shadow 200ms ease;
+
+ @mixin hover {
+ transform: scale(1.03);
+ box-shadow: var(--mantine-shadow-xl);
+ }
+}
+
+.discord {
+ background-color: light-dark(#5865f2, #4450da);
+}
+
+.twitter {
+ background-color: light-dark(#239de9, #228acb);
+}
+
+.github {
+ background-color: var(--mantine-color-dark-9);
+}
+
+.icon {
+ margin-right: var(--mantine-spacing-lg);
+ height: rem(30px);
+ width: rem(30px);
+ min-width: rem(30px);
+}
+
+.title {
+ font-weight: 500;
+}
+
+.description {
+ font-size: var(--mantine-font-size-xs);
+ margin-top: rem(5px);
+}
diff --git a/docs/components/SocialCards/SocialCards.tsx b/docs/components/SocialCards/SocialCards.tsx
new file mode 100644
index 00000000000..aedc0fcf249
--- /dev/null
+++ b/docs/components/SocialCards/SocialCards.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import cx from 'clsx';
+import { DiscordIcon, GithubIcon, TwitterIcon, meta } from '@mantine/ds';
+import classes from './SocialCards.module.css';
+
+interface CardBaseProps extends React.ComponentPropsWithoutRef<'a'> {
+ icon: 'discord' | 'twitter' | 'github';
+ title: string;
+ description: string;
+ href: string;
+}
+
+const icons: Record = {
+ discord:
+ {icons[icon]}
+
+
{title}
+
{description}
+
+ );
+}
+
+export function DiscordCard() {
+ return (
+
+ {discord &&
+ );
+}
diff --git a/docs/components/SocialCards/index.ts b/docs/components/SocialCards/index.ts
new file mode 100644
index 00000000000..39433c521e3
--- /dev/null
+++ b/docs/components/SocialCards/index.ts
@@ -0,0 +1 @@
+export { SocialCards, DiscordCard } from './SocialCards';
diff --git a/docs/components/StylePropsTable/StylePropsTable.tsx b/docs/components/StylePropsTable/StylePropsTable.tsx
new file mode 100644
index 00000000000..6c751a73246
--- /dev/null
+++ b/docs/components/StylePropsTable/StylePropsTable.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { STYlE_PROPS_DATA, Code, Breadcrumbs } from '@mantine/core';
+import { MdxDataTable } from '@/components/MdxProvider';
+
+const THEME_KEYS: Record = {
+ color: 'theme.colors',
+ fontSize: 'theme.fontSizes',
+ spacing: 'theme.spacing',
+ lineHeight: 'theme.lineHeights',
+};
+
+export function StylePropsTable({ source = STYlE_PROPS_DATA }: { source: any }) {
+ const data = Object.keys(source).map((propName) => {
+ const propData = source[propName];
+ const themeKey = THEME_KEYS[propData.type];
+ return [
+ {propName},
+
+ {Array.isArray(propData.property) ? (
+ propData.property.map((prop: any) => {prop})
+ ) : (
+ {propData.property}
+ )}
+ ,
+ themeKey ? {themeKey} : '–',
+ ];
+ });
+
+ return
+
+ {Array.isArray(modifier.selector) ? modifier.selector.join(', ') : modifier.selector}
+
+
+ {modifier.modifier}
+
+ {hasConditions && (
+
+ {modifier.condition || '–'}
+
+ )}
+ {hasValues && (
+
+ {modifier.value || '–'}
+
+ )}
+
+ )) || [];
+
+ return (
+
+
+
+
+ Selector
+ Attribute
+ {hasConditions && Condition }
+ {hasValues && Value }
+
+
+ {rows}
+
+
+ );
+}
diff --git a/docs/components/StylesApiTable/SelectorsTable.tsx b/docs/components/StylesApiTable/SelectorsTable.tsx
new file mode 100644
index 00000000000..38007d607b6
--- /dev/null
+++ b/docs/components/StylesApiTable/SelectorsTable.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Table, TableProps } from '@mantine/core';
+import { HtmlText } from '@/components/HtmlText';
+import { TableInlineCode } from '@/components/TableInlineCode';
+import type { StylesApiData } from './StylesApiTable';
+
+interface SelectorsTableProps extends TableProps {
+ data: StylesApiData;
+ component: string;
+}
+
+export function SelectorsTable({ data, component, ...others }: SelectorsTableProps) {
+ const rows = Object.keys(data.selectors).map((selector) => (
+
+ {selector}
+
+
+ .mantine-{component}-{selector}
+
+
+
+ {data.selectors[selector]}
+
+
+ ));
+
+ return (
+
+
+
+
+ Selector
+ Static selector
+ Description
+
+
+ {rows}
+
+
+ );
+}
diff --git a/docs/components/StylesApiTable/StylesApiTable.module.css b/docs/components/StylesApiTable/StylesApiTable.module.css
new file mode 100644
index 00000000000..8d14d6c565c
--- /dev/null
+++ b/docs/components/StylesApiTable/StylesApiTable.module.css
@@ -0,0 +1,32 @@
+.groupsHeader {
+ margin-bottom: rem(30px);
+}
+
+.group {
+ --_group-spacing: rem(40px);
+
+ & + & {
+ margin-top: var(--_group-spacing);
+ padding-top: var(--_group-spacing);
+ border-top: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-3));
+ }
+}
+
+.title {
+ font-family: var(--docs-font-primary);
+ margin-bottom: var(--mantine-spacing-sm);
+
+ @mixin light {
+ color: var(--mantine-color-black);
+ }
+
+ @mixin dark {
+ color: var(--mantine-color-white);
+ }
+}
+
+.section {
+ & + & {
+ margin-top: rem(40px);
+ }
+}
diff --git a/docs/components/StylesApiTable/StylesApiTable.tsx b/docs/components/StylesApiTable/StylesApiTable.tsx
new file mode 100644
index 00000000000..f5259d44c5e
--- /dev/null
+++ b/docs/components/StylesApiTable/StylesApiTable.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { rem, Title } from '@mantine/core';
+import * as stylesData from '@mantine/styles-api';
+import type { Modifier } from '@mantine/styles-api';
+import { TableError } from '@/components/TableError';
+import { getComponentName } from '@/components/PropsTable';
+import { SelectorsTable } from './SelectorsTable';
+import { VariablesTable } from './VariablesTable';
+import { ModifiersTable } from './ModifiersTable';
+import classes from './StylesApiTable.module.css';
+
+export interface StylesApiData {
+ selectors: Record;
+ vars: Record>;
+ modifiers: Modifier[];
+}
+
+const STYLES_API_DATA: Record = stylesData as any;
+
+export interface StylesApiTableProps {
+ component: string;
+ componentPrefix: string | undefined;
+}
+
+export function StylesApiTable({ component, componentPrefix }: StylesApiTableProps) {
+ const data = STYLES_API_DATA[`${component}StylesApi`];
+ if (!data) {
+ return
+
+
+
+ {componentName} selectors
+
+
+
+ {Object.keys(data.vars).length > 0 && (
+
+
+ {componentName} CSS variables
+
+
+ )}
+
+ {Array.isArray(data.modifiers) && data.modifiers.length > 0 && (
+
+
+ {componentName} data attributes
+
+
+ )}
+
+
+
+ ));
+
+ return (
+ <>
+
+ Styles API
+
+ {components[0]} component supports{' '}
+ Styles API . With Styles API, you can
+ customize styles of any inner element. Follow{' '}
+ the documentation to learn how to use CSS
+ modules, CSS variables and inline styles to get full control over component styles.
+
+
+ {tables}
+
+ );
+}
diff --git a/docs/components/StylesApiTable/VariablesTable.tsx b/docs/components/StylesApiTable/VariablesTable.tsx
new file mode 100644
index 00000000000..d6dde7ef17c
--- /dev/null
+++ b/docs/components/StylesApiTable/VariablesTable.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Table, TableProps } from '@mantine/core';
+import { HtmlText } from '@/components/HtmlText';
+import { TableInlineCode } from '@/components/TableInlineCode';
+import type { StylesApiData } from './StylesApiTable';
+
+interface VariablesTableProps extends TableProps {
+ data: StylesApiData;
+}
+
+export function VariablesTable({ data, ...others }: VariablesTableProps) {
+ const rows = Object.keys(data.vars).reduce((acc, selector) => {
+ Object.keys(data.vars[selector]).forEach((variable, index) => {
+ acc.push(
+
+ {index === 0 && (
+ {selector}
+ )}
+
+ {variable}
+
+
+ {data.vars[selector][variable]}
+
+
+ );
+ });
+
+ return acc;
+ }, []);
+
+ return (
+
+
+
+
+ Selector
+ Variable
+ Description
+
+
+ {rows}
+
+
+ );
+}
diff --git a/docs/components/StylesApiTable/index.ts b/docs/components/StylesApiTable/index.ts
new file mode 100644
index 00000000000..ac5fc88db6a
--- /dev/null
+++ b/docs/components/StylesApiTable/index.ts
@@ -0,0 +1,5 @@
+export { StylesApiTable } from './StylesApiTable';
+export { StylesApiTablesList } from './StylesApiTablesList';
+export { ModifiersTable } from './ModifiersTable';
+export { SelectorsTable } from './SelectorsTable';
+export { VariablesTable } from './VariablesTable';
diff --git a/docs/components/TableError/TableError.tsx b/docs/components/TableError/TableError.tsx
new file mode 100644
index 00000000000..c1c42efc890
--- /dev/null
+++ b/docs/components/TableError/TableError.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text, Anchor } from '@mantine/core';
+
+interface TableErrorProps {
+ errorOf: string;
+}
+
+export function TableError({ errorOf }: TableErrorProps) {
+ return (
+
+
+ Error loading component {errorOf} data.{' '}
+
+ If you see this message please let us know by{' '}
+
+ opening an issue on GitHub
+
+ .
+
+ );
+}
diff --git a/docs/components/TableError/index.ts b/docs/components/TableError/index.ts
new file mode 100644
index 00000000000..41cdd64171d
--- /dev/null
+++ b/docs/components/TableError/index.ts
@@ -0,0 +1 @@
+export { TableError } from './TableError';
diff --git a/docs/components/TableInlineCode/TableInlineCode.module.css b/docs/components/TableInlineCode/TableInlineCode.module.css
new file mode 100644
index 00000000000..e8dac477410
--- /dev/null
+++ b/docs/components/TableInlineCode/TableInlineCode.module.css
@@ -0,0 +1,12 @@
+.code {
+ font-family: var(--mantine-font-family-monospace);
+ font-size: var(--mantine-font-size-xs);
+
+ @mixin light {
+ color: var(--mantine-color-indigo-filled);
+ }
+
+ @mixin dark {
+ color: var(--mantine-color-red-filled);
+ }
+}
diff --git a/docs/components/TableInlineCode/TableInlineCode.tsx b/docs/components/TableInlineCode/TableInlineCode.tsx
new file mode 100644
index 00000000000..8dca25e005c
--- /dev/null
+++ b/docs/components/TableInlineCode/TableInlineCode.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import cx from 'clsx';
+import { Text, TextProps, ElementProps } from '@mantine/core';
+import classes from './TableInlineCode.module.css';
+
+interface TableInlineCodeProps extends TextProps, ElementProps<'span', 'color'> {}
+
+export function TableInlineCode({ className, ...others }: TableInlineCodeProps) {
+ return ([]);
+ const headingsRef = useRef([]);
+ const router = useRouter();
+
+ const filteredHeadings = headings.filter((heading) => heading.depth > 1);
+
+ const handleScroll = () => {
+ setActive(
+ getActiveElement(headingsRef.current.map((d) => d.getNode().getBoundingClientRect()))
+ );
+ };
+
+ useEffect(() => {
+ const _headings = getHeadings();
+ headingsRef.current = _headings;
+ setHeadings(_headings);
+ setActive(getActiveElement(_headings.map((d) => d.getNode().getBoundingClientRect())));
+ window.addEventListener('scroll', handleScroll);
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, []);
+
+ if (filteredHeadings.length === 0) {
+ return null;
+ }
+
+ const items = filteredHeadings.map((heading, index) => (
+
+ key={heading.id}
+ component="a"
+ fz="sm"
+ className={classes.link}
+ mod={{ active: active === index }}
+ href={`#${heading.id}`}
+ __vars={{ '--toc-link-offset': `${heading.depth - 1}` }}
+ onClick={(event) => {
+ event.preventDefault();
+ router.replace(`${router.pathname}#${heading.id}`);
+ }}
+ >
+ {heading.content}
+
+ ));
+
+ return (
+
+
+
+
+ Table of contents
+
+
+ {items}
+
+
+
+ );
+}
diff --git a/docs/components/TableOfContents/get-headings.ts b/docs/components/TableOfContents/get-headings.ts
new file mode 100644
index 00000000000..27e07465767
--- /dev/null
+++ b/docs/components/TableOfContents/get-headings.ts
@@ -0,0 +1,34 @@
+export interface Heading {
+ depth: number;
+ content: string;
+ id: string;
+ getNode: () => HTMLHeadingElement;
+}
+
+function getHeadingsData(headings: HTMLHeadingElement[]): Heading[] {
+ const result: Heading[] = [];
+
+ for (let i = 0; i < headings.length; i += 1) {
+ const heading = headings[i];
+ if (heading.id) {
+ result.push({
+ depth: parseInt(heading.getAttribute('data-order')!, 10),
+ content: heading.getAttribute('data-heading') || '',
+ id: heading.id,
+ getNode: () => document.getElementById(heading.id) as HTMLHeadingElement,
+ });
+ }
+ }
+
+ return result;
+}
+
+export function getHeadings(): Heading[] {
+ const root = document.getElementById('mdx');
+
+ if (!root) {
+ return [];
+ }
+
+ return getHeadingsData(Array.from(root.querySelectorAll('[data-heading]')));
+}
diff --git a/docs/components/TableOfContents/index.ts b/docs/components/TableOfContents/index.ts
new file mode 100644
index 00000000000..ffe4593ca76
--- /dev/null
+++ b/docs/components/TableOfContents/index.ts
@@ -0,0 +1 @@
+export { TableOfContents } from './TableOfContents';
diff --git a/docs/components/ThemeColors/ColorsGroup/ColorsGroup.module.css b/docs/components/ThemeColors/ColorsGroup/ColorsGroup.module.css
new file mode 100644
index 00000000000..aaf688ba136
--- /dev/null
+++ b/docs/components/ThemeColors/ColorsGroup/ColorsGroup.module.css
@@ -0,0 +1,47 @@
+$theme-colors-breakpoint: em(820px);
+
+.wrapper {
+ & + & {
+ margin-top: var(--mantine-spacing-xl);
+ }
+}
+
+.color {
+ display: flex;
+ flex-direction: column;
+ flex: 0 0 calc(10% - rem(7px));
+
+ @media (max-width: $theme-colors-breakpoint) {
+ flex: 0 0 calc(20% - rem(7px));
+ }
+}
+
+.swatch {
+ width: 100%;
+ height: 0;
+ padding-bottom: 100%;
+}
+
+.title {
+ text-transform: capitalize;
+ margin-bottom: var(--mantine-spacing-xs);
+}
+
+.group {
+ display: flex;
+ gap: rem(7px);
+
+ @media (max-width: $theme-colors-breakpoint) {
+ flex-wrap: wrap;
+ }
+}
+
+.colorName {
+ @mixin light {
+ color: var(--mantine-color-black);
+ }
+
+ @mixin dark {
+ color: var(--mantine-color-white);
+ }
+}
diff --git a/docs/components/ThemeColors/ColorsGroup/ColorsGroup.tsx b/docs/components/ThemeColors/ColorsGroup/ColorsGroup.tsx
new file mode 100644
index 00000000000..9e5d425a05a
--- /dev/null
+++ b/docs/components/ThemeColors/ColorsGroup/ColorsGroup.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { useMantineTheme, Text, ColorSwatch, Box } from '@mantine/core';
+import classes from './ColorsGroup.module.css';
+
+interface ColorsGroupProps {
+ group: string;
+}
+
+export function ColorsGroup({ group }: ColorsGroupProps) {
+ const theme = useMantineTheme();
+
+ const colors = theme.colors[group].map((color, index) => (
+
+
+
+ {group} {index}
+
+
+ {color}
+
+
+
+ ));
+
+ return (
+
+ );
+}
diff --git a/docs/components/ThemeColors/ThemeColors.module.css b/docs/components/ThemeColors/ThemeColors.module.css
new file mode 100644
index 00000000000..7c7734c5b78
--- /dev/null
+++ b/docs/components/ThemeColors/ThemeColors.module.css
@@ -0,0 +1,4 @@
+.root {
+ margin-top: var(--mantine-spacing-xl);
+ margin-bottom: var(--mantine-spacing-xl);
+}
diff --git a/docs/components/ThemeColors/ThemeColors.tsx b/docs/components/ThemeColors/ThemeColors.tsx
new file mode 100644
index 00000000000..5ebd17946cc
--- /dev/null
+++ b/docs/components/ThemeColors/ThemeColors.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { DEFAULT_THEME } from '@mantine/core';
+import { ColorsGroup } from './ColorsGroup/ColorsGroup';
+import classes from './ThemeColors.module.css';
+
+export function ThemeColors() {
+ const groups = Object.keys(DEFAULT_THEME.colors).map((group) => (
+ {groups}
;
+}
diff --git a/docs/components/ThemeColors/index.ts b/docs/components/ThemeColors/index.ts
new file mode 100644
index 00000000000..d18a6137b83
--- /dev/null
+++ b/docs/components/ThemeColors/index.ts
@@ -0,0 +1,2 @@
+export { ColorsGroup } from './ColorsGroup/ColorsGroup';
+export { ThemeColors } from './ThemeColors';
diff --git a/docs/components/icons/GatsbyIcon.tsx b/docs/components/icons/GatsbyIcon.tsx
new file mode 100644
index 00000000000..319e3dddc18
--- /dev/null
+++ b/docs/components/icons/GatsbyIcon.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Box, rem } from '@mantine/core';
+import { IconProps } from './types';
+import classes from './icons.module.css';
+
+export function GatsbyIcon({ size = 28, ...others }: IconProps) {
+ return (
+
+
+ );
+}
diff --git a/docs/src/components/FrameworksControls/icons/NextIcon.tsx b/docs/components/icons/NextIcon.tsx
similarity index 78%
rename from docs/src/components/FrameworksControls/icons/NextIcon.tsx
rename to docs/components/icons/NextIcon.tsx
index d9ee571dac6..fdd7be6355b 100644
--- a/docs/src/components/FrameworksControls/icons/NextIcon.tsx
+++ b/docs/components/icons/NextIcon.tsx
@@ -1,19 +1,24 @@
import React from 'react';
-import { useMantineTheme, rem } from '@mantine/core';
+import { Box, rem } from '@mantine/core';
+import { IconProps } from './types';
+import classes from './icons.module.css';
-export function NextIcon() {
- const theme = useMantineTheme();
+export function NextIcon({ size = 40, ...others }: IconProps) {
return (
-
+
);
}
diff --git a/docs/components/icons/RedwoodIcon.tsx b/docs/components/icons/RedwoodIcon.tsx
new file mode 100644
index 00000000000..c5e31c2414c
--- /dev/null
+++ b/docs/components/icons/RedwoodIcon.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Box, rem } from '@mantine/core';
+import { IconProps } from './types';
+import classes from './icons.module.css';
+
+export function RedwoodIcon({ size = 28, ...others }: IconProps) {
+ return (
+
+
+ );
+}
diff --git a/docs/components/icons/RemixIcon.tsx b/docs/components/icons/RemixIcon.tsx
new file mode 100644
index 00000000000..a8dbb9999a6
--- /dev/null
+++ b/docs/components/icons/RemixIcon.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Box, rem } from '@mantine/core';
+import { IconProps } from './types';
+import classes from './icons.module.css';
+
+export function RemixIcon({ size = 40, ...others }: IconProps) {
+ return (
+
+
+ );
+}
diff --git a/docs/components/icons/ViteIcon.tsx b/docs/components/icons/ViteIcon.tsx
new file mode 100644
index 00000000000..9b6c3188180
--- /dev/null
+++ b/docs/components/icons/ViteIcon.tsx
@@ -0,0 +1,42 @@
+import React, { useId } from 'react';
+import { Box, rem } from '@mantine/core';
+import { IconProps } from './types';
+import classes from './icons.module.css';
+
+export function ViteIcon({ size = 28, ...others }: IconProps) {
+ const id = useId();
+ const idA = `vite-a-${id}`;
+ const idB = `vite-b-${id}`;
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/components/icons/icons.module.css b/docs/components/icons/icons.module.css
new file mode 100644
index 00000000000..cc365396ebd
--- /dev/null
+++ b/docs/components/icons/icons.module.css
@@ -0,0 +1,9 @@
+.nextIcon {
+ color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+ width: var(--icon-size);
+}
+
+.icon {
+ width: var(--icon-size);
+ height: var(--icon-size);
+}
diff --git a/docs/components/icons/index.ts b/docs/components/icons/index.ts
new file mode 100644
index 00000000000..7463713d269
--- /dev/null
+++ b/docs/components/icons/index.ts
@@ -0,0 +1,16 @@
+import { NextIcon } from './NextIcon';
+import { ViteIcon } from './ViteIcon';
+import { GatsbyIcon } from './GatsbyIcon';
+import { RemixIcon } from './RemixIcon';
+import { RedwoodIcon } from './RedwoodIcon';
+import type { Template } from '../MdxProvider/MdxTemplatesList/data';
+
+export const frameworkIcons: Record = {
+ next: NextIcon,
+ vite: ViteIcon,
+ gatsby: GatsbyIcon,
+ redwood: RedwoodIcon,
+ remix: RemixIcon,
+};
+
+export { NextIcon, ViteIcon, GatsbyIcon, RemixIcon, RedwoodIcon };
diff --git a/docs/components/icons/types.ts b/docs/components/icons/types.ts
new file mode 100644
index 00000000000..5a885f66319
--- /dev/null
+++ b/docs/components/icons/types.ts
@@ -0,0 +1,5 @@
+import { ElementProps } from '@mantine/core';
+
+export interface IconProps extends ElementProps<'svg', 'display'> {
+ size?: number;
+}
diff --git a/docs/dropzone-demos/Dropzone.demo.disabled.tsx b/docs/dropzone-demos/Dropzone.demo.disabled.tsx
new file mode 100644
index 00000000000..28d44554279
--- /dev/null
+++ b/docs/dropzone-demos/Dropzone.demo.disabled.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { MantineDemo } from '@mantine/ds';
+import { BaseDemo } from './_base';
+import classes from './Dropzone.disabled.module.css';
+
+const cssCode = `
+.disabled {
+ background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+ border-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+ cursor: not-allowed;
+
+ & * {
+ color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+ }
+}
+`;
+
+const code = `
+import { Dropzone } from '@mantine/dropzone';
+import classes from './Demo.module.css';
+
+function Demo() {
+ return {}}
+ activateOnClick={false}
+ styles={{ inner: { pointerEvents: 'all' } }}
+ >
+
+ openRef.current?.()}>Select files
+
+
+ );
+}
+`;
+
+function Demo() {
+ const openRef = useRef<() => void>(null);
+
+ return (
+ {}}
+ activateOnClick={false}
+ styles={{ inner: { pointerEvents: 'all' } }}
+ >
+
+ openRef.current?.()}>Select files
+
+
+ );
+}
+
+export const enableChildPointerEvent: MantineDemo = {
+ type: 'code',
+ component: Demo,
+ code,
+};
diff --git a/docs/dropzone-demos/Dropzone.demo.fullScreen.tsx b/docs/dropzone-demos/Dropzone.demo.fullScreen.tsx
new file mode 100644
index 00000000000..d314a2bacff
--- /dev/null
+++ b/docs/dropzone-demos/Dropzone.demo.fullScreen.tsx
@@ -0,0 +1,97 @@
+/* eslint-disable no-console */
+import React, { useState } from 'react';
+import { Button, Group } from '@mantine/core';
+import { Dropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone';
+import { MantineDemo } from '@mantine/ds';
+import { DropzoneDemoChildren } from './_base';
+
+const code = `
+import { useState } from 'react';
+import { Group, Text, Button, rem } from '@mantine/core';
+import { IconUpload, IconPhoto, IconX } from '@tabler/icons-react';
+import { Dropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone';
+
+function Demo() {
+ const [active, setActive] = useState(false);
+
+ return (
+ <>
+
+ setActive((d) => !d)}>
+ {active ? 'Deactivate' : 'Activate'} full screen dropzone
+
+
+
+ {
+ console.log(files);
+ setActive(false);
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+ Drag images here or click to select files
+
+
+ Attach as many files as you like, each file should not exceed 5mb
+
+
+
+
+
+ );
+}
+`;
+
+function Demo() {
+ const [active, setActive] = useState(false);
+
+ return (
+ <>
+
+ setActive((d) => !d)}>
+ {active ? 'Deactivate' : 'Activate'} full screen dropzone
+
+
+
+ {
+ console.log(files);
+ setActive(false);
+ }}
+ >
+
+
+ );
+}
+
+export const fullScreen: MantineDemo = {
+ type: 'code',
+ component: Demo,
+ code,
+};
diff --git a/src/mantine-demos/src/demos/dropzone/Dropzone.demo.loading.tsx b/docs/dropzone-demos/Dropzone.demo.loading.tsx
similarity index 86%
rename from src/mantine-demos/src/demos/dropzone/Dropzone.demo.loading.tsx
rename to docs/dropzone-demos/Dropzone.demo.loading.tsx
index dd0eb2bd6d9..30aa0ac2580 100644
--- a/src/mantine-demos/src/demos/dropzone/Dropzone.demo.loading.tsx
+++ b/docs/dropzone-demos/Dropzone.demo.loading.tsx
@@ -7,7 +7,7 @@ import { Dropzone } from '@mantine/dropzone';
function Demo() {
return (
-
+ {}}>
{/* children */}
);
@@ -19,7 +19,7 @@ function Demo() {
}
export const loading: MantineDemo = {
- type: 'demo',
+ type: 'code',
component: Demo,
code,
};
diff --git a/docs/dropzone-demos/Dropzone.demo.manual.tsx b/docs/dropzone-demos/Dropzone.demo.manual.tsx
new file mode 100644
index 00000000000..6ba80bf9627
--- /dev/null
+++ b/docs/dropzone-demos/Dropzone.demo.manual.tsx
@@ -0,0 +1,45 @@
+import React, { useRef } from 'react';
+import { Button, Group } from '@mantine/core';
+import { MantineDemo } from '@mantine/ds';
+import { BaseDemo } from './_base';
+
+const code = `
+import { useRef } from 'react';
+import { Button, Group } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+
+function Demo() {
+ const openRef = useRef<() => void>(null);
+
+ return (
+ <>
+ {}}>
+ {/* children */}
+
+
+
+ openRef.current?.()}>Select files
+
+
+ );
+}
+`;
+
+function Demo() {
+ const openRef = useRef<() => void>(null);
+
+ return (
+ <>
+
+ openRef.current?.()}>Select files
+
+
+ );
+}
+
+export const manual: MantineDemo = {
+ type: 'code',
+ component: Demo,
+ code,
+};
diff --git a/docs/dropzone-demos/Dropzone.demo.preview.tsx b/docs/dropzone-demos/Dropzone.demo.preview.tsx
new file mode 100644
index 00000000000..31909b0fc3c
--- /dev/null
+++ b/docs/dropzone-demos/Dropzone.demo.preview.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { Text, Image, SimpleGrid } from '@mantine/core';
+import { MantineDemo } from '@mantine/ds';
+import { Dropzone, IMAGE_MIME_TYPE, FileWithPath } from '@mantine/dropzone';
+
+const code = `
+import { useState } from 'react';
+import { Text, Image, SimpleGrid } from '@mantine/core';
+import { Dropzone, IMAGE_MIME_TYPE, FileWithPath } from '@mantine/dropzone';
+
+function Demo() {
+ const [files, setFiles] = useState([]);
+
+ const previews = files.map((file, index) => {
+ const imageUrl = URL.createObjectURL(file);
+ return URL.revokeObjectURL(imageUrl)} />;
+ });
+
+ return (
+
+
+ Drop images here
+
+
+ 0 ? 'xl' : 0}>
+ {previews}
+
+
+ );
+}
+`;
+
+function Demo() {
+ const [files, setFiles] = useState([]);
+
+ const previews = files.map((file, index) => {
+ const imageUrl = URL.createObjectURL(file);
+ return URL.revokeObjectURL(imageUrl)} />;
+ });
+
+ return (
+
+
+ Drop images here
+
+
+ 0 ? 'xl' : 0}>
+ {previews}
+
+
+ );
+}
+
+export const preview: MantineDemo = {
+ type: 'code',
+ component: Demo,
+ code,
+};
diff --git a/docs/dropzone-demos/Dropzone.demo.stylesApi.module.css b/docs/dropzone-demos/Dropzone.demo.stylesApi.module.css
new file mode 100644
index 00000000000..7a1dfbfccfe
--- /dev/null
+++ b/docs/dropzone-demos/Dropzone.demo.stylesApi.module.css
@@ -0,0 +1,18 @@
+.root {
+ min-height: rem(120px);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 0;
+ background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+
+ &[data-accept] {
+ color: var(--mantine-color-white);
+ background-color: var(--mantine-color-blue-6);
+ }
+
+ &[data-reject] {
+ color: var(--mantine-color-white);
+ background-color: var(--mantine-color-red-6);
+ }
+}
diff --git a/docs/dropzone-demos/Dropzone.demo.stylesApi.tsx b/docs/dropzone-demos/Dropzone.demo.stylesApi.tsx
new file mode 100644
index 00000000000..d6676968f81
--- /dev/null
+++ b/docs/dropzone-demos/Dropzone.demo.stylesApi.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Text } from '@mantine/core';
+import { MantineDemo } from '@mantine/ds';
+import { Dropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone';
+import classes from './Dropzone.demo.stylesApi.module.css';
+
+const cssCode = `
+.root {
+ min-height: rem(120px);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 0;
+ background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+
+ &[data-accept] {
+ color: var(--mantine-color-white);
+ background-color: var(--mantine-color-blue-6);
+ }
+
+ &[data-reject] {
+ color: var(--mantine-color-white);
+ background-color: var(--mantine-color-red-6);
+ }
+}
+
+`;
+
+const code = `
+import { Text } from '@mantine/core';
+import { Dropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone';
+import classes from './Demo.module.css';
+
+function Demo() {
+ return (
+ {}} accept={IMAGE_MIME_TYPE} className={classes.root}>
+ Drop images here
+
+ );
+}
+`;
+
+function Demo() {
+ return (
+ {}} accept={IMAGE_MIME_TYPE} className={classes.root}>
+ Drop images here
+
+ );
+}
+
+export const stylesApi: MantineDemo = {
+ type: 'code',
+ component: Demo,
+ code: [
+ { fileName: 'Demo.tsx', code, language: 'tsx' },
+ { fileName: 'Demo.module.css', code: cssCode, language: 'scss' },
+ ],
+};
diff --git a/docs/dropzone-demos/Dropzone.demo.usage.tsx b/docs/dropzone-demos/Dropzone.demo.usage.tsx
new file mode 100644
index 00000000000..48d4e38eb9b
--- /dev/null
+++ b/docs/dropzone-demos/Dropzone.demo.usage.tsx
@@ -0,0 +1,56 @@
+import { MantineDemo } from '@mantine/ds';
+import { BaseDemo } from './_base';
+
+const code = `
+import { Group, Text, rem } from '@mantine/core';
+import { IconUpload, IconPhoto, IconX } from '@tabler/icons-react';
+import { Dropzone, DropzoneProps, IMAGE_MIME_TYPE } from '@mantine/dropzone';
+
+export function BaseDemo(props: Partial) {
+ return (
+ console.log('accepted files', files)}
+ onReject={(files) => console.log('rejected files', files)}
+ maxSize={3 * 1024 ** 2}
+ accept={IMAGE_MIME_TYPE}
+ {...props}
+ >
+
+
+
+
+
+
+
+
+
+
+ Drag images here or click to select files
+
+
+ Attach as many files as you like, each file should not exceed 5mb
+
+
+
+
+ );
+}
+`;
+
+export const usage: MantineDemo = {
+ type: 'code',
+ component: BaseDemo,
+ code,
+};
diff --git a/docs/dropzone-demos/Dropzone.disabled.module.css b/docs/dropzone-demos/Dropzone.disabled.module.css
new file mode 100644
index 00000000000..d533474b328
--- /dev/null
+++ b/docs/dropzone-demos/Dropzone.disabled.module.css
@@ -0,0 +1,9 @@
+.disabled {
+ background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+ border-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+ cursor: not-allowed;
+
+ & * {
+ color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+ }
+}
diff --git a/docs/dropzone-demos/_base.tsx b/docs/dropzone-demos/_base.tsx
new file mode 100644
index 00000000000..28b2355f1a6
--- /dev/null
+++ b/docs/dropzone-demos/_base.tsx
@@ -0,0 +1,53 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { Group, Text, rem } from '@mantine/core';
+import { IconUpload, IconPhoto, IconX } from '@tabler/icons-react';
+import { Dropzone, DropzoneProps, IMAGE_MIME_TYPE } from '@mantine/dropzone';
+
+export function DropzoneDemoChildren() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ Drag images here or click to select files
+
+
+ Attach as many files as you like, each file should not exceed 5mb
+
+
+
+ );
+}
+
+export function BaseDemo(props: Partial) {
+ return (
+ console.log('accepted files', files)}
+ onReject={(files) => console.log('rejected files', files)}
+ maxSize={3 * 1024 ** 2}
+ accept={IMAGE_MIME_TYPE}
+ {...props}
+ >
+
+ );
+}
diff --git a/docs/dropzone-demos/index.ts b/docs/dropzone-demos/index.ts
new file mode 100644
index 00000000000..4dea4dbfeb4
--- /dev/null
+++ b/docs/dropzone-demos/index.ts
@@ -0,0 +1,10 @@
+// For some reason next.js cannot handle dropzone demos in @mantine/demos
+
+export { usage } from './Dropzone.demo.usage';
+export { loading } from './Dropzone.demo.loading';
+export { disabled } from './Dropzone.demo.disabled';
+export { manual } from './Dropzone.demo.manual';
+export { enableChildPointerEvent } from './Dropzone.demo.enableChildPointerEvent';
+export { fullScreen } from './Dropzone.demo.fullScreen';
+export { stylesApi } from './Dropzone.demo.stylesApi';
+export { preview } from './Dropzone.demo.preview';
diff --git a/docs/fonts/FontsStyle.tsx b/docs/fonts/FontsStyle.tsx
new file mode 100644
index 00000000000..766c28e4b99
--- /dev/null
+++ b/docs/fonts/FontsStyle.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import Head from 'next/head';
+import { DEFAULT_THEME } from '@mantine/core';
+import { greycliffCF } from './GreycliffCF/GreycliffCF';
+
+export function FontsStyle() {
+ return (
+
+
+
+ );
+}
diff --git a/docs/src/fonts/GreycliffCF/GreycliffCF-Bold.woff2 b/docs/fonts/GreycliffCF/GreycliffCF-Bold.woff2
similarity index 100%
rename from docs/src/fonts/GreycliffCF/GreycliffCF-Bold.woff2
rename to docs/fonts/GreycliffCF/GreycliffCF-Bold.woff2
diff --git a/docs/src/fonts/GreycliffCF/GreycliffCF-Heavy.woff2 b/docs/fonts/GreycliffCF/GreycliffCF-Heavy.woff2
similarity index 100%
rename from docs/src/fonts/GreycliffCF/GreycliffCF-Heavy.woff2
rename to docs/fonts/GreycliffCF/GreycliffCF-Heavy.woff2
diff --git a/docs/fonts/GreycliffCF/GreycliffCF.ts b/docs/fonts/GreycliffCF/GreycliffCF.ts
new file mode 100644
index 00000000000..45faa93a202
--- /dev/null
+++ b/docs/fonts/GreycliffCF/GreycliffCF.ts
@@ -0,0 +1,8 @@
+import localFont from 'next/font/local';
+
+export const greycliffCF = localFont({
+ src: [
+ { path: './GreycliffCF-Bold.woff2', weight: '700', style: 'normal' },
+ { path: './GreycliffCF-Heavy.woff2', weight: '900', style: 'normal' },
+ ],
+});
diff --git a/docs/src/fonts/README.md b/docs/fonts/README.md
similarity index 100%
rename from docs/src/fonts/README.md
rename to docs/fonts/README.md
diff --git a/docs/fonts/index.ts b/docs/fonts/index.ts
new file mode 100644
index 00000000000..ae7d996bf57
--- /dev/null
+++ b/docs/fonts/index.ts
@@ -0,0 +1,2 @@
+export { greycliffCF } from './GreycliffCF/GreycliffCF';
+export { FontsStyle } from './FontsStyle';
diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js
deleted file mode 100644
index b4c86e50927..00000000000
--- a/docs/gatsby-config.js
+++ /dev/null
@@ -1,68 +0,0 @@
-const remarkSlug = require('remark-slug');
-
-module.exports = {
- flags: {
- DEV_SSR: false,
- FAST_DEV: true,
- },
-
- siteMetadata: {
- title: 'Mantine Docs',
- description: 'Mantine documentation',
- author: '@rtivital',
- siteUrl: 'https://mantine.dev',
- },
-
- plugins: [
- 'gatsby-plugin-cname',
- 'gatsby-plugin-tsconfig-paths',
- {
- resolve: 'gatsby-plugin-layout',
- options: {
- component: `${__dirname}/src/components/Layout/Layout`,
- },
- },
- {
- resolve: 'gatsby-plugin-mdx',
- options: {
- remarkPlugins: [remarkSlug],
- },
- },
- {
- resolve: 'gatsby-source-filesystem',
- options: {
- name: 'images',
- path: `${__dirname}/src/images`,
- },
- },
-
- {
- resolve: 'gatsby-source-filesystem',
- options: {
- name: 'docs',
- path: `${__dirname}/src/docs/`,
- },
- },
-
- {
- resolve: 'gatsby-plugin-manifest',
- options: {
- name: 'Mantine Docs',
- short_name: 'mantine',
- start_url: '/',
- background_color: '#228be6',
- theme_color: '#228be6',
- display: 'minimal-ui',
- icon: 'src/images/favicon.svg',
- },
- },
-
- {
- resolve: 'gatsby-plugin-nprogress',
- options: {
- color: '#228be6',
- showSpinner: false,
- },
- },
- ],
-};
diff --git a/docs/gatsby-ssr.js b/docs/gatsby-ssr.js
deleted file mode 100644
index 7a517b10bd5..00000000000
--- a/docs/gatsby-ssr.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/* eslint-disable react/jsx-filename-extension */
-import React from 'react';
-import { renderToString } from 'react-dom/server';
-import { createStylesServer, ServerStyles } from '@mantine/ssr';
-
-const stylesServer = createStylesServer();
-
-export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString, setHeadComponents }) => {
- const html = renderToString(bodyComponent);
- setHeadComponents([ = {
+ Box: {
+ title: 'Box',
+ package: '@mantine/core',
+ slug: '/core/box',
+ description: 'Base component for all Mantine components',
+ import: "import { Box } from '@mantine/core';",
+ source: 'mantine-core/src/components/Box/Box.tsx',
+ docs: 'core/button.mdx',
+ },
+
+ Button: {
+ title: 'Button',
+ package: '@mantine/core',
+ slug: '/core/button',
+ description: 'Button component to render button or link',
+ componentPrefix: 'Button',
+ props: ['Button', 'ButtonGroup'],
+ styles: ['Button', 'ButtonGroup'],
+ import: "import { Button } from '@mantine/core';",
+ source: 'mantine-core/src/components/Button/Button.tsx',
+ docs: 'core/button.mdx',
+ },
+ Loader: {
+ title: 'Loader',
+ package: '@mantine/core',
+ slug: '/core/loader',
+ description: 'Indicate loading state',
+ props: ['Loader'],
+ styles: ['Loader'],
+ import: "import { Loader } from '@mantine/core';",
+ source: 'mantine-core/src/components/Loader/Loader.tsx',
+ docs: 'core/loader.mdx',
+ },
+ Container: {
+ title: 'Container',
+ package: '@mantine/core',
+ slug: '/core/container',
+ description: 'Center content with padding and max-width',
+ props: ['Container'],
+ styles: ['Container'],
+ import: "import { Container } from '@mantine/core';",
+ source: 'mantine-core/src/components/Container/Container.tsx',
+ docs: 'core/container.mdx',
+ },
+ Anchor: {
+ title: 'Anchor',
+ package: '@mantine/core',
+ slug: '/core/anchor',
+ description: 'Display link with theme styles',
+ props: ['Anchor'],
+ styles: ['Anchor'],
+ import: "import { Anchor } from '@mantine/core';",
+ source: 'mantine-core/src/components/Anchor/Anchor.tsx',
+ docs: 'core/anchor.mdx',
+ },
+ Input: {
+ title: 'Input',
+ package: '@mantine/core',
+ slug: '/core/input',
+ description: 'Base component to create custom inputs',
+ componentPrefix: 'Input',
+ props: ['Input', 'InputWrapper', 'InputLabel', 'InputDescription', 'InputError'],
+ styles: ['Input', 'InputWrapper'],
+ polymorphic: true,
+ import: "import { Input } from '@mantine/core';",
+ source: 'mantine-core/src/components/Input/Input.tsx',
+ docs: 'core/input.mdx',
+ },
+ ActionIcon: {
+ title: 'ActionIcon',
+ package: '@mantine/core',
+ slug: '/core/action-icon',
+ description: 'Icon button',
+ componentPrefix: 'ActionIcon',
+ props: ['ActionIcon', 'ActionIconGroup'],
+ styles: ['ActionIcon', 'ActionIconGroup'],
+ polymorphic: true,
+ import: "import { ActionIcon } from '@mantine/core';",
+ source: 'mantine-core/src/components/ActionIcon/ActionIcon.tsx',
+ docs: 'core/action-icon.mdx',
+ },
+ CloseButton: {
+ title: 'CloseButton',
+ package: '@mantine/core',
+ slug: '/core/close-button',
+ description: 'ActionIcon with close icon',
+ props: ['CloseButton'],
+ styles: ['CloseButton'],
+ polymorphic: true,
+ import: "import { CloseButton } from '@mantine/core';",
+ source: 'mantine-core/src/components/CloseButton/CloseButton.tsx',
+ docs: 'core/close-button.mdx',
+ },
+ CopyButton: {
+ title: 'CopyButton',
+ package: '@mantine/core',
+ slug: '/core/copy-button',
+ description: 'Copies given text to clipboard',
+ props: ['CopyButton'],
+ import: "import { CopyButton } from '@mantine/core';",
+ source: 'mantine-core/src/components/CopyButton/CopyButton.tsx',
+ docs: 'core/copy-button.mdx',
+ },
+ FileButton: {
+ title: 'FileButton',
+ package: '@mantine/core',
+ slug: '/core/file-button',
+ description: 'Open file picker with a button click',
+ props: ['FileButton'],
+ import: "import { FileButton } from '@mantine/core';",
+ source: 'mantine-core/src/components/FileButton/FileButton.tsx',
+ docs: 'core/file-button.mdx',
+ },
+ UnstyledButton: {
+ title: 'UnstyledButton',
+ package: '@mantine/core',
+ slug: '/core/unstyled-button',
+ description: 'Unstyled polymorphic button',
+ polymorphic: true,
+ import: "import { UnstyledButton } from '@mantine/core';",
+ source: 'mantine-core/src/components/UnstyledButton/UnstyledButton.tsx',
+ docs: 'core/unstyled-button.mdx',
+ },
+ Tabs: {
+ title: 'Tabs',
+ package: '@mantine/core',
+ slug: '/core/tabs',
+ props: ['Tabs', 'TabsList', 'TabsTab', 'TabsPanel'],
+ styles: ['Tabs'],
+ description: 'Switch between different views',
+ import: "import { Tabs } from '@mantine/core';",
+ source: 'mantine-core/src/components/Tabs/Tabs.tsx',
+ docs: 'core/tabs.mdx',
+ },
+ BackgroundImage: {
+ title: 'BackgroundImage',
+ package: '@mantine/core',
+ slug: '/core/background-image',
+ description: 'Displays image as background',
+ polymorphic: true,
+ props: ['BackgroundImage'],
+ styles: ['BackgroundImage'],
+ import: "import { BackgroundImage } from '@mantine/core';",
+ source: 'mantine-core/src/components/BackgroundImage/BackgroundImage.tsx',
+ docs: 'core/background-image.mdx',
+ },
+ Blockquote: {
+ title: 'Blockquote',
+ package: '@mantine/core',
+ slug: '/core/blockquote',
+ props: ['Blockquote'],
+ styles: ['Blockquote'],
+ description: 'Blockquote with optional cite',
+ import: "import { Blockquote } from '@mantine/core';",
+ source: 'mantine-core/src/components/Blockquote/Blockquote.tsx',
+ docs: 'core/blockquote.mdx',
+ },
+ Breadcrumbs: {
+ title: 'Breadcrumbs',
+ package: '@mantine/core',
+ slug: '/core/breadcrumbs',
+ props: ['Breadcrumbs'],
+ styles: ['Breadcrumbs'],
+ description: 'Separates list of react nodes with given separator',
+ import: "import { Breadcrumbs } from '@mantine/core';",
+ source: 'mantine-core/src/components/Breadcrumbs/Breadcrumbs.tsx',
+ docs: 'core/breadcrumbs.mdx',
+ },
+ Burger: {
+ title: 'Burger',
+ package: '@mantine/core',
+ slug: '/core/burger',
+ props: ['Burger'],
+ styles: ['Burger'],
+ description: 'Open/close navigation button',
+ import: "import { Burger } from '@mantine/core';",
+ source: 'mantine-core/src/components/Burger/Burger.tsx',
+ docs: 'core/burger.mdx',
+ },
+ Center: {
+ title: 'Center',
+ package: '@mantine/core',
+ slug: '/core/center',
+ props: ['Center'],
+ styles: ['Center'],
+ polymorphic: true,
+ description: 'Centers content vertically and horizontally',
+ import: "import { Center } from '@mantine/core';",
+ source: 'mantine-core/src/components/Center/Center.tsx',
+ docs: 'core/center.mdx',
+ },
+ Code: {
+ title: 'Code',
+ package: '@mantine/core',
+ slug: '/core/code',
+ props: ['Code'],
+ styles: ['Code'],
+ description: 'Inline and block code',
+ import: "import { Code } from '@mantine/core';",
+ source: 'mantine-core/src/components/Code/Code.tsx',
+ docs: 'core/code.mdx',
+ },
+ Collapse: {
+ title: 'Collapse',
+ package: '@mantine/core',
+ slug: '/core/collapse',
+ props: ['Collapse'],
+ description: 'Animate presence with slide down/up transition',
+ import: "import { Collapse } from '@mantine/core';",
+ source: 'mantine-core/src/components/Collapse/Collapse.tsx',
+ docs: 'core/collapse.mdx',
+ },
+ ColorPicker: {
+ title: 'ColorPicker',
+ package: '@mantine/core',
+ slug: '/core/color-picker',
+ props: ['ColorPicker'],
+ styles: ['ColorPicker'],
+ description: 'Pick colors',
+ import: "import { ColorPicker } from '@mantine/core';",
+ source: 'mantine-core/src/components/ColorPicker/ColorPicker.tsx',
+ docs: 'core/color-picker.mdx',
+ },
+ ColorSwatch: {
+ title: 'ColorSwatch',
+ package: '@mantine/core',
+ slug: '/core/color-swatch',
+ props: ['ColorSwatch'],
+ styles: ['ColorSwatch'],
+ polymorphic: true,
+ description: 'Displays color',
+ import: "import { ColorSwatch } from '@mantine/core';",
+ source: 'mantine-core/src/components/ColorSwatch/ColorSwatch.tsx',
+ docs: 'core/color-swatch.mdx',
+ },
+ FocusTrap: {
+ title: 'FocusTrap',
+ package: '@mantine/core',
+ slug: '/core/focus-trap',
+ props: ['FocusTrap'],
+ description: 'Trap focus at child node',
+ import: "import { FocusTrap } from '@mantine/core';",
+ source: 'mantine-core/src/components/FocusTrap/FocusTrap.tsx',
+ docs: 'core/focus-trap.mdx',
+ },
+ Group: {
+ title: 'Group',
+ package: '@mantine/core',
+ slug: '/core/group',
+ props: ['Group'],
+ styles: ['Group'],
+ description: 'Compose elements and components in a horizontal flex container',
+ import: "import { Group } from '@mantine/core';",
+ source: 'mantine-core/src/components/Group/Group.tsx',
+ docs: 'core/group.mdx',
+ },
+ Highlight: {
+ title: 'Highlight',
+ package: '@mantine/core',
+ slug: '/core/highlight',
+ props: ['Highlight'],
+ styles: ['Highlight'],
+ polymorphic: true,
+ description: 'Highlight given part of a string with mark',
+ import: "import { Highlight } from '@mantine/core';",
+ source: 'mantine-core/src/components/Highlight/Highlight.tsx',
+ docs: 'core/highlight.mdx',
+ },
+ Kbd: {
+ title: 'Kbd',
+ package: '@mantine/core',
+ slug: '/core/kbd',
+ props: ['Kbd'],
+ styles: ['Kbd'],
+ description: 'Display keyboard key',
+ import: "import { Kbd } from '@mantine/core';",
+ source: 'mantine-core/src/components/Kbd/Kbd.tsx',
+ docs: 'core/kbd.mdx',
+ },
+ Mark: {
+ title: 'Mark',
+ package: '@mantine/core',
+ slug: '/core/mark',
+ props: ['Mark'],
+ styles: ['Mark'],
+ description: 'Highlight part of the text',
+ import: "import { Mark } from '@mantine/core';",
+ source: 'mantine-core/src/components/Mark/Mark.tsx',
+ docs: 'core/mark.mdx',
+ },
+ NativeSelect: {
+ title: 'NativeSelect',
+ package: '@mantine/core',
+ slug: '/core/native-select',
+ props: ['NativeSelect'],
+ styles: ['NativeSelect'],
+ description: 'Native select element based on Input',
+ import: "import { NativeSelect } from '@mantine/core';",
+ source: 'mantine-core/src/components/NativeSelect/NativeSelect.tsx',
+ docs: 'core/native-select.mdx',
+ },
+ Notification: {
+ title: 'Notification',
+ package: '@mantine/core',
+ slug: '/core/notification',
+ props: ['Notification'],
+ styles: ['Notification'],
+ description: 'Show dynamic notifications and alerts to user, part of notifications system',
+ import: "import { Notification } from '@mantine/core';",
+ source: 'mantine-core/src/components/Notification/Notification.tsx',
+ docs: 'core/notification.mdx',
+ },
+ Paper: {
+ title: 'Paper',
+ package: '@mantine/core',
+ slug: '/core/paper',
+ props: ['Paper'],
+ styles: ['Paper'],
+ description: 'Renders white or dark background depending on color scheme',
+ polymorphic: true,
+ import: "import { Paper } from '@mantine/core';",
+ source: 'mantine-core/src/components/Paper/Paper.tsx',
+ docs: 'core/paper.mdx',
+ },
+ Popover: {
+ title: 'Popover',
+ package: '@mantine/core',
+ slug: '/core/popover',
+ componentPrefix: 'Popover',
+ props: ['Popover', 'PopoverTarget'],
+ styles: ['Popover'],
+ description: 'Display popover section relative to given target element',
+ import: "import { Popover } from '@mantine/core';",
+ source: 'mantine-core/src/components/Popover/Popover.tsx',
+ docs: 'core/popover.mdx',
+ },
+ Portal: {
+ title: 'Portal',
+ package: '@mantine/core',
+ slug: '/core/portal',
+ props: ['Portal'],
+ description: 'Renders component outside of parent element tree',
+ import: "import { Portal } from '@mantine/core';",
+ source: 'mantine-core/src/components/Portal/Portal.tsx',
+ docs: 'core/portal.mdx',
+ },
+ ScrollArea: {
+ title: 'ScrollArea',
+ package: '@mantine/core',
+ slug: '/core/scroll-area',
+ props: ['ScrollArea'],
+ styles: ['ScrollArea'],
+ description: 'Area with custom scrollbars',
+ import: "import { ScrollArea } from '@mantine/core';",
+ source: 'mantine-core/src/components/ScrollArea/ScrollArea.tsx',
+ docs: 'core/scroll-area.mdx',
+ },
+ SegmentedControl: {
+ title: 'SegmentedControl',
+ package: '@mantine/core',
+ slug: '/core/segmented-control',
+ props: ['SegmentedControl'],
+ styles: ['SegmentedControl'],
+ description: 'A linear set of two or more segments',
+ import: "import { SegmentedControl } from '@mantine/core';",
+ source: 'mantine-core/src/components/SegmentedControl/SegmentedControl.tsx',
+ docs: 'core/segmented-control.mdx',
+ },
+ Slider: {
+ title: 'Slider',
+ package: '@mantine/core',
+ slug: '/core/slider',
+ props: ['Slider', 'RangeSlider'],
+ styles: ['Slider'],
+ description: 'Slider and RangeSlider components',
+ import: "import { Slider } from '@mantine/core';",
+ source: 'mantine-core/src/components/Slider/Slider.tsx',
+ docs: 'core/slider.mdx',
+ },
+ Stack: {
+ title: 'Stack',
+ package: '@mantine/core',
+ slug: '/core/stack',
+ props: ['Stack'],
+ styles: ['Stack'],
+ description: 'Compose elements and components in a vertical flex container',
+ import: "import { Stack } from '@mantine/core';",
+ source: 'mantine-core/src/components/Stack/Stack.tsx',
+ docs: 'core/stack.mdx',
+ },
+ Switch: {
+ title: 'Switch',
+ package: '@mantine/core',
+ slug: '/core/switch',
+ props: ['Switch', 'SwitchGroup'],
+ styles: ['Switch'],
+ description: 'Capture boolean input from user',
+ import: "import { Switch } from '@mantine/core';",
+ source: 'mantine-core/src/components/Switch/Switch.tsx',
+ docs: 'core/switch.mdx',
+ },
+ Table: {
+ title: 'Table',
+ package: '@mantine/core',
+ slug: '/core/table',
+ props: ['Table'],
+ styles: ['Table'],
+ description: 'Render table with theme styles',
+ import: "import { Table } from '@mantine/core';",
+ source: 'mantine-core/src/components/Table/Table.tsx',
+ docs: 'core/table.mdx',
+ },
+ Text: {
+ title: 'Text',
+ package: '@mantine/core',
+ slug: '/core/text',
+ props: ['Text'],
+ styles: ['Text'],
+ description: 'Display text',
+ import: "import { Text } from '@mantine/core';",
+ source: 'mantine-core/src/components/Text/Text.tsx',
+ docs: 'core/text.mdx',
+ },
+ TextInput: {
+ title: 'TextInput',
+ package: '@mantine/core',
+ slug: '/core/text-input',
+ props: ['TextInput'],
+ styles: ['TextInput'],
+ description: 'Capture string input from user',
+ import: "import { TextInput } from '@mantine/core';",
+ source: 'mantine-core/src/components/TextInput/TextInput.tsx',
+ docs: 'core/text-input.mdx',
+ },
+ Title: {
+ title: 'Title',
+ package: '@mantine/core',
+ slug: '/core/title',
+ props: ['Title'],
+ styles: ['Title'],
+ description: 'h1-h6 heading',
+ import: "import { Title } from '@mantine/core';",
+ source: 'mantine-core/src/components/Title/Title.tsx',
+ docs: 'core/title.mdx',
+ },
+ Badge: {
+ title: 'Badge',
+ package: '@mantine/core',
+ slug: '/core/badge',
+ props: ['Badge'],
+ styles: ['Badge'],
+ polymorphic: true,
+ description: 'Display badge, pill or tag',
+ import: "import { Badge } from '@mantine/core';",
+ source: 'mantine-core/src/components/Badge/Badge.tsx',
+ docs: 'core/badge.mdx',
+ },
+ Tooltip: {
+ title: 'Tooltip',
+ package: '@mantine/core',
+ slug: '/core/tooltip',
+ props: ['Tooltip'],
+ styles: ['Tooltip'],
+ description: 'Renders tooltip at given element on mouse over or other event',
+ import: "import { Tooltip } from '@mantine/core';",
+ source: 'mantine-core/src/components/Tooltip/Tooltip.tsx',
+ docs: 'core/tooltip.mdx',
+ },
+ Transition: {
+ title: 'Transition',
+ package: '@mantine/core',
+ slug: '/core/transition',
+ props: ['Transition'],
+ description: 'Animate presence of component with pre-made animations',
+ import: "import { Transition } from '@mantine/core';",
+ source: 'mantine-core/src/components/Transition/Transition.tsx',
+ docs: 'core/transition.mdx',
+ },
+ TypographyStylesProvider: {
+ title: 'TypographyStylesProvider',
+ package: '@mantine/core',
+ slug: '/core/typography-styles-provider',
+ description: 'Styles provider for html content',
+ import: "import { TypographyStylesProvider } from '@mantine/core';",
+ source: 'mantine-core/src/components/TypographyStylesProvider/TypographyStylesProvider.tsx',
+ docs: 'core/typography-styles-provider.mdx',
+ },
+ VisuallyHidden: {
+ title: 'VisuallyHidden',
+ package: '@mantine/core',
+ slug: '/core/visually-hidden',
+ description: 'Hide element visually but keep it accessible for screen readers',
+ import: "import { VisuallyHidden } from '@mantine/core';",
+ source: 'mantine-core/src/components/VisuallyHidden/VisuallyHidden.tsx',
+ docs: 'core/visually-hidden.mdx',
+ },
+ Divider: {
+ title: 'Divider',
+ package: '@mantine/core',
+ slug: '/core/divider',
+ props: ['Divider'],
+ styles: ['Divider'],
+ description: 'Horizontal line with optional label or vertical divider',
+ import: "import { Divider } from '@mantine/core';",
+ source: 'mantine-core/src/components/Divider/Divider.tsx',
+ docs: 'core/divider.mdx',
+ },
+ AspectRatio: {
+ title: 'AspectRatio',
+ package: '@mantine/core',
+ slug: '/core/aspect-ratio',
+ props: ['AspectRatio'],
+ styles: ['AspectRatio'],
+ description: 'Maintain responsive consistent width/height ratio',
+ import: "import { AspectRatio } from '@mantine/core';",
+ source: 'mantine-core/src/components/AspectRatio/AspectRatio.tsx',
+ docs: 'core/aspect-ratio.mdx',
+ },
+ Overlay: {
+ title: 'Overlay',
+ package: '@mantine/core',
+ slug: '/core/overlay',
+ props: ['Overlay'],
+ styles: ['Overlay'],
+ polymorphic: true,
+ description: 'Overlays parent element with div element with any color and opacity',
+ import: "import { Overlay } from '@mantine/core';",
+ source: 'mantine-core/src/components/Overlay/Overlay.tsx',
+ docs: 'core/overlay.mdx',
+ },
+ Avatar: {
+ title: 'Avatar',
+ package: '@mantine/core',
+ slug: '/core/avatar',
+ props: ['Avatar'],
+ styles: ['Avatar'],
+ polymorphic: true,
+ description: 'Display user profile image, initials or fallback icon',
+ import: "import { Avatar } from '@mantine/core';",
+ source: 'mantine-core/src/components/Avatar/Avatar.tsx',
+ docs: 'core/avatar.mdx',
+ },
+
+ Alert: {
+ title: 'Alert',
+ package: '@mantine/core',
+ slug: '/core/alert',
+ props: ['Alert'],
+ styles: ['Alert'],
+ description: 'Attract user attention with important static message',
+ import: "import { Alert } from '@mantine/core';",
+ source: 'mantine-core/src/components/Alert/Alert.tsx',
+ docs: 'core/alert.mdx',
+ },
+
+ Affix: {
+ title: 'Affix',
+ package: '@mantine/core',
+ slug: '/core/affix',
+ props: ['Affix'],
+ styles: ['Affix'],
+ description: 'Renders children inside portal at fixed position',
+ import: "import { Affix } from '@mantine/core';",
+ source: 'mantine-core/src/components/Affix/Affix.tsx',
+ docs: 'core/affix.mdx',
+ },
+
+ Fieldset: {
+ title: 'Fieldset',
+ package: '@mantine/core',
+ slug: '/core/fieldset',
+ props: ['Fieldset'],
+ styles: ['Fieldset'],
+ description: 'Group related elements in a form',
+ import: "import { Fieldset } from '@mantine/core';",
+ source: 'mantine-core/src/components/Fieldset/Fieldset.tsx',
+ docs: 'core/fieldset.mdx',
+ },
+
+ Checkbox: {
+ title: 'Checkbox',
+ package: '@mantine/core',
+ slug: '/core/checkbox',
+ componentPrefix: 'Checkbox',
+ props: ['Checkbox', 'CheckboxGroup'],
+ styles: ['Checkbox', 'CheckboxGroup'],
+ description: 'Capture boolean input from user',
+ import: "import { Checkbox } from '@mantine/core';",
+ source: 'mantine-core/src/components/Checkbox/Checkbox.tsx',
+ docs: 'core/checkbox.mdx',
+ },
+
+ Combobox: {
+ title: 'Combobox',
+ package: '@mantine/core',
+ slug: '/core/combobox',
+ componentPrefix: 'Combobox',
+ props: [
+ 'Combobox',
+ 'ComboboxOption',
+ 'ComboboxTarget',
+ 'ComboboxDropdownTarget',
+ 'ComboboxEventsTarget',
+ 'ComboboxDropdown',
+ 'ComboboxGroup',
+ ],
+ styles: ['Combobox'],
+ description: 'Create custom select, autocomplete or multiselect inputs',
+ import: "import { Combobox } from '@mantine/core';",
+ source: 'mantine-core/src/components/Combobox/Combobox.tsx',
+ docs: 'core/combobox.mdx',
+ },
+
+ Modal: {
+ title: 'Modal',
+ package: '@mantine/core',
+ slug: '/core/modal',
+ props: ['Modal'],
+ styles: ['Modal'],
+ description: 'An accessible overlay dialog',
+ import: "import { Modal } from '@mantine/core';",
+ source: 'mantine-core/src/components/Modal/Modal.tsx',
+ docs: 'core/modal.mdx',
+ },
+
+ Drawer: {
+ title: 'Drawer',
+ package: '@mantine/core',
+ slug: '/core/drawer',
+ props: ['Drawer'],
+ styles: ['Drawer'],
+ description: 'Display overlay area at any side of the screen',
+ import: "import { Drawer } from '@mantine/core';",
+ source: 'mantine-core/src/components/Drawer/Drawer.tsx',
+ docs: 'core/drawer.mdx',
+ },
+
+ Accordion: {
+ title: 'Accordion',
+ package: '@mantine/core',
+ slug: '/core/accordion',
+ props: ['Accordion', 'AccordionItem', 'AccordionControl'],
+ styles: ['Accordion'],
+ componentPrefix: 'Accordion',
+ description: 'Divide content into collapsible sections',
+ import: "import { Accordion } from '@mantine/core';",
+ source: 'mantine-core/src/components/Accordion/Accordion.tsx',
+ docs: 'core/accordion.mdx',
+ },
+
+ Pill: {
+ title: 'Pill',
+ package: '@mantine/core',
+ slug: '/core/pill',
+ props: ['Pill', 'PillGroup'],
+ styles: ['Pill', 'PillGroup'],
+ description: 'Removable and non-removable tags',
+ import: "import { Pill } from '@mantine/core';",
+ source: 'mantine-core/src/components/Pill/Pill.tsx',
+ docs: 'core/pill.mdx',
+ },
+
+ PillsInput: {
+ title: 'PillsInput',
+ package: '@mantine/core',
+ slug: '/core/pills-input',
+ props: ['PillsInput', 'PillsInputField'],
+ styles: ['PillsInput', 'PillsInputField'],
+ description: 'Base component for custom tags inputs and multi selects',
+ import: "import { PillsInput } from '@mantine/core';",
+ source: 'mantine-core/src/components/PillsInput/PillsInput.tsx',
+ docs: 'core/pills-input.mdx',
+ },
+
+ Autocomplete: {
+ title: 'Autocomplete',
+ package: '@mantine/core',
+ slug: '/core/autocomplete',
+ props: ['Autocomplete'],
+ styles: ['Autocomplete'],
+ description: 'Autocomplete user input with any list of options',
+ import: "import { Autocomplete } from '@mantine/core';",
+ source: 'mantine-core/src/components/Autocomplete/Autocomplete.tsx',
+ docs: 'core/autocomplete.mdx',
+ },
+
+ TagsInput: {
+ title: 'TagsInput',
+ package: '@mantine/core',
+ slug: '/core/tags-input',
+ props: ['TagsInput'],
+ styles: ['TagsInput'],
+ description: 'Capture a list of values from user with free input and suggestions',
+ import: "import { TagsInput } from '@mantine/core';",
+ source: 'mantine-core/src/components/TagsInput/TagsInput.tsx',
+ docs: 'core/tags-input.mdx',
+ },
+
+ Select: {
+ title: 'Select',
+ package: '@mantine/core',
+ slug: '/core/select',
+ props: ['Select'],
+ styles: ['Select'],
+ description: 'Custom searchable select',
+ import: "import { Select } from '@mantine/core';",
+ source: 'mantine-core/src/components/Select/Select.tsx',
+ docs: 'core/select.mdx',
+ },
+
+ MultiSelect: {
+ title: 'MultiSelect',
+ package: '@mantine/core',
+ slug: '/core/multi-select',
+ props: ['MultiSelect'],
+ styles: ['MultiSelect'],
+ description: 'Custom searchable multi select',
+ import: "import { MultiSelect } from '@mantine/core';",
+ source: 'mantine-core/src/components/MultiSelect/MultiSelect.tsx',
+ docs: 'core/multi-select.mdx',
+ },
+
+ Pagination: {
+ title: 'Pagination',
+ package: '@mantine/core',
+ slug: '/core/pagination',
+ props: ['Pagination'],
+ styles: ['Pagination'],
+ description: 'Display active page and navigate between multiple pages',
+ import: "import { Pagination } from '@mantine/core';",
+ source: 'mantine-core/src/components/Pagination/Pagination.tsx',
+ docs: 'core/pagination.mdx',
+ },
+
+ AppShell: {
+ title: 'AppShell',
+ package: '@mantine/core',
+ slug: '/core/app-shell',
+ props: ['AppShell', 'AppShellNavbar', 'AppShellHeader', 'AppShellAside', 'AppShellFooter'],
+ styles: ['AppShell'],
+ componentPrefix: 'AppShell',
+ description: 'Responsive shell for your application with header, navbar, aside and footer',
+ import: "import { AppShell } from '@mantine/core';",
+ source: 'mantine-core/src/components/AppShell/AppShell.tsx',
+ docs: 'core/app-shell.mdx',
+ },
+
+ Skeleton: {
+ title: 'Skeleton',
+ package: '@mantine/core',
+ slug: '/core/skeleton',
+ props: ['Skeleton'],
+ styles: ['Skeleton'],
+ description: 'Indicate content loading state',
+ import: "import { Skeleton } from '@mantine/core';",
+ source: 'mantine-core/src/components/Skeleton/Skeleton.tsx',
+ docs: 'core/skeleton.mdx',
+ },
+
+ SimpleGrid: {
+ title: 'SimpleGrid',
+ package: '@mantine/core',
+ slug: '/core/simple-grid',
+ props: ['SimpleGrid'],
+ styles: ['SimpleGrid'],
+ description: 'Responsive grid in which each item takes equal amount of space',
+ import: "import { SimpleGrid } from '@mantine/core';",
+ source: 'mantine-core/src/components/SimpleGrid/SimpleGrid.tsx',
+ docs: 'core/simple-grid.mdx',
+ },
+
+ Grid: {
+ title: 'Grid',
+ package: '@mantine/core',
+ slug: '/core/grid',
+ props: ['Grid', 'GridCol'],
+ styles: ['Grid'],
+ componentPrefix: 'Grid',
+ description: 'Responsive grid system',
+ import: "import { Grid } from '@mantine/core';",
+ source: 'mantine-core/src/components/Grid/Grid.tsx',
+ docs: 'core/grid.mdx',
+ },
+
+ HoverCard: {
+ title: 'HoverCard',
+ package: '@mantine/core',
+ slug: '/core/hover-card',
+ props: ['HoverCard', 'HoverCardTarget'],
+ styles: ['HoverCard'],
+ componentPrefix: 'HoverCard',
+ description: 'Display popover section when target element is hovered',
+ import: "import { HoverCard } from '@mantine/core';",
+ source: 'mantine-core/src/components/HoverCard/HoverCard.tsx',
+ docs: 'core/hover-card.mdx',
+ },
+
+ Menu: {
+ title: 'Menu',
+ package: '@mantine/core',
+ slug: '/core/menu',
+ props: ['Menu', 'MenuTarget', 'MenuItem'],
+ styles: ['Menu'],
+ componentPrefix: 'Menu',
+ description: 'Combine a list of secondary actions into single interactive area',
+ import: "import { Menu } from '@mantine/core';",
+ source: 'mantine-core/src/components/Menu/Menu.tsx',
+ docs: 'core/menu.mdx',
+ },
+
+ Progress: {
+ title: 'Progress',
+ package: '@mantine/core',
+ slug: '/core/progress',
+ props: ['Progress', 'ProgressRoot', 'ProgressSection'],
+ styles: ['Progress'],
+ componentPrefix: 'Progress',
+ description: 'Give user feedback for status of the task',
+ import: "import { Progress } from '@mantine/core';",
+ source: 'mantine-core/src/components/Progress/Progress.tsx',
+ docs: 'core/progress.mdx',
+ },
+
+ RingProgress: {
+ title: 'RingProgress',
+ package: '@mantine/core',
+ slug: '/core/ring-progress',
+ props: ['RingProgress'],
+ styles: ['RingProgress'],
+ description: 'Give user feedback for status of the task with circle diagram',
+ import: "import { RingProgress } from '@mantine/core';",
+ source: 'mantine-core/src/components/RingProgress/RingProgress.tsx',
+ docs: 'core/ring-progress.mdx',
+ },
+
+ Chip: {
+ title: 'Chip',
+ package: '@mantine/core',
+ slug: '/core/chip',
+ props: ['Chip', 'ChipGroup'],
+ styles: ['Chip'],
+ componentPrefix: 'Chip',
+ description: 'Pick one or multiple values with inline controls',
+ import: "import { Chip } from '@mantine/core';",
+ source: 'mantine-core/src/components/Chip/Chip.tsx',
+ docs: 'core/chip.mdx',
+ },
+
+ PinInput: {
+ title: 'PinInput',
+ package: '@mantine/core',
+ slug: '/core/pin-input',
+ props: ['PinInput'],
+ styles: ['PinInput'],
+ description: 'Capture pin code or one time password from the user',
+ import: "import { PinInput } from '@mantine/core';",
+ source: 'mantine-core/src/components/PinInput/PinInput.tsx',
+ docs: 'core/pin-input.mdx',
+ },
+
+ Rating: {
+ title: 'Rating',
+ package: '@mantine/core',
+ slug: '/core/rating',
+ props: ['Rating'],
+ styles: ['Rating'],
+ description: 'Pick and display rating',
+ import: "import { Rating } from '@mantine/core';",
+ source: 'mantine-core/src/components/Rating/Rating.tsx',
+ docs: 'core/rating.mdx',
+ },
+
+ Space: {
+ title: 'Space',
+ package: '@mantine/core',
+ slug: '/core/space',
+ description: 'Add horizontal or vertical spacing from theme',
+ import: "import { Space } from '@mantine/core';",
+ source: 'mantine-core/src/components/Space/Space.tsx',
+ docs: 'core/space.mdx',
+ },
+
+ Indicator: {
+ title: 'Indicator',
+ package: '@mantine/core',
+ slug: '/core/indicator',
+ props: ['Indicator'],
+ styles: ['Indicator'],
+ description: 'Display element at the corner of another element',
+ import: "import { Indicator } from '@mantine/core';",
+ source: 'mantine-core/src/components/Indicator/Indicator.tsx',
+ docs: 'core/indicator.mdx',
+ },
+
+ Textarea: {
+ title: 'Textarea',
+ package: '@mantine/core',
+ slug: '/core/textarea',
+ props: ['Textarea'],
+ styles: ['Textarea'],
+ description: 'Autosize or regular textarea',
+ import: "import { Textarea } from '@mantine/core';",
+ source: 'mantine-core/src/components/Textarea/Textarea.tsx',
+ docs: 'core/textarea.mdx',
+ },
+
+ JsonInput: {
+ title: 'JsonInput',
+ package: '@mantine/core',
+ slug: '/core/json-input',
+ props: ['JsonInput'],
+ styles: ['JsonInput'],
+ description: 'Capture json data from user',
+ import: "import { JsonInput } from '@mantine/core';",
+ source: 'mantine-core/src/components/JsonInput/JsonInput.tsx',
+ docs: 'core/json-input.mdx',
+ },
+
+ Image: {
+ title: 'Image',
+ package: '@mantine/core',
+ slug: '/core/image',
+ props: ['Image'],
+ styles: ['Image'],
+ polymorphic: true,
+ description: 'Image with optional fallback',
+ import: "import { Image } from '@mantine/core';",
+ source: 'mantine-core/src/components/Image/Image.tsx',
+ docs: 'core/image.mdx',
+ },
+
+ Card: {
+ title: 'Card',
+ package: '@mantine/core',
+ slug: '/core/card',
+ props: ['Card', 'CardSection'],
+ styles: ['Card'],
+ componentPrefix: 'Card',
+ description: 'Card with sections',
+ import: "import { Card } from '@mantine/core';",
+ source: 'mantine-core/src/components/Card/Card.tsx',
+ docs: 'core/card.mdx',
+ },
+
+ PasswordInput: {
+ title: 'PasswordInput',
+ package: '@mantine/core',
+ slug: '/core/password-input',
+ props: ['PasswordInput'],
+ styles: ['PasswordInput'],
+ description: 'Capture password data from user',
+ import: "import { PasswordInput } from '@mantine/core';",
+ source: 'mantine-core/src/components/PasswordInput/PasswordInput.tsx',
+ docs: 'core/password-input.mdx',
+ },
+
+ FileInput: {
+ title: 'FileInput',
+ package: '@mantine/core',
+ slug: '/core/file-input',
+ props: ['FileInput'],
+ styles: ['FileInput'],
+ description: 'Capture files from user',
+ import: "import { FileInput } from '@mantine/core';",
+ source: 'mantine-core/src/components/FileInput/FileInput.tsx',
+ docs: 'core/file-input.mdx',
+ },
+
+ Stepper: {
+ title: 'Stepper',
+ package: '@mantine/core',
+ slug: '/core/stepper',
+ props: ['Stepper', 'StepperStep'],
+ styles: ['Stepper'],
+ componentPrefix: 'Stepper',
+ description: 'Display content divided into a steps sequence',
+ import: "import { Stepper } from '@mantine/core';",
+ source: 'mantine-core/src/components/Stepper/Stepper.tsx',
+ docs: 'core/stepper.mdx',
+ },
+
+ ColorInput: {
+ title: 'ColorInput',
+ package: '@mantine/core',
+ slug: '/core/color-input',
+ props: ['ColorInput'],
+ styles: ['ColorInput'],
+ description: 'Capture color from user',
+ import: "import { ColorInput } from '@mantine/core';",
+ source: 'mantine-core/src/components/ColorInput/ColorInput.tsx',
+ docs: 'core/color-input.mdx',
+ },
+
+ ThemeIcon: {
+ title: 'ThemeIcon',
+ package: '@mantine/core',
+ slug: '/core/theme-icon',
+ props: ['ThemeIcon'],
+ styles: ['ThemeIcon'],
+ description: 'Render icon inside element with theme colors',
+ import: "import { ThemeIcon } from '@mantine/core';",
+ source: 'mantine-core/src/components/ThemeIcon/ThemeIcon.tsx',
+ docs: 'core/theme-icon.mdx',
+ },
+
+ NumberInput: {
+ title: 'NumberInput',
+ package: '@mantine/core',
+ slug: '/core/number-input',
+ props: ['NumberInput'],
+ styles: ['NumberInput'],
+ description: 'Capture number from user',
+ import: "import { NumberInput } from '@mantine/core';",
+ source: 'mantine-core/src/components/NumberInput/NumberInput.tsx',
+ docs: 'core/number-input.mdx',
+ },
+ LoadingOverlay: {
+ title: 'LoadingOverlay',
+ package: '@mantine/core',
+ slug: '/core/loading-overlay',
+ props: ['LoadingOverlay'],
+ styles: ['LoadingOverlay'],
+ description: 'An overlay with centered loader',
+ import: "import { LoadingOverlay } from '@mantine/core';",
+ source: 'mantine-core/src/components/LoadingOverlay/LoadingOverlay.tsx',
+ docs: 'core/loading-overlay.mdx',
+ },
+
+ Radio: {
+ title: 'Radio',
+ package: '@mantine/core',
+ slug: '/core/radio',
+ componentPrefix: 'Radio',
+ props: ['Radio', 'RadioGroup'],
+ styles: ['Radio', 'RadioGroup'],
+ description: 'Wrapper for input type radio',
+ import: "import { Radio } from '@mantine/core';",
+ source: 'mantine-core/src/components/Radio/Radio.tsx',
+ docs: 'core/radio.mdx',
+ },
+
+ Timeline: {
+ title: 'Timeline',
+ package: '@mantine/core',
+ slug: '/core/timeline',
+ componentPrefix: 'Timeline',
+ props: ['Timeline', 'TimelineItem'],
+ styles: ['Timeline'],
+ description: 'Display list of events in chronological order',
+ import: "import { Timeline } from '@mantine/core';",
+ source: 'mantine-core/src/components/Timeline/Timeline.tsx',
+ docs: 'core/timeline.mdx',
+ },
+
+ Dialog: {
+ title: 'Dialog',
+ package: '@mantine/core',
+ slug: '/core/dialog',
+ props: ['Dialog'],
+ styles: ['Dialog'],
+ description: 'Display a fixed overlay dialog at any side of the screen',
+ import: "import { Dialog } from '@mantine/core';",
+ source: 'mantine-core/src/components/Dialog/Dialog.tsx',
+ docs: 'core/dialog.mdx',
+ },
+
+ Flex: {
+ title: 'Flex',
+ package: '@mantine/core',
+ slug: '/core/flex',
+ props: ['Flex'],
+ styles: ['Flex'],
+ description: 'Compose elements in a flex container',
+ import: "import { Flex } from '@mantine/core';",
+ source: 'mantine-core/src/components/Flex/Flex.tsx',
+ docs: 'core/flex.mdx',
+ },
+
+ List: {
+ title: 'List',
+ package: '@mantine/core',
+ slug: '/core/list',
+ componentPrefix: 'List',
+ props: ['List', 'ListItem'],
+ styles: ['List'],
+ description: 'Display ordered or unordered list',
+ import: "import { List } from '@mantine/core';",
+ source: 'mantine-core/src/components/List/List.tsx',
+ docs: 'core/list.mdx',
+ },
+
+ Spoiler: {
+ title: 'Spoiler',
+ package: '@mantine/core',
+ slug: '/core/spoiler',
+ props: ['Spoiler'],
+ styles: ['Spoiler'],
+ description: 'Hide long sections of content under a spoiler',
+ import: "import { Spoiler } from '@mantine/core';",
+ source: 'mantine-core/src/components/Spoiler/Spoiler.tsx',
+ docs: 'core/spoiler.mdx',
+ },
+
+ NavLink: {
+ title: 'NavLink',
+ package: '@mantine/core',
+ slug: '/core/nav-link',
+ props: ['NavLink'],
+ styles: ['NavLink'],
+ description: 'Navigation link',
+ import: "import { NavLink } from '@mantine/core';",
+ source: 'mantine-core/src/components/NavLink/NavLink.tsx',
+ docs: 'core/nav-link.mdx',
+ },
+};
diff --git a/docs/mdx/data/mdx-dates-data.ts b/docs/mdx/data/mdx-dates-data.ts
new file mode 100644
index 00000000000..0f26280ad10
--- /dev/null
+++ b/docs/mdx/data/mdx-dates-data.ts
@@ -0,0 +1,142 @@
+import { Frontmatter } from '@/types';
+
+export const MDX_DATES_DATA: Record = {
+ GettingStartedDates: {
+ title: 'Getting started',
+ package: '@mantine/dates',
+ license: 'MIT',
+ slug: '/dates/getting-started',
+ docs: 'dates/getting-started.mdx',
+ hideInSearch: true,
+ },
+
+ Calendar: {
+ title: 'Calendar',
+ package: '@mantine/dates',
+ slug: '/dates/calendar',
+ description: 'Base component for custom date pickers',
+ props: ['Calendar'],
+ styles: ['Calendar'],
+ import: "import { Calendar } from '@mantine/dates';",
+ source: 'mantine-dates/src/components/Calendar/Calendar.tsx',
+ docs: 'dates/calendar.mdx',
+ },
+
+ DateInput: {
+ title: 'DateInput',
+ package: '@mantine/dates',
+ slug: '/dates/date-input',
+ description: 'Free form date input',
+ props: ['DateInput'],
+ styles: ['DateInput'],
+ import: "import { DateInput } from '@mantine/dates';",
+ source: 'mantine-dates/src/components/DateInput/DateInput.tsx',
+ docs: 'dates/date-input.mdx',
+ },
+
+ DatePicker: {
+ title: 'DatePicker',
+ package: '@mantine/dates',
+ slug: '/dates/date-picker',
+ description: 'Inline date, multiple dates and dates range picker',
+ props: ['DatePicker'],
+ styles: ['DatePicker'],
+ import: "import { DatePicker } from '@mantine/dates';",
+ source: 'mantine-dates/src/components/DatePicker/DatePicker.tsx',
+ docs: 'dates/date-picker.mdx',
+ },
+
+ DatePickerInput: {
+ title: 'DatePickerInput',
+ package: '@mantine/dates',
+ slug: '/dates/date-picker-input',
+ description: 'Date, multiple dates and dates range picker input',
+ props: ['DatePickerInput'],
+ styles: ['DatePickerInput'],
+ import: "import { DatePickerInput } from '@mantine/dates';",
+ source: 'mantine-dates/src/components/DatePickerInput/DatePickerInput.tsx',
+ docs: 'dates/date-picker-input.mdx',
+ },
+
+ DatesProvider: {
+ title: 'DatesProvider',
+ package: '@mantine/dates',
+ slug: '/dates/dates-provider',
+ description: 'Settings provider for @mantine/dates components',
+ import: "import { DatesProvider } from '@mantine/dates';",
+ source: 'mantine-dates/src/components/DatesProvider/DatesProvider.tsx',
+ docs: 'dates/dates-provider.mdx',
+ },
+
+ DateTimePicker: {
+ title: 'DateTimePicker',
+ package: '@mantine/dates',
+ slug: '/dates/date-time-picker',
+ props: ['DateTimePicker'],
+ styles: ['DateTimePicker'],
+ description: 'Capture datetime from the user',
+ import: "import { DateTimePicker } from '@mantine/dates';",
+ source: 'mantine-dates/src/components/DateTimePicker/DateTimePicker.tsx',
+ docs: 'dates/date-time-picker.mdx',
+ },
+
+ MonthPicker: {
+ title: 'MonthPicker',
+ package: '@mantine/dates',
+ slug: '/dates/month-picker',
+ props: ['MonthPicker'],
+ styles: ['MonthPicker'],
+ description: 'Inline month, multiple months and months range picker',
+ import: "import { MonthPicker } from '@mantine/dates';",
+ source: 'mantine-dates/src/components/MonthPicker/MonthPicker.tsx',
+ docs: 'dates/month-picker.mdx',
+ },
+
+ MonthPickerInput: {
+ title: 'MonthPickerInput',
+ package: '@mantine/dates',
+ slug: '/dates/month-picker-input',
+ props: ['MonthPickerInput'],
+ styles: ['MonthPickerInput'],
+ description: 'Month, multiple months and months range picker input',
+ import: "import { MonthPickerInput } from '@mantine/dates';",
+ source: 'mantine-dates/src/components/MonthPickerInput/MonthPickerInput.tsx',
+ docs: 'dates/month-picker-input.mdx',
+ },
+
+ TimeInput: {
+ title: 'TimeInput',
+ package: '@mantine/dates',
+ slug: '/dates/time-input',
+ props: ['TimeInput'],
+ styles: ['TimeInput'],
+ description: 'Capture time from the user',
+ import: "import { TimeInput } from '@mantine/dates';",
+ source: 'mantine-dates/src/components/TimeInput/TimeInput.tsx',
+ docs: 'dates/time-input.mdx',
+ },
+
+ YearPicker: {
+ title: 'YearPicker',
+ package: '@mantine/dates',
+ slug: '/dates/year-picker',
+ props: ['YearPicker'],
+ styles: ['YearPicker'],
+ description: 'Inline year, multiple years and years range picker',
+ import: "import { YearPicker } from '@mantine/dates';",
+ source: 'mantine-dates/src/components/YearPicker/YearPicker.tsx',
+ docs: 'dates/year-picker.mdx',
+ },
+
+ YearPickerInput: {
+ title: 'YearPickerInput',
+ package: '@mantine/dates',
+ slug: '/dates/year-picker-input',
+ props: ['YearPickerInput'],
+ styles: ['YearPickerInput'],
+ description: 'Inline year, multiple years and years range picker',
+ import: "import { YearPickerInput } from '@mantine/dates';",
+ source: 'mantine-dates/src/components/YearPickerInput/YearPickerInput.tsx',
+ docs: 'dates/year-picker-input.mdx',
+ },
+};
diff --git a/docs/mdx/data/mdx-form-data.ts b/docs/mdx/data/mdx-form-data.ts
new file mode 100644
index 00000000000..1ae6ee74b61
--- /dev/null
+++ b/docs/mdx/data/mdx-form-data.ts
@@ -0,0 +1,77 @@
+import { Frontmatter } from '@/types';
+
+export const MDX_FORM_DATA: Record = {
+ useForm: {
+ title: 'use-form',
+ package: '@mantine/form',
+ slug: '/form/use-form',
+ description: 'Manage form state',
+ source: 'mantine-form/src',
+ license: 'MIT',
+ docs: 'form/use-form.mdx',
+ },
+
+ createFormContext: {
+ title: 'Form context',
+ package: '@mantine/form',
+ slug: '/form/create-form-context',
+ description: 'Add context support to use-form with createFormContext',
+ docs: 'form/use-form.mdx',
+ },
+
+ formErrors: {
+ title: 'Form errors',
+ package: '@mantine/form',
+ slug: '/form/errors',
+ description: 'Manipulate form errors with use-form hook',
+ docs: 'form/errors.mdx',
+ },
+
+ formNested: {
+ title: 'Nested fields',
+ package: '@mantine/form',
+ slug: '/form/nested',
+ description: 'Manage nested arrays and object state with use-form hook',
+ docs: 'form/nested.mdx',
+ },
+
+ formRecipes: {
+ title: 'Recipes',
+ package: '@mantine/form',
+ slug: '/form/recipes',
+ description: 'use-form examples',
+ docs: 'form/recipes.mdx',
+ },
+
+ formStatus: {
+ title: 'Touched & dirty',
+ package: '@mantine/form',
+ slug: '/form/status',
+ description: 'Get fields and form touched and dirty status',
+ docs: 'form/status.mdx',
+ },
+
+ formValidation: {
+ title: 'Form validation',
+ package: '@mantine/form',
+ slug: '/form/validation',
+ description: 'Validate fields with use-form hook',
+ docs: 'form/validation.mdx',
+ },
+
+ formValidators: {
+ title: 'Form validators',
+ package: '@mantine/form',
+ slug: '/form/validators',
+ description: 'Premade validation functions',
+ docs: 'form/validators.mdx',
+ },
+
+ formValues: {
+ title: 'Form values',
+ package: '@mantine/form',
+ slug: '/form/values',
+ description: 'Manipulate form values with use-form',
+ docs: 'form/values.mdx',
+ },
+};
diff --git a/docs/mdx/data/mdx-guides-data.ts b/docs/mdx/data/mdx-guides-data.ts
new file mode 100644
index 00000000000..9355d375760
--- /dev/null
+++ b/docs/mdx/data/mdx-guides-data.ts
@@ -0,0 +1,87 @@
+import { Frontmatter } from '@/types';
+
+export const MDX_GUIDES_DATA: Record = {
+ Polymorphic: {
+ title: 'Polymorphic components',
+ slug: '/guides/polymorphic',
+ search: 'createPolymorphicComponent, change root element, component prop',
+ hideHeader: true,
+ },
+
+ NextJs: {
+ title: 'Usage with Next.js',
+ slug: '/guides/next',
+ search: 'Get started with Next.js',
+ hideHeader: true,
+ },
+
+ Vite: {
+ title: 'Usage with Vite',
+ slug: '/guides/vite',
+ search: 'Get started with Vite',
+ hideHeader: true,
+ },
+
+ Remix: {
+ title: 'Usage with Remix',
+ slug: '/guides/remix',
+ search: 'Get started with Remix',
+ hideHeader: true,
+ },
+
+ Gatsby: {
+ title: 'Usage with Gatsby',
+ slug: '/guides/gatsby',
+ search: 'Get started with Gatsby',
+ hideHeader: true,
+ },
+
+ Redwood: {
+ title: 'Usage with Redwood',
+ slug: '/guides/redwood',
+ search: 'Get started with Redwood',
+ hideHeader: true,
+ },
+
+ Storybook: {
+ title: 'Usage with Storybook',
+ slug: '/guides/storybook',
+ search: 'Setup Mantine with Storybook',
+ hideHeader: true,
+ },
+
+ TypeScript: {
+ title: 'Usage with TypeScript',
+ slug: '/guides/typescript',
+ search: 'Usage with TypeScript',
+ hideHeader: true,
+ },
+
+ JavaScript: {
+ title: 'Usage with JavaScript',
+ slug: '/guides/javascript',
+ search: 'Usage with JavaScript',
+ hideHeader: true,
+ },
+
+ Icons: {
+ title: 'Icons libraries',
+ slug: '/guides/icons',
+ search: 'Usage of icons libraries with Mantine',
+ hideHeader: true,
+ },
+
+ Jest: {
+ title: 'Testing with Jest',
+ slug: '/guides/jest',
+ search: 'Testing with Jest and React Testing Library',
+ hideHeader: true,
+ },
+
+ SixToSeven: {
+ title: '6.x to 7.x migration',
+ slug: '/guides/6x-to-7x',
+ search: 'Styles migration guide from 6.x to 7.x',
+ hideHeader: true,
+ },
+};
diff --git a/docs/mdx/data/mdx-hooks-data.ts b/docs/mdx/data/mdx-hooks-data.ts
new file mode 100644
index 00000000000..df3bc348ec0
--- /dev/null
+++ b/docs/mdx/data/mdx-hooks-data.ts
@@ -0,0 +1,131 @@
+import { Frontmatter } from '@/types';
+
+function hDocs(hook: string, description: string): Frontmatter {
+ const name = hook.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+ return {
+ title: name,
+ package: '@mantine/hooks',
+ slug: `/hooks/${name}`,
+ description,
+ import: `import { ${hook} } from '@mantine/hooks';`,
+ source: `mantine-hooks/src/${name}/${name}.ts`,
+ docs: `hooks/${name}.mdx`,
+ };
+}
+
+export const MDX_HOOKS_DATA: Record = {
+ useClickOutside: hDocs(
+ 'useClickOutside',
+ 'Detects click and touch events outside of given element'
+ ),
+
+ useClipboard: hDocs('useClipboard', 'Wrapper around navigator.clipboard with feedback timeout'),
+
+ useColorScheme: hDocs(
+ 'useColorScheme',
+ 'Detects user system color scheme with window.matchMedia API'
+ ),
+
+ useCounter: hDocs('useCounter', 'Increments/decrements state within given boundaries'),
+ useDebouncedState: hDocs('useDebouncedState', 'Debounces value changes'),
+ useDebouncedValue: hDocs('useDebouncedValue', 'Debounces value changes'),
+
+ useDidUpdate: hDocs(
+ 'useDidUpdate',
+ 'Calls function in useEffect when value changes, but not when component mounts'
+ ),
+
+ useDisclosure: hDocs('useDisclosure', 'Manages boolean state and provides controls to toggle it'),
+ useDocumentTitle: hDocs('useDocumentTitle', 'Sets document.title to given string'),
+ useDocumentVisibility: hDocs('useDocumentVisibility', 'Detects if current tab is active'),
+
+ useElementSize: hDocs(
+ 'useElementSize',
+ 'Returns element width and height and subscribe to changes'
+ ),
+
+ useEventListener: hDocs('useEventListener', 'Subscribes to events with a ref'),
+ useEyeDropper: hDocs('useEyeDropper', 'Pick color from any pixel on the screen'),
+ useFavicon: hDocs('useFavicon', 'Changes favicon'),
+
+ useFocusReturn: hDocs(
+ 'useFocusReturn',
+ 'Captures last focused element on the page and returns focus to it once the condition is met'
+ ),
+
+ useFocusTrap: hDocs('useFocusTrap', 'Traps focus inside given node'),
+ useFocusWithin: hDocs('useFocusWithin', 'Detects if any element within other element has focus'),
+ useForceUpdate: hDocs('useForceUpdate', 'Force component to rerender without state change'),
+ useFullscreen: hDocs('useFullscreen', 'Enter/exit fullscreen mode'),
+ useHash: hDocs('useHash', 'Get and set hash value in url'),
+
+ useHeadroom: hDocs(
+ 'useHeadroom',
+ 'Create headers that are hidden after user scrolls past given distance'
+ ),
+
+ useHotkeys: hDocs('useHotkeys', 'Listen for keys combinations on document element'),
+ useHover: hDocs('useHover', 'Detects if element is hovered'),
+ useId: hDocs('useId', 'Generates memoized random id'),
+ useIdle: hDocs('useIdle', 'Detects if user does nothing on page'),
+ useInputState: hDocs('useInputState', 'Manages input state'),
+ useIntersection: hDocs('useIntersection', 'Detects if element is visible in viewport'),
+ useInterval: hDocs('useInterval', 'Calls function in given interval'),
+
+ useIsomorphicEffect: hDocs(
+ 'useIsomorphicEffect',
+ 'useLayoutEffect that does not show warning when used in SSR'
+ ),
+
+ useListState: hDocs('useListState', 'Manages array state'),
+
+ useLocalStorage: hDocs(
+ 'useLocalStorage',
+ 'Use localStorage value as react state, sync state across opened tabs'
+ ),
+
+ useLogger: hDocs('useLogger', 'Log given values to console when component renders'),
+ useMediaQuery: hDocs('useMediaQuery', 'Subscribes to media queries with window.matchMedia'),
+ useMergedRef: hDocs('useMergedRef', 'Merges multiple refs into one'),
+ useMouse: hDocs('useMouse', 'Tracks mouse position over the viewport or given element'),
+
+ useMove: hDocs(
+ 'useMove',
+ 'Handles move behavior over any element, use to build custom sliders, color pickers, etc.'
+ ),
+
+ useNetwork: hDocs('useNetwork', 'Returns current connection status'),
+ useOs: hDocs('useOs', 'Detects user operating system'),
+ usePageLeave: hDocs('usePageLeave', 'Calls given function when mouse leaves the page'),
+ usePrevious: hDocs('usePrevious', 'Returns previous value of given state'),
+ useQueue: hDocs('useQueue', 'Manages queue of values'),
+ useReducedMotion: hDocs('useReducedMotion', 'Detects if user prefers reduced motion'),
+ useResizeObserver: hDocs('useResizeObserver', 'Tracks element size and position changes'),
+ useScrollIntoView: hDocs('useScrollIntoView', 'Scrolls element into view'),
+ useSetState: hDocs('useSetState', 'Manages state with setState-like API'),
+
+ useShallowEffect: hDocs(
+ 'useShallowEffect',
+ 'useEffect drop in replacement with dependencies shallow comparison'
+ ),
+
+ useTextSelection: hDocs('useTextSelection', 'Returns current selected text on the page'),
+ useTimeout: hDocs('useTimeout', 'Calls function in given timeout'),
+ useToggle: hDocs('useToggle', 'Switch between given values'),
+
+ useUncontrolled: hDocs(
+ 'useUncontrolled',
+ 'Manage state of both controlled and uncontrolled components'
+ ),
+
+ useValidatedState: hDocs('useValidatedState', 'Manages state with validation'),
+ useViewportSize: hDocs('useViewportSize', 'Returns current viewport size'),
+
+ useWindowEvent: hDocs(
+ 'useWindowEvent',
+ 'Adds event listener to window on component mount and removes it on unmount'
+ ),
+
+ useWindowScroll: hDocs('useWindowScroll', 'Tracks window scroll position'),
+ usePagination: hDocs('usePagination', 'Manages pagination state'),
+};
diff --git a/docs/mdx/data/mdx-meta-data.ts b/docs/mdx/data/mdx-meta-data.ts
new file mode 100644
index 00000000000..faff7a85978
--- /dev/null
+++ b/docs/mdx/data/mdx-meta-data.ts
@@ -0,0 +1,64 @@
+import { Frontmatter } from '@/types';
+
+export const MDX_META_DATA: Record = {
+ NotFound: {
+ title: '404',
+ slug: '/404',
+ hideHeader: true,
+ hideInSearch: true,
+ hideSiblings: true,
+ },
+
+ About: {
+ title: 'About Mantine',
+ slug: '/about',
+ search: 'Browser support, releases cycle, previous versions documentation',
+ hideSiblings: true,
+ hideHeader: true,
+ },
+
+ GettingStarted: {
+ title: 'Getting started',
+ slug: '/getting-started',
+ hideInSearch: true,
+ hideSiblings: true,
+ hideHeader: true,
+ },
+
+ TemplatesUsage: {
+ title: 'Getting started with a template',
+ slug: '/templates-usage',
+ hideInSearch: true,
+ hideSiblings: true,
+ hideHeader: true,
+ },
+
+ Overview: {
+ title: 'Mantine API overview',
+ slug: '/overview',
+ search: 'Overview of Mantine components API',
+ hideSiblings: true,
+ hideHeader: true,
+ },
+
+ Contribute: {
+ title: 'Contributing to Mantine',
+ slug: '/contribute',
+ search: 'Learn how to contribute to Mantine',
+ hideSiblings: true,
+ hideHeader: true,
+ },
+
+ Changelog700: {
+ title: 'Version v7.0.0',
+ slug: '/changelog/7-0-0',
+ release: 'https://github.com/mantinedev/mantine/releases/tag/7.0.0',
+ date: 'Some time this year',
+ },
+
+ PreviousChangelogs: {
+ title: 'Previous versions',
+ slug: '/changelog/previous-versions',
+ hideHeader: true,
+ },
+};
diff --git a/docs/mdx/data/mdx-others-data.ts b/docs/mdx/data/mdx-others-data.ts
new file mode 100644
index 00000000000..589cb1390cb
--- /dev/null
+++ b/docs/mdx/data/mdx-others-data.ts
@@ -0,0 +1,103 @@
+import { Frontmatter } from '@/types';
+
+export const MDX_OTHERS_DATA: Record = {
+ Notifications: {
+ title: 'Notifications system',
+ package: '@mantine/notifications',
+ slug: '/others/notifications',
+ props: ['Notifications'],
+ styles: ['Notifications'],
+ description: 'Mantine notifications system',
+ source: 'mantine-notifications/src',
+ license: 'MIT',
+ docs: 'others/notifications.mdx',
+ },
+
+ Spotlight: {
+ title: 'Spotlight',
+ package: '@mantine/spotlight',
+ slug: '/others/spotlight',
+ props: [
+ 'Spotlight',
+ 'SpotlightRoot',
+ 'SpotlightAction',
+ 'SpotlightActionsGroup',
+ 'SpotlightSearch',
+ ],
+ styles: ['Spotlight'],
+ description: 'Command center for your application',
+ source: 'mantine-spotlight/src',
+ license: 'MIT',
+ docs: 'others/spotlight.mdx',
+ },
+
+ Carousel: {
+ title: 'Carousel',
+ package: '@mantine/carousel',
+ slug: '/others/carousel',
+ props: ['Carousel'],
+ styles: ['Carousel'],
+ description: 'Embla based carousel component',
+ source: 'mantine-carousel/src',
+ license: 'MIT',
+ docs: 'others/carousel.mdx',
+ },
+
+ Dropzone: {
+ title: 'Dropzone',
+ package: '@mantine/dropzone',
+ slug: '/others/dropzone',
+ props: ['Dropzone'],
+ styles: ['Dropzone'],
+ description: 'Capture files from user with drag and drop',
+ source: 'mantine-dropzone/src',
+ license: 'MIT',
+ docs: 'others/dropzone.mdx',
+ },
+
+ Nprogress: {
+ title: 'NavigationProgress',
+ package: '@mantine/nprogress',
+ slug: '/others/nprogress',
+ props: ['NavigationProgress'],
+ description: 'Navigation progress bar',
+ source: 'mantine-nprogress/src',
+ license: 'MIT',
+ docs: 'others/nprogress.mdx',
+ },
+
+ CodeHighlight: {
+ title: 'CodeHighlight',
+ package: '@mantine/code-highlight',
+ slug: '/others/code-highlight',
+ props: ['CodeHighlight', 'CodeHighlightTabs', 'InlineCodeHighlight'],
+ styles: ['CodeHighlight', 'CodeHighlightTabs', 'InlineCodeHighlight'],
+ description: 'Highlight code with highlight.js',
+ source: 'mantine-code-highlight/src',
+ license: 'MIT',
+ docs: 'others/code-highlight.mdx',
+ },
+
+ Modals: {
+ title: 'Modals manager',
+ package: '@mantine/modals',
+ slug: '/others/modals',
+ props: ['ModalsProvider'],
+ description: 'Centralized modals manager with option to handle state of multi-step modals',
+ source: 'mantine-modals/src',
+ license: 'MIT',
+ docs: 'others/modals.mdx',
+ },
+
+ TipTap: {
+ title: 'Rich text editor',
+ package: '@mantine/tiptap',
+ slug: '/others/tiptap',
+ props: ['RichTextEditor'],
+ styles: ['RichTextEditor'],
+ description: 'Tiptap based rich text editor',
+ source: 'mantine-tiptap/src',
+ license: 'MIT',
+ docs: 'others/tiptap.mdx',
+ },
+};
diff --git a/docs/mdx/data/mdx-styles-data.ts b/docs/mdx/data/mdx-styles-data.ts
new file mode 100644
index 00000000000..05ab041c78a
--- /dev/null
+++ b/docs/mdx/data/mdx-styles-data.ts
@@ -0,0 +1,122 @@
+import { Frontmatter } from '@/types';
+
+export const MDX_STYLES_DATA: Record = {
+ CSSModules: {
+ title: 'CSS modules',
+ slug: '/styles/css-modules',
+ search: 'Get started with CSS modules',
+ hideHeader: true,
+ },
+
+ VanillaExtract: {
+ title: 'Vanilla extract',
+ slug: '/styles/vanilla-extract',
+ search: 'Mantine + Vanilla extract integration',
+ hideHeader: true,
+ },
+
+ PostCSSPreset: {
+ title: 'PostCSS preset',
+ slug: '/styles/postcss-preset',
+ search: 'postcss-preset-mantine, mixins, CSS functions',
+ hideHeader: true,
+ },
+
+ GlobalStyles: {
+ title: 'Global styles',
+ slug: '/styles/global-styles',
+ search: 'Global styles that are required for Mantine components to work properly',
+ hideHeader: true,
+ },
+
+ CssVariables: {
+ title: 'CSS variables',
+ slug: '/styles/css-variables',
+ search: 'Mantine CSS variables and resolvers',
+ hideHeader: true,
+ },
+
+ CSSVariablesList: {
+ title: 'CSS variables list',
+ slug: '/styles/css-variables-list',
+ hideSiblings: true,
+ hideHeader: true,
+ },
+
+ CSSFilesList: {
+ title: 'CSS files list',
+ slug: '/styles/css-files-list',
+ hideSiblings: true,
+ hideHeader: true,
+ },
+
+ Rem: {
+ title: 'rem, em and px units',
+ slug: '/styles/rem',
+ search: 'rem and em units with Mantine components, units conversion',
+ hideHeader: true,
+ },
+
+ StyleProp: {
+ title: 'style prop',
+ slug: '/styles/style',
+ search: 'style prop usage',
+ hideHeader: true,
+ },
+
+ ResponsiveStyles: {
+ title: 'Responsive styles',
+ slug: '/styles/responsive',
+ search: 'Media queries, breakpoints, inline responsive styles',
+ hideHeader: true,
+ },
+
+ StylesApi: {
+ title: 'Styles API',
+ slug: '/styles/styles-api',
+ search: 'classNames, styles and unstyled props',
+ hideHeader: true,
+ },
+
+ DataAttributes: {
+ title: 'data-* attributes',
+ slug: '/styles/data-attributes',
+ search: 'Usage of data-* attributes to apply styles',
+ hideHeader: true,
+ },
+
+ VariantsAndSizes: {
+ title: 'Variants and sizes',
+ slug: '/styles/variants-sizes',
+ search: 'Customize components sizes and variants',
+ hideHeader: true,
+ },
+
+ StyleProps: {
+ title: 'Style props',
+ slug: '/styles/style-props',
+ search: 'Props to add inline styles',
+ hideHeader: true,
+ },
+
+ Rtl: {
+ title: 'RTL (right-to-left)',
+ slug: '/styles/rtl',
+ search: 'Change text direction to right-to-left',
+ hideHeader: true,
+ },
+
+ StylesPerformance: {
+ title: 'Styles performance',
+ slug: '/styles/styles-performance',
+ search: 'Learn how to improve your styles performance',
+ hideHeader: true,
+ },
+
+ UnstyledComponents: {
+ title: 'Unstyled / headless',
+ slug: '/styles/unstyled',
+ search: 'Headless/unstyled components',
+ hideHeader: true,
+ },
+};
diff --git a/docs/mdx/data/mdx-theming-data.ts b/docs/mdx/data/mdx-theming-data.ts
new file mode 100644
index 00000000000..7ccc15bc9fd
--- /dev/null
+++ b/docs/mdx/data/mdx-theming-data.ts
@@ -0,0 +1,58 @@
+import { Frontmatter } from '@/types';
+
+export const MDX_THEMING_DATA: Record = {
+ MantineProvider: {
+ title: 'MantineProvider',
+ slug: '/theming/mantine-provider',
+ search: 'Theme context, CSS reset, CSS variables, context classes and styles',
+ hideHeader: true,
+ },
+
+ ThemeObject: {
+ title: 'Theme object',
+ slug: '/theming/theme-object',
+ search: 'use-mantine-theme, theme override, MantineTheme',
+ hideHeader: true,
+ },
+
+ ColorSchemes: {
+ title: 'Color schemes',
+ slug: '/theming/color-schemes',
+ search: 'use-mantine-color-scheme, color schemes management, data-mantine-color-scheme',
+ hideHeader: true,
+ },
+
+ Colors: {
+ title: 'Colors',
+ slug: '/theming/colors',
+ search: 'Default colors, primaryColor, primaryShade',
+ hideHeader: true,
+ },
+
+ ColorFunctions: {
+ title: 'Color functions',
+ slug: '/styles/color-functions',
+ search: 'Functions to manipulate colors, darken, lighten, parse',
+ hideHeader: true,
+ },
+
+ Typography: {
+ title: 'Typography',
+ slug: '/theming/typography',
+ search: 'Change fonts, @font-face',
+ hideHeader: true,
+ },
+
+ DefaultProps: {
+ title: 'Default props',
+ slug: '/theming/default-props',
+ search: 'Default props for components',
+ hideHeader: true,
+ },
+
+ DefaultTheme: {
+ title: 'Default theme',
+ slug: '/theming/default-theme',
+ hideHeader: true,
+ },
+};
diff --git a/docs/mdx/index.ts b/docs/mdx/index.ts
new file mode 100644
index 00000000000..ce6fbaf6969
--- /dev/null
+++ b/docs/mdx/index.ts
@@ -0,0 +1,2 @@
+export { MDX_PAGES_GROUPS, ALL_MDX_PAGES } from './mdx-pages-group';
+export { MDX_DATA } from './mdx-data';
diff --git a/docs/mdx/mdx-data.ts b/docs/mdx/mdx-data.ts
new file mode 100644
index 00000000000..ce5c6d1f517
--- /dev/null
+++ b/docs/mdx/mdx-data.ts
@@ -0,0 +1,22 @@
+import { Frontmatter } from '@/types';
+import { MDX_META_DATA } from './data/mdx-meta-data';
+import { MDX_THEMING_DATA } from './data/mdx-theming-data';
+import { MDX_STYLES_DATA } from './data/mdx-styles-data';
+import { MDX_GUIDES_DATA } from './data/mdx-guides-data';
+import { MDX_CORE_DATA } from './data/mdx-core-data';
+import { MDX_OTHERS_DATA } from './data/mdx-others-data';
+import { MDX_HOOKS_DATA } from './data/mdx-hooks-data';
+import { MDX_FORM_DATA } from './data/mdx-form-data';
+import { MDX_DATES_DATA } from './data/mdx-dates-data';
+
+export const MDX_DATA: Record = {
+ ...MDX_META_DATA,
+ ...MDX_THEMING_DATA,
+ ...MDX_STYLES_DATA,
+ ...MDX_GUIDES_DATA,
+ ...MDX_CORE_DATA,
+ ...MDX_HOOKS_DATA,
+ ...MDX_OTHERS_DATA,
+ ...MDX_FORM_DATA,
+ ...MDX_DATES_DATA,
+};
diff --git a/docs/mdx/mdx-pages-group.ts b/docs/mdx/mdx-pages-group.ts
new file mode 100644
index 00000000000..de837f72834
--- /dev/null
+++ b/docs/mdx/mdx-pages-group.ts
@@ -0,0 +1,349 @@
+import { Frontmatter, MdxPagesCategory, MdxPagesGroup } from '@/types';
+import { MDX_DATA } from './mdx-data';
+
+export const MDX_PAGES_GROUPS: MdxPagesGroup[] = [
+ {
+ group: 'theming',
+ pages: [
+ MDX_DATA.MantineProvider,
+ MDX_DATA.ThemeObject,
+ MDX_DATA.Colors,
+ MDX_DATA.ColorSchemes,
+ MDX_DATA.Typography,
+ MDX_DATA.DefaultProps,
+ ],
+ },
+ {
+ group: 'styles',
+ pages: [
+ MDX_DATA.CSSModules,
+ MDX_DATA.PostCSSPreset,
+ MDX_DATA.VanillaExtract,
+ MDX_DATA.GlobalStyles,
+ MDX_DATA.CssVariables,
+ MDX_DATA.Rem,
+ MDX_DATA.StyleProp,
+ MDX_DATA.ResponsiveStyles,
+ MDX_DATA.StylesApi,
+ MDX_DATA.DataAttributes,
+ MDX_DATA.VariantsAndSizes,
+ MDX_DATA.UnstyledComponents,
+ MDX_DATA.StyleProps,
+ MDX_DATA.ColorFunctions,
+ MDX_DATA.Rtl,
+ MDX_DATA.StylesPerformance,
+ ],
+ },
+ {
+ group: 'guides',
+ pages: [
+ MDX_DATA.Polymorphic,
+ MDX_DATA.Icons,
+ MDX_DATA.NextJs,
+ MDX_DATA.Vite,
+ MDX_DATA.Remix,
+ MDX_DATA.Gatsby,
+ MDX_DATA.Redwood,
+ MDX_DATA.Storybook,
+ MDX_DATA.TypeScript,
+ MDX_DATA.JavaScript,
+ MDX_DATA.Jest,
+ MDX_DATA.SixToSeven,
+ ],
+ },
+ {
+ group: 'mantine-hooks',
+ pages: [
+ {
+ category: 'UI and Dom',
+ pages: [
+ MDX_DATA.useClickOutside,
+ MDX_DATA.useColorScheme,
+ MDX_DATA.useElementSize,
+ MDX_DATA.useEventListener,
+ MDX_DATA.useFocusReturn,
+ MDX_DATA.useFocusTrap,
+ MDX_DATA.useFocusWithin,
+ MDX_DATA.useFullscreen,
+ MDX_DATA.useHotkeys,
+ MDX_DATA.useHover,
+ MDX_DATA.useIntersection,
+ MDX_DATA.useMediaQuery,
+ MDX_DATA.useMouse,
+ MDX_DATA.useMove,
+ MDX_DATA.useReducedMotion,
+ MDX_DATA.useResizeObserver,
+ MDX_DATA.useScrollIntoView,
+ MDX_DATA.useViewportSize,
+ MDX_DATA.useWindowEvent,
+ MDX_DATA.useWindowScroll,
+ ],
+ },
+
+ {
+ category: 'State management',
+ pages: [
+ MDX_DATA.useCounter,
+ MDX_DATA.useDebouncedState,
+ MDX_DATA.useDebouncedValue,
+ MDX_DATA.useDisclosure,
+ MDX_DATA.useId,
+ MDX_DATA.useInputState,
+ MDX_DATA.useListState,
+ MDX_DATA.useLocalStorage,
+ MDX_DATA.usePrevious,
+ MDX_DATA.useQueue,
+ MDX_DATA.useSetState,
+ MDX_DATA.useToggle,
+ MDX_DATA.useUncontrolled,
+ MDX_DATA.useValidatedState,
+ MDX_DATA.usePagination,
+ ],
+ },
+
+ {
+ category: 'Utilities',
+ pages: [
+ MDX_DATA.useClipboard,
+ MDX_DATA.useDocumentTitle,
+ MDX_DATA.useDocumentVisibility,
+ MDX_DATA.useEyeDropper,
+ MDX_DATA.useFavicon,
+ MDX_DATA.useHash,
+ MDX_DATA.useHeadroom,
+ MDX_DATA.useIdle,
+ MDX_DATA.useInterval,
+ MDX_DATA.useMergedRef,
+ MDX_DATA.useNetwork,
+ MDX_DATA.useOs,
+ MDX_DATA.usePageLeave,
+ MDX_DATA.useTextSelection,
+ MDX_DATA.useTimeout,
+ ],
+ },
+
+ {
+ category: 'Lifecycle',
+ pages: [
+ MDX_DATA.useDidUpdate,
+ MDX_DATA.useForceUpdate,
+ MDX_DATA.useIsomorphicEffect,
+ MDX_DATA.useLogger,
+ MDX_DATA.useShallowEffect,
+ ],
+ },
+ ],
+ },
+ {
+ group: 'mantine-form',
+ pages: [
+ MDX_DATA.useForm,
+ MDX_DATA.formValues,
+ MDX_DATA.formErrors,
+ MDX_DATA.formValidation,
+ MDX_DATA.formValidators,
+ MDX_DATA.formNested,
+ MDX_DATA.formStatus,
+ MDX_DATA.createFormContext,
+ MDX_DATA.formRecipes,
+ ],
+ },
+ {
+ group: 'mantine-core',
+ pages: [
+ {
+ category: 'layout',
+ pages: [
+ MDX_DATA.Container,
+ MDX_DATA.Center,
+ MDX_DATA.Group,
+ MDX_DATA.Stack,
+ MDX_DATA.AspectRatio,
+ MDX_DATA.AppShell,
+ MDX_DATA.SimpleGrid,
+ MDX_DATA.Grid,
+ MDX_DATA.Space,
+ MDX_DATA.Flex,
+ ],
+ },
+ {
+ category: 'inputs',
+ pages: [
+ MDX_DATA.Input,
+ MDX_DATA.ColorPicker,
+ MDX_DATA.NativeSelect,
+ MDX_DATA.SegmentedControl,
+ MDX_DATA.Slider,
+ MDX_DATA.Switch,
+ MDX_DATA.TextInput,
+ MDX_DATA.Checkbox,
+ MDX_DATA.Radio,
+ MDX_DATA.Fieldset,
+ MDX_DATA.PinInput,
+ MDX_DATA.Chip,
+ MDX_DATA.Rating,
+ MDX_DATA.Textarea,
+ MDX_DATA.JsonInput,
+ MDX_DATA.PasswordInput,
+ MDX_DATA.FileInput,
+ MDX_DATA.ColorInput,
+ MDX_DATA.NumberInput,
+ ],
+ },
+ {
+ category: 'combobox',
+ pages: [
+ MDX_DATA.Combobox,
+ MDX_DATA.Pill,
+ MDX_DATA.PillsInput,
+ MDX_DATA.Autocomplete,
+ MDX_DATA.TagsInput,
+ MDX_DATA.Select,
+ MDX_DATA.MultiSelect,
+ ],
+ },
+ {
+ category: 'buttons',
+ pages: [
+ MDX_DATA.ActionIcon,
+ MDX_DATA.Button,
+ MDX_DATA.CloseButton,
+ MDX_DATA.CopyButton,
+ MDX_DATA.FileButton,
+ MDX_DATA.UnstyledButton,
+ ],
+ },
+ {
+ category: 'navigation',
+ pages: [
+ MDX_DATA.Anchor,
+ MDX_DATA.Tabs,
+ MDX_DATA.Breadcrumbs,
+ MDX_DATA.Burger,
+ MDX_DATA.Pagination,
+ MDX_DATA.Stepper,
+ MDX_DATA.NavLink,
+ ],
+ },
+ {
+ category: 'feedback',
+ pages: [
+ MDX_DATA.Loader,
+ MDX_DATA.Alert,
+ MDX_DATA.Notification,
+ MDX_DATA.Skeleton,
+ MDX_DATA.Progress,
+ MDX_DATA.RingProgress,
+ ],
+ },
+ {
+ category: 'overlays',
+ pages: [
+ MDX_DATA.Popover,
+ MDX_DATA.Tooltip,
+ MDX_DATA.Overlay,
+ MDX_DATA.Affix,
+ MDX_DATA.Modal,
+ MDX_DATA.Drawer,
+ MDX_DATA.HoverCard,
+ MDX_DATA.Menu,
+ MDX_DATA.LoadingOverlay,
+ MDX_DATA.Dialog,
+ ],
+ },
+ {
+ category: 'Data display',
+ pages: [
+ MDX_DATA.BackgroundImage,
+ MDX_DATA.ColorSwatch,
+ MDX_DATA.Kbd,
+ MDX_DATA.Badge,
+ MDX_DATA.Avatar,
+ MDX_DATA.Accordion,
+ MDX_DATA.Indicator,
+ MDX_DATA.Card,
+ MDX_DATA.Image,
+ MDX_DATA.ThemeIcon,
+ MDX_DATA.Timeline,
+ MDX_DATA.Spoiler,
+ ],
+ },
+ {
+ category: 'typography',
+ pages: [
+ MDX_DATA.Blockquote,
+ MDX_DATA.Code,
+ MDX_DATA.Highlight,
+ MDX_DATA.Mark,
+ MDX_DATA.Table,
+ MDX_DATA.Text,
+ MDX_DATA.Title,
+ MDX_DATA.TypographyStylesProvider,
+ MDX_DATA.List,
+ ],
+ },
+ {
+ category: 'misc',
+ pages: [
+ MDX_DATA.Collapse,
+ MDX_DATA.FocusTrap,
+ MDX_DATA.Paper,
+ MDX_DATA.Portal,
+ MDX_DATA.ScrollArea,
+ MDX_DATA.Transition,
+ MDX_DATA.VisuallyHidden,
+ MDX_DATA.Divider,
+ MDX_DATA.Box,
+ ],
+ },
+ ],
+ },
+ {
+ group: 'mantine-dates',
+ pages: [
+ MDX_DATA.GettingStartedDates,
+ MDX_DATA.DatesProvider,
+ MDX_DATA.Calendar,
+ MDX_DATA.DateInput,
+ MDX_DATA.DateTimePicker,
+ MDX_DATA.DatePicker,
+ MDX_DATA.DatePickerInput,
+ MDX_DATA.MonthPicker,
+ MDX_DATA.MonthPickerInput,
+ MDX_DATA.YearPicker,
+ MDX_DATA.YearPickerInput,
+ MDX_DATA.TimeInput,
+ ],
+ },
+ {
+ group: 'other packages',
+ pages: [
+ MDX_DATA.CodeHighlight,
+ MDX_DATA.Notifications,
+ MDX_DATA.Spotlight,
+ MDX_DATA.Carousel,
+ MDX_DATA.Dropzone,
+ MDX_DATA.Nprogress,
+ MDX_DATA.Modals,
+ MDX_DATA.TipTap,
+ ],
+ },
+ {
+ group: 'changelog',
+ pages: [MDX_DATA.Changelog700, MDX_DATA.PreviousChangelogs],
+ },
+];
+
+export const ALL_MDX_PAGES: Frontmatter[] = MDX_PAGES_GROUPS.reduce((acc, group) => {
+ group.pages.forEach((item) => {
+ if (item.category) {
+ const categoryPages = [...(item as MdxPagesCategory).pages];
+ categoryPages.sort((a, b) => a.title.localeCompare(b.title));
+ acc.push(...categoryPages);
+ } else {
+ acc.push(item as Frontmatter);
+ }
+ });
+
+ return acc;
+}, []);
diff --git a/docs/next-sitemap.config.js b/docs/next-sitemap.config.js
new file mode 100644
index 00000000000..3c74a0b8845
--- /dev/null
+++ b/docs/next-sitemap.config.js
@@ -0,0 +1,7 @@
+/** @type {import('next-sitemap').IConfig} */
+module.exports = {
+ siteUrl: process.env.SITE_URL || 'https://mantine.dev',
+ generateRobotsTxt: true,
+ output: 'export',
+ generateIndexSitemap: false,
+};
diff --git a/docs/next.config.js b/docs/next.config.js
new file mode 100644
index 00000000000..4936b8cc3d4
--- /dev/null
+++ b/docs/next.config.js
@@ -0,0 +1,36 @@
+const remarkSlug = require('remark-slug');
+
+const withMDX = require('@next/mdx')({
+ extension: /\.mdx?$/,
+ options: {
+ providerImportSource: '@mdx-js/react',
+ remarkPlugins: [remarkSlug],
+ },
+});
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ pageExtensions: ['tsx', 'mdx'],
+ reactStrictMode: true,
+ eslint: {
+ ignoreDuringBuilds: true,
+ },
+ webpack: (config, { isServer }) => {
+ if (!isServer) {
+ config.resolve = {
+ ...config.resolve,
+ fallback: {
+ ...config.resolve.fallback,
+ child_process: false,
+ fs: false,
+ 'builtin-modules': false,
+ worker_threads: false,
+ },
+ };
+ }
+
+ return config;
+ },
+};
+
+module.exports = withMDX(nextConfig);
diff --git a/docs/package.json b/docs/package.json
index 5c4edd70c07..1ec272cc421 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,44 +1,73 @@
{
- "name": "mantine-docs",
+ "name": "docs",
+ "version": "0.1.0",
"private": true,
- "description": "Mantine docs",
- "version": "1.0.0",
- "author": "Vitaly Rtishchev ",
- "resolutions": {
- "@types/react": "18.0.9"
+ "scripts": {
+ "dev": "next dev -p 7545",
+ "clean": "rm -rf .next",
+ "build": "next build && next export && cp CNAME out/CNAME && touch out/.nojekyll",
+ "postbuild": "next-sitemap",
+ "start": "next start",
+ "typecheck": "tsc --noEmit"
},
"dependencies": {
- "@mdx-js/mdx": "^1.6.22",
- "@mdx-js/react": "^1.6.22",
- "@types/mdx-js__react": "^1.5.5",
- "@types/react": "18.0.9",
- "@types/react-dom": "18.0.4",
- "gatsby": "^4.19.0",
- "gatsby-plugin-cname": "^1.0.0",
- "gatsby-plugin-layout": "^3.19.0",
- "gatsby-plugin-manifest": "^4.19.0",
- "gatsby-plugin-mdx": "^3.19.0",
- "gatsby-plugin-nprogress": "^4.19.0",
- "gatsby-plugin-tsconfig-paths": "^1.0.5",
- "gatsby-source-filesystem": "^4.19.0",
- "github-slugger": "^1.4.0",
- "lodash.debounce": "^4.0.8",
- "prism-react-renderer": "^1.2.1",
- "remark-slug": "^6.0.0"
+ "@floating-ui/react": "^0.24.8",
+ "@hello-pangea/dnd": "^16.3.0",
+ "@mantine/carousel": "link:../src/mantine-carousel",
+ "@mantine/code-highlight": "link:../src/mantine-code-highlight",
+ "@mantine/colors-generator": "link:../src/mantine-colors-generator",
+ "@mantine/core": "link:../src/mantine-core",
+ "@mantine/dates": "link:../src/mantine-dates",
+ "@mantine/demos": "link:../src/mantine-demos",
+ "@mantine/dropzone": "link:../src/mantine-dropzone",
+ "@mantine/ds": "link:../src/mantine-ds",
+ "@mantine/form": "link:../src/mantine-form",
+ "@mantine/hooks": "link:../src/mantine-hooks",
+ "@mantine/modals": "link:../src/mantine-modals",
+ "@mantine/notifications": "link:../src/mantine-notifications",
+ "@mantine/nprogress": "link:../src/mantine-nprogress",
+ "@mantine/spotlight": "link:../src/mantine-spotlight",
+ "@mantine/store": "link:../src/mantine-store",
+ "@mantine/styles-api": "link:../src/mantine-styles-api",
+ "@mantine/tiptap": "link:../src/mantine-tiptap",
+ "@mdx-js/loader": "^2.3.0",
+ "@mdx-js/react": "^2.3.0",
+ "@next/mdx": "^13.2.1",
+ "@tabler/icons-react": "^2.29.0",
+ "@tiptap/core": "^2.0.4",
+ "@tiptap/extension-code-block": "^2.0.4",
+ "@tiptap/extension-code-block-lowlight": "^2.0.4",
+ "@tiptap/extension-color": "^2.0.4",
+ "@tiptap/extension-highlight": "^2.0.4",
+ "@tiptap/extension-link": "^2.0.4",
+ "@tiptap/extension-placeholder": "^2.0.4",
+ "@tiptap/extension-subscript": "^2.0.4",
+ "@tiptap/extension-superscript": "^2.0.4",
+ "@tiptap/extension-text-align": "^2.0.4",
+ "@tiptap/extension-text-style": "^2.0.4",
+ "@tiptap/extension-underline": "^2.0.4",
+ "@tiptap/react": "^2.0.4",
+ "@tiptap/starter-kit": "^2.0.4",
+ "@types/node": "^18.14.2",
+ "@types/react": "18.2.17",
+ "chroma-js": "^2.4.2",
+ "dayjs": "^1.10.5",
+ "embla-carousel-autoplay": "^7.0.0",
+ "embla-carousel-react": "^7.0.0",
+ "github-slugger": "^2.0.0",
+ "highlight.js": "^11.7.0",
+ "lowlight": "^2.7.0",
+ "next": "13.2.1",
+ "next-sitemap": "^4.2.3",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-dropzone": "14.2.3",
+ "react-number-format": "^5.2.2",
+ "remark-slug": "^6.0.0",
+ "typescript": "5.1.6"
},
"devDependencies": {
- "@babel/core": "^7.14.3",
- "@types/github-slugger": "^1.3.0",
- "lmdb-store": "^1.6.8",
- "typescript": "4.9.3"
- },
- "license": "MIT",
- "scripts": {
- "build": "gatsby build",
- "start": "gatsby develop -H 0.0.0.0 -p 7521",
- "serve": "gatsby serve -H 0.0.0.0 -p 9521",
- "clean": "gatsby clean",
- "typecheck": "tsc --noEmit",
- "lint": "eslint src --ext .ts,.tsx"
+ "@types/chroma-js": "^2.4.0",
+ "@types/github-slugger": "^2.0.0"
}
}
diff --git a/docs/pages/404.mdx b/docs/pages/404.mdx
new file mode 100644
index 00000000000..ed4498dc4ce
--- /dev/null
+++ b/docs/pages/404.mdx
@@ -0,0 +1,10 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+
+export default Layout(MDX_DATA.NotFound);
+
+# 404
+
+Nothing found. If some of the Mantine documentation pages are lining to
+this page, please let us know by opening an [issue](https://github.com/mantinedev/mantine/issues/new/choose).
+Otherwise, get back to the [home page](/).
diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx
new file mode 100644
index 00000000000..6aafaf3fece
--- /dev/null
+++ b/docs/pages/_app.tsx
@@ -0,0 +1,75 @@
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
+import '@mantine/notifications/styles.css';
+import '@mantine/code-highlight/styles.css';
+import '@mantine/dropzone/styles.css';
+import '@mantine/nprogress/styles.css';
+import '@mantine/spotlight/styles.css';
+import '@mantine/carousel/styles.css';
+import '@mantine/tiptap/styles.css';
+import '@mantine/ds/styles.css';
+import '@mantine/demos/styles.css';
+
+import React from 'react';
+import { AppProps } from 'next/app';
+import Head from 'next/head';
+import { MantineProvider, DirectionProvider } from '@mantine/core';
+import { Notifications } from '@mantine/notifications';
+import { MdxProvider } from '@/components/MdxProvider';
+import { HotKeysHandler } from '@/components/HotKeysHandler';
+import { Search } from '@/components/Search';
+import { FontsStyle } from '@/fonts';
+import { Shell } from '@/components/Shell';
+import { GaScript } from '@/components/GaScript';
+import { theme } from '../theme';
+import '../styles/variables.css';
+import '../styles/global.css';
+import { ModalsProviderDemo } from '@/components/ModalsProviderDemo';
+
+const excludeShell = ['/', '/combobox', '/app-shell'];
+
+export default function App({ Component, pageProps, router }: AppProps) {
+ const shouldRenderShell = !excludeShell.includes(router.pathname);
+
+ return (
+ <>
+
+ Mantine
+
+
+
+
+
+
+ ) : (
+
+
+
+
+
+ );
+}
diff --git a/docs/pages/_document.tsx b/docs/pages/_document.tsx
new file mode 100644
index 00000000000..3af9f46a86a
--- /dev/null
+++ b/docs/pages/_document.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Html, Head, Main, NextScript } from 'next/document';
+import { ColorSchemeScript } from '@mantine/core';
+
+export default function Document() {
+ return (
+
+
+
+
+
+ );
+}
+```
+
+## Built-in color scheme manager
+
+[MantineProvider](/theming/mantine-provider) now comes with a built-in color scheme manager.
+It is no longer required to use any other components to set up color scheme logic.
+Color scheme can be changed with [useMantineColorScheme hook](/theming/color-schemes#use-mantine-color-scheme-hook):
+
+
+
+ );
+}
+```
+
+## Components extend functions
+
+All components that support [default props](/theming/default-props) or [Styles API](/styles/styles-api) now have a static `extend` function which allows getting autocomplete when customizing
+[defaultProps](/theming/default-props), [classNames and styles](/styles/styles-api) of the component
+on [theme](/theming/theme-object):
+
+```tsx
+import { useState } from 'react';
+import { TextInput, MantineProvider, createTheme } from '@mantine/core';
+import classes from './Demo.module.css';
+
+const theme = createTheme({
+ components: {
+ TextInput: TextInput.extends({
+ styles: (theme, props) => ({
+ input: {
+ fontSize: props.size === 'compact' ? theme.fontSizes.sm : undefined,
+ }
+ })
+ classNames: {
+ root: classes.root,
+ input: classes.input,
+ label: classes.label,
+ },
+
+ defaultProps: {
+ size: 'compact',
+ },
+ }),
+ },
+});
+
+function Demo() {
+ return (
+
+
+ );
+}
+```
+
+## classNames based on component props
+
+You can now get component props in [classNames and styles](/styles/styles-api) to conditionally apply styles.
+This feature is a more powerful replacement for styles params.
+
+
+
+ );
+}
+```
+
+## color prop improvements
+
+All components that support `color` prop now support the following color values:
+
+- Key of `theme.colors`, for example, `blue`
+- `theme.colors` index reference, for example, `blue.5`
+- Any valid CSS color value, for example, `#fff`, `rgba(0, 0, 0, 0.5)`, `hsl(0, 0%, 100%)`
+
+ [key, Button.classes[key]])}
+/>
+
+You can use these classes to create components with the same styles as Mantine components:
+
+```tsx
+import { Button } from '@mantine/core';
+
+function Demo() {
+ return
+
+ );
+}
+```
+
+## New setup for RTL
+
+`@mantine/core` package now exports [DirectionProvider](/styles/rtl) component, which should be used to configure the direction of the application.
+`useDirection` hook can be used to toggle direction. All components now include RTL styles by default, it is no
+longer required to set up additional plugins. See [RTL documentation](/styles/rtl) to learn more.
+
+## React 18+ only
+
+Starting from version 7.0 Mantine no longer supports older React versions. The minimum supported version is now React 18.
+It is required because Mantine components now use [useId](https://react.dev/reference/react/useId) and [useSyncExternalStore](https://react.dev/reference/react/useSyncExternalStore)
+hooks, which are available only in React 18.
+
+## left and right section
+
+Components that previously had `rightSection` and `icon` props, now use `leftSection` instead of `icon`.
+Example of [Button](/core/button) sections:
+
+```tsx
+import { Button } from '@mantine/core';
+
+function Demo() {
+ return (
+
+ Label
+
+ );
+}
+```
+
+## NumberInput changes
+
+[NumberInput](/core/number-input) was migrated to [react-number-format](https://s-yadav.github.io/react-number-format/).
+It now supports more features and has improvements in cursor position management.
+Due to migration, some of the props were renamed – follow the [documentation](/core/number-input) to learn about the changes.
+
+
`
+- [Title](/core/title) no longer supports all [Text](/core/text) props, only [style props](/styles/style-props) are available
+- `MediaQuery` component was removed – use [CSS modules](/styles/css-modules) to apply responsive styles
+- [Highlight](/core/highlight) component prop `highlightColor` was renamed to `color`
+- [Tooltip and Tooltip.Floating](/core/tooltip) components no longer support `width` prop, use `w` [style prop](/styles/style-props) instead
+- [Stack](/core/stack) component `spacing` prop was renamed to `gap`
+- [Input](/core/input) and other `Input` based components `icon` prop was renamed to `leftSection`
+- [Loader](/core/loader) component `variant` prop was renamed to `type`
+- `@mantine/core` package no longer depends on [Radix UI ScrollArea](https://www.radix-ui.com/docs/primitives/components/scroll-area#scroll-area), [ScrollArea](/core/scroll-area) component is now a native Mantine component – it reduces bundle size, allows setting CSP for styles and improves performance (all styles are now applied with classes instead of inline `` tags)
+- [Overlay](/core/overlay) `opacity` prop was renamed to `backgroundOpacity` to avoid collision with `opacity` [style prop](/styles/style-props)
+- [Badge](/core/badge) Styles API selectors were changed, see [Badge Styles API](/core/badge?t=styles-api) documentation for more details
+- [Slider](/core/slider) Styles API selectors were changed, see [Slider Styles API](/core/slider?t=styles-api) documentation for more details
+- [Text](/core/text) component no longer supports `underline`, `color`, `strikethrough`, `italic`, `transform`, `align` and `weight` prop – use [style props](/styles/style-props) instead
+- [Portal](/core/portal) component `innerRef` prop was renamed to `ref`
+- [ScrollArea](/core/scroll-area) now supports `x` and `y` values in `offsetScrollbars` prop
+- `TransferList` component is no longer available as a part of `@mantine/core` package, instead you can implement it with [Combobox](/core/combobox) component ([example](/combobox?e=TransferList))
+- [Chip](/core/chip) component now supports custom check icon
+- [PasswordInput](/core/password-input) no longer supports `visibilityToggleLabel` and `toggleTabIndex` props, use `visibilityToggleButtonProps` prop instead
+- [Stepper](/core/stepper) now longer supports `breakpoint` prop, you can apply responsive styles with Styles API
+- [ColorInput](/core/color-input) no longer supports `dropdownZIndex`, `transitionProps`, `withinPortal`, `portalProps` and `shadow` props, you can now pass these props with `popoverProps` prop
+- [LoadingOverlay](/core/loading-overlay) props are now grouped by the component they are passed down to: `overlayProps`, `loaderProps` and `transitionProps` now replace props that were previously passed to `LoadingOverlay` directly
+- [Dropzone](/others/dropzone) component no longer supports `padding` prop, use `p` style prop instead
+- [Dialog](/core/dialog) component now supports all [Paper](/core/paper) and [Affix](/core/affix) props, `transitionDuration`, `transition` and other transition related props were replaced with `transitionProps`
+- [Checkbox](/core/checkbox), [Radio](/core/radio), [Chip](/core/chip) and [Switch](/core/switch) components now support `rootRef` prop which allows using them with [Tooltip](/core/tooltip) and other similar components
diff --git a/docs/src/docs/changelog/previous-versions.mdx b/docs/pages/changelog/previous-versions.mdx
similarity index 92%
rename from docs/src/docs/changelog/previous-versions.mdx
rename to docs/pages/changelog/previous-versions.mdx
index 586040d8702..1fbaa536518 100644
--- a/docs/src/docs/changelog/previous-versions.mdx
+++ b/docs/pages/changelog/previous-versions.mdx
@@ -1,13 +1,9 @@
----
-group: 'changelog'
-title: 'Previous versions'
-order: 1
-slug: /changelog/previous-versions/
----
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
-# Previous changelogs
+export default Layout(MDX_DATA.PreviousChangelogs);
-Note that when following links of 1.x – 5.x changelogs you will be redirected to `v5` version website.
+# Previous changelogs
- [Version 1.1.0](https://v5.mantine.dev/changelog/1-1-0/) – May 19th, 2021
- [Version 1.3.0](https://v5.mantine.dev/changelog/1-3-0/) – June 1st, 2021
@@ -38,3 +34,4 @@ Note that when following links of 1.x – 5.x changelogs you will be redirected
- [Version 5.8.0](https://v5.mantine.dev/changelog/5-8-0/) – November 16th, 2022
- [Version 5.9.0](https://v5.mantine.dev/changelog/5-9-0/) – December 1st, 2022
- [Version 5.10.0](https://v5.mantine.dev/changelog/5-10-0/) – January 3rd, 2023
+- [Version 6.0.0](https://v6.mantine.dev/changelog/6-0-0/) – March 2nd, 2023
diff --git a/docs/pages/colors-generator.tsx b/docs/pages/colors-generator.tsx
new file mode 100644
index 00000000000..75b9df9c134
--- /dev/null
+++ b/docs/pages/colors-generator.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { ContentPageBase } from '@/components/ContentPageBase';
+import { ColorsGenerator } from '@/components/ColorsGenerator';
+
+export default function ColorsGeneratorPage() {
+ return (
+
+
+ );
+}
diff --git a/docs/pages/combobox.tsx b/docs/pages/combobox.tsx
new file mode 100644
index 00000000000..fb583fad3ed
--- /dev/null
+++ b/docs/pages/combobox.tsx
@@ -0,0 +1,3 @@
+import { ComboboxPage } from '@/combobox-examples';
+
+export default ComboboxPage;
diff --git a/docs/pages/contribute.mdx b/docs/pages/contribute.mdx
new file mode 100644
index 00000000000..92b648c4652
--- /dev/null
+++ b/docs/pages/contribute.mdx
@@ -0,0 +1,61 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+
+export default Layout(MDX_DATA.Contribute);
+
+# 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
+
+- **Improve documentation:** Fix incomplete or missing docs, bad wording, examples or explanations.
+- **Give feedback:** We are constantly working on making Mantine better. Please share how you use Mantine, what features are missing and what is done well via [GitHub Discussions](https://github.com/mantinedev/mantine/discussions/new) or [Discord](https://discord.gg/wbH82zuWMN).
+- **Share Mantine:** Share links to the Mantine docs with everyone who might be interested! [Share Mantine on Twitter here](https://twitter.com/intent/tweet?text=Mantine%20%E2%80%93%20new%20React%20library%20with%20100%2B%20components%20and%20hooks.%20It%20has%20native%20dark%20theme%20support%20and%20focuses%20on%20accessibility%20and%20usability.%0A%0Ahttp%3A%2F%2Fmantine.dev%0A%0A%23reactjs%20).
+- **Contribute to the codebase:** Propose new features via [GitHub Issues](https://github.com/mantinedev/mantine/issues/new), or find an [existing issue](https://github.com/mantinedev/mantine/labels/help%20wanted) that you are interested in and work on it!
+- **Give us a code review:** Help us identify problems with the [source code](https://github.com/mantinedev/mantine/tree/master/src) or make Mantine more performant.
+
+## Contributing workflow
+
+- Decide on what you want to contribute.
+- If you would like to implement a new feature, discuss it with the maintainer ([GitHub Discussions](https://github.com/mantinedev/mantine/discussions/new) or [Discord](https://discord.gg/wbH82zuWMN)) before jumping into coding.
+- After finalizing issue details, as you begin working on the code, please make sure to follow commit conventions.
+- Run tests with `npm test` and submit a PR once all tests have passed.
+- Get a code review and fix all issues noticed by the maintainer.
+- If you cannot finish your task or if you change your mind – that's totally fine! Just let us know in the GitHub issue that you created during the first step of this process. The Mantine community is friendly – we won't judge or ask any questions if you decide to cancel your submission.
+- Your PR is merged. You are awesome ❤️!
+
+## Get started with Mantine locally
+
+- Install the [editorconfig](https://editorconfig.org/) extension for your editor.
+- Fork the [repository](https://github.com/mantinedev/mantine), then clone or download your fork.
+- Install dependencies with yarn – `yarn`
+- Build local version of all packages – `npm run build:all`
+- Build local version of specific packages – `npm run build @mantine/core @mantine/demos @mantine/hooks`
+- To start storybook – `npm run storybook`
+- To start docs – `npm run docs`
+- To rebuild props descriptions – `npm run docs:docgen`
+
+## npm scripts
+
+All npm scripts are located at [main package.json](https://github.com/mantinedev/mantine/blob/master/package.json).
+Individual packages do not have dedicated scripts.
+
+### Development scripts
+
+- `storybook` – Starts the storybook development server. To start storybook for a specific component, use the `npm run storybook Tooltip` command.
+- `docs` – Starts the docs development server.
+
+### Testing scripts
+
+- `syncpack` – runs [syncpack](https://www.npmjs.com/package/syncpack)
+- `typecheck` – runs TypeScript typechecking with `tsc --noEmit` on all packages and docs
+- `lint` – runs ESLint on src folder
+- `jest` – runs tests with jest
+- `test` – runs all above testing scripts
+
+### Docs scripts
+
+- `docs:docgen` – generates components types information with [docgen script](https://github.com/mantinedev/mantine/blob/master/scripts/docgen.ts)
+- `docs:build` – builds docs for production
+- `docs:deploy` – builds and deploys docs to the GitHub Pages
diff --git a/docs/pages/core/accordion.mdx b/docs/pages/core/accordion.mdx
new file mode 100644
index 00000000000..409ef34e7d3
--- /dev/null
+++ b/docs/pages/core/accordion.mdx
@@ -0,0 +1,226 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+import { AccordionDemos } from '@mantine/demos';
+
+export default Layout(MDX_DATA.Accordion);
+
+## Usage
+
+Data used in Accordion examples:
+
+```tsx
+const groceries = [
+ {
+ emoji: '🍎',
+ value: 'Apples',
+ description:
+ 'Crisp and refreshing fruit. Apples are known for their versatility and nutritional benefits. They come in a variety of flavors and are great for snacking, baking, or adding to salads.',
+ },
+ {
+ emoji: '🍌',
+ value: 'Bananas',
+ description:
+ 'Naturally sweet and potassium-rich fruit. Bananas are a popular choice for their energy-boosting properties and can be enjoyed as a quick snack, added to smoothies, or used in baking.',
+ },
+ {
+ emoji: '🥦',
+ value: 'Broccoli',
+ description:
+ 'Nutrient-packed green vegetable. Broccoli is packed with vitamins, minerals, and fiber. It has a distinct flavor and can be enjoyed steamed, roasted, or added to stir-fries.',
+ },
+];
+```
+
+
+
+ control-1
+ panel-1
+
+
+
+ control-2
+ panel-2
+
+
+ );
+}
+```
+
+When `multiple={true}`, set `defaultValue` as an array of strings:
+
+```tsx
+import { Accordion } from '@mantine/core';
+
+function Demo() {
+ // Both items will be opened by default
+ return (
+
+
+ control-1
+ panel-1
+
+
+
+ control-2
+ panel-2
+
+
+ );
+}
+```
+
+## Control state
+
+When `multiple={false}`, set `value` as string:
+
+```tsx
+import { useState } from 'react';
+import { Accordion } from '@mantine/core';
+
+function Demo() {
+ const [value, setValue] = useState(null);
+
+ return (
+
+
+ control-1
+ panel-1
+
+
+
+ control-2
+ panel-2
+
+
+ );
+}
+```
+
+When `multiple={true}`, set `value` as an array of strings:
+
+```tsx
+import { useState } from 'react';
+import { Accordion } from '@mantine/core';
+
+function Demo() {
+ const [value, setValue] = useState([]);
+
+ return (
+
+
+ control-1
+ panel-1
+
+
+
+ control-2
+ panel-2
+
+
+ );
+}
+```
+
+## Compose controls
+
+You can add any additional elements that will be displayed next to `Accordion.Control`,
+for example, you can add [ActionIcon](/core/action-icon/) or [Menu](/core/menu/):
+
+;
+type DefaultAccordionProps = AccordionProps;
+```
+
+## Accessibility
+
+Accordion component follows [WAI-ARIA recommendations](https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html) on accessibility.
+
+Set `order` on `Accordion` component to wrap accordion controls with h2-h6 heading.
+The following example will wrap controls with h3 tag:
+
+```tsx
+import { Accordion } from '@mantine/core';
+
+function Demo() {
+ return {/* ...items */} ;
+}
+```
+
+Keyboard interactions:
+
+
+
+ ActionIcons will have incorrect borders
+
+ );
+}
+```
+
+
+
+
+
+ Like post
+
+
+ );
+}
+```
diff --git a/docs/pages/core/affix.mdx b/docs/pages/core/affix.mdx
new file mode 100644
index 00000000000..cb6845a59a4
--- /dev/null
+++ b/docs/pages/core/affix.mdx
@@ -0,0 +1,12 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+import { AffixDemos } from '@mantine/demos';
+
+export default Layout(MDX_DATA.Affix);
+
+## Usage
+
+`Affix` renders a div element with a fixed position inside the [Portal](/core/portal) component.
+Use it to display elements fixed at any position on the screen, for example, scroll to top button:
+
+
+
+ );
+}
+```
+
+
+
+ Logo
+
+
+ Navbar
+
+ Main
+
+ );
+}
+```
+
+## Configuration
+
+`AppShell` component accepts, `header`, `footer`, `navbar` and `aside` props to configure
+corresponding sections. It is required to set these props if you want to use corresponding
+components. For example, if you want to use `AppShell.Header` component, you need to set `header`
+prop on the `AppShell` component.
+
+`header` and `footer` configuration objects are the same and have the following properties:
+
+```tsx
+interface Configuration {
+ /** Height of the section: number, string or
+ ** object with breakpoints as keys and height as value */
+ height: AppShellSize | AppShellResponsiveSize;
+
+ /** If section is collapsed,
+ ** it is hidden from the viewport and is not offset in AppShell.Main */
+ collapsed?: boolean;
+
+ /** Determines whether the section should be offset by the AppShell.Main.
+ ** For example, it is useful if you want to
+ ** hide header based on the scroll position. */
+ offset?: boolean;
+}
+```
+
+`navbar` and `aside` configuration objects are the same as well and have the following properties:
+
+```tsx
+interface Configuration {
+ /** Width of the section: number, string or
+ ** object with breakpoints as keys and width as value */
+ width: AppShellSize | AppShellResponsiveSize;
+
+ /** Breakpoint at which section should switch to mobile mode
+ ** In mobile mode the section always has 100% width and its
+ ** collapsed state is controlled by the `collapsed.mobile`
+ ** instead of `collapsed.desktop` */
+ breakpoint: MantineBreakpoint | (string & {}) | number;
+
+ /** Determines whether the section should be collapsed */
+ collapsed?: { desktop?: boolean; mobile?: boolean };
+}
+```
+
+## layout prop
+
+`layout` prop controls how `AppShell.Header`/`AppShell.Footer` and `AppShell.Navbar`/`AppShell.Aside`
+are positioned relative to each other. It accepts `alt` and `default` values:
+
+- `alt` – `AppShell.Navbar`/`AppShell.Aside` height is equal to viewport height, `AppShell.Header`/`AppShell.Footer` width is equal to viewport width - `AppShell.Navbar` and `AppShell.Aside` width ([example](/app-shell?e=AltLayout))
+- `default` – `AppShell.Navbar`/`AppShell.Aside` height is equal to viewport height - `AppShell.Header`/`AppShell.Footer` height, `AppShell.Header`/`AppShell.Footer` width is equal to viewport width ([example](/app-shell?e=FullLayout))
+
+## Height configuration
+
+`height` property in `header` and `footer` configuration objects works the following way:
+
+- If you pass a number, the value will be converted to [rem](/styles/rem) and used as
+ height at all viewport sizes.
+- To change height based on viewport width, use object with breakpoints as keys and height as
+ values. It works the same way as [style props](/styles/style-props#responsive-styles).
+
+Examples:
+
+```tsx
+import { AppShell } from '@mantine/core';
+
+// Height is a number, it will be converted to rem
+// and used as height at all viewport sizes
+function Demo() {
+ return (
+
+ Header
+
+ );
+}
+```
+
+```tsx
+import { AppShell } from '@mantine/core';
+
+// Height is an object with breakpoints:
+// - height is 48 when viewport width is < theme.breakpoints.sm
+// - height is 60 when viewport width is >= theme.breakpoints.sm and < theme.breakpoints.lg
+// - height is 76 when viewport width is >= theme.breakpoints.lg
+function Demo() {
+ return (
+
+ Header
+
+ );
+}
+```
+
+## Width configuration
+
+`width` property in `navbar` and `aside` configuration objects works the following way:
+
+- If you pass a number, the value will be converted to [rem](/styles/rem) and used as
+ width when the viewport is larger than `breakpoint`.
+- To change width based on viewport width, use object with breakpoints as keys and width as
+ values. It works the same way as [style props](/styles/style-props#responsive-styles).
+ Note that width is always 100% when the viewport is smaller than `breakpoint`.
+
+Examples:
+
+```tsx
+import { AppShell } from '@mantine/core';
+
+// Width is a number, it will be converted to rem
+// and used as width when viewport is larger than theme.breakpoints.sm
+function Demo() {
+ return (
+
+ Navbar
+
+ );
+}
+```
+
+```tsx
+import { AppShell } from '@mantine/core';
+
+// Width is an object with breakpoints:
+// - width is 100% when viewport width is < theme.breakpoints.sm
+// - width is 200 when viewport width is >= theme.breakpoints.sm and < theme.breakpoints.lg
+// - width is 300 when viewport width is >= theme.breakpoints.lg
+function Demo() {
+ return (
+
+ Navbar
+
+ );
+}
+```
+
+## padding prop
+
+`padding` prop controls the padding of the `AppShell.Main` component. It is important to use it
+instead of setting padding on the `AppShell.Main` directly because padding of the `AppShell.Main` is
+also used to offset `AppShell.Header`, `AppShell.Navbar`, `AppShell.Aside` and `AppShell.Footer` components.
+
+`padding` prop works the same way as [style props](/styles/style-props#responsive-styles) and
+accepts numbers, strings and objects with breakpoints as keys and padding as values. You can
+reference `theme.spacing` values or use any valid CSS values.
+
+```tsx
+import { AppShell } from '@mantine/core';
+
+// Padding is always theme.spacing.md
+function Demo() {
+ return {/* AppShell content */} ;
+}
+```
+
+```tsx
+import { AppShell } from '@mantine/core';
+
+// Padding is:
+// - 10 when viewport width is < theme.breakpoints.sm
+// - 15 when viewport width is >= theme.breakpoints.sm and < theme.breakpoints.lg
+// - theme.spacing.xl when viewport width is >= theme.breakpoints.lg
+function Demo() {
+ return {/* AppShell content */} ;
+}
+```
+
+## Header offset configuration
+
+`header` prop has `offset` property which allows removing `AppShell.Header` offset from `AppShell.Main` component.
+It is useful when you want to collapse `AppShell.Header` based on the scroll position. For example, you can use
+[use-headroom](/hooks/use-headroom) hook to collapse header when user scrolls down and expand it when user scrolls up ([example](/app-shell?e=Headroom)).
+
+```tsx
+import { useHeadroom } from '@mantine/hooks';
+import { AppShell, rem } from '@mantine/core';
+
+function Demo() {
+ const pinned = useHeadroom({ fixedAt: 120 });
+
+ return (
+
+ Header
+
+
+ {/* Content */}
+
+
+ );
+}
+```
+
+## Collapsed navbar/aside configuration
+
+`navbar` and `aside` props have `collapsed` property. The property accepts an object
+`{ mobile: boolean; desktop: boolean }` which allows to configure collapsed state
+depending on the viewport width.
+
+[Example](/app-shell?e=CollapseDesktop) with separate collapsed state for mobile and desktop:
+
+```tsx
+import { useDisclosure } from '@mantine/hooks';
+import { AppShell, Button } from '@mantine/core';
+
+export function CollapseDesktop() {
+ const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
+ const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
+
+ return (
+
+ Header
+ Navbar
+
+
+ Toggle navbar
+
+
+ Toggle navbar
+
+
+
+ );
+}
+```
+
+## withBorder prop
+
+`withBorder` prop is available on `AppShell` and associated sections: `AppShell.Header`, `AppShell.Navbar`, `AppShell.Aside` and `AppShell.Footer`.
+By default, `withBorder` prop is `true` – all components have a border on the side that is adjacent to the `AppShell.Main` component.
+For example, `AppShell.Header` is located at the top of the page – it has a border on the bottom side,
+`AppShell.Navbar` is located on the left side of the page – it has a border on the right side.
+
+To remove the border from all components, set `withBorder={false}` on the `AppShell`:
+
+```tsx
+import { AppShell } from '@mantine/core';
+
+// None of the components will have a border
+function Demo() {
+ return {/* AppShell content */} ;
+}
+```
+
+To remove the border from a specific component, set `withBorder={false}` on that component:
+
+```tsx
+import { AppShell } from '@mantine/core';
+
+// AppShell.Header does not have a border
+// AppShell.Navbar and AppShell.Aside have a border
+function Demo() {
+ return (
+
+ Header
+ Navbar
+ Aside
+
+ );
+}
+```
+
+## zIndex prop
+
+`zIndex` prop is available on `AppShell` and associated sections: `AppShell.Header`, `AppShell.Navbar`, `AppShell.Aside` and `AppShell.Footer`.
+By default, all sections `z-index` is `200`.
+
+To change `z-index` of all sections, set `zIndex` prop on the `AppShell`:
+
+```tsx
+import { AppShell } from '@mantine/core';
+
+// All sections will have z-index of 100
+function Demo() {
+ return {/* AppShell content */} ;
+}
+```
+
+To change `z-index` of a specific section, set `zIndex` prop on that section:
+
+```tsx
+import { AppShell } from '@mantine/core';
+
+// AppShell.Header has z-index of 100
+// AppShell.Navbar and AppShell.Aside have z-index of 300
+function Demo() {
+ return (
+
+ Header
+ Navbar
+ Aside
+
+ );
+}
+```
+
+## Control transitions
+
+Set `transitionDuration` and `transitionTimingFunction` props on the `AppShell` to control transitions:
+
+```tsx
+import { AppShell } from '@mantine/core';
+
+function Demo() {
+ return (
+
+ {/* AppShell content */}
+
+ );
+}
+```
+
+## disabled prop
+
+Set `disabled` prop on the `AppShell` to prevent all sections except `AppShell.Main` from rendering.
+It is useful when you want to hide the shell on some pages of your application.
+
+```tsx
+import { AppShell } from '@mantine/core';
+
+function Demo() {
+ return {/* AppShell content */} ;
+}
+```
+
+## Semantic elements
+
+- `AppShell.Header` root element is `header`
+- `AppShell.Navbar` root element is `nav`
+- `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
diff --git a/docs/pages/core/aspect-ratio.mdx b/docs/pages/core/aspect-ratio.mdx
new file mode 100644
index 00000000000..73e7d423ded
--- /dev/null
+++ b/docs/pages/core/aspect-ratio.mdx
@@ -0,0 +1,20 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+import { AspectRatioDemos } from '@mantine/demos';
+
+export default Layout(MDX_DATA.AspectRatio);
+
+## Usage
+
+`AspectRatio` allows maintaining a consistent width/height ratio.
+It can be used to display images, maps, videos and other media.
+
+
+
+ +5
+
+ );
+}
+```
+
+Example of usage with [Tooltip](/core/tooltip/):
+
+RJ ;
+}
+
+function OkPlaceholder() {
+ // Ok, title is set on placeholder
+ return RJ ;
+}
+```
diff --git a/docs/pages/core/background-image.mdx b/docs/pages/core/background-image.mdx
new file mode 100644
index 00000000000..1b7d14feaae
--- /dev/null
+++ b/docs/pages/core/background-image.mdx
@@ -0,0 +1,11 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+import { BackgroundImageDemos } from '@mantine/demos';
+
+export default Layout(MDX_DATA.BackgroundImage);
+
+## Usage
+
+
+ My component
+
+ );
+}
+```
diff --git a/docs/pages/core/breadcrumbs.mdx b/docs/pages/core/breadcrumbs.mdx
new file mode 100644
index 00000000000..3300f1c54c1
--- /dev/null
+++ b/docs/pages/core/breadcrumbs.mdx
@@ -0,0 +1,12 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+import { BreadcrumbsDemos } from '@mantine/demos';
+
+export default Layout(MDX_DATA.Breadcrumbs);
+
+## Usage
+
+`Breadcrumbs` component accepts any number of React nodes as children
+and adds a given separator (defaults to `/`) between them:
+
+
+ Toggle navigation
+
+
+ );
+}
+```
diff --git a/docs/pages/core/button.mdx b/docs/pages/core/button.mdx
new file mode 100644
index 00000000000..a94d7331ea2
--- /dev/null
+++ b/docs/pages/core/button.mdx
@@ -0,0 +1,148 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+import { ButtonDemos, StylesDemos, ThemingDemos } from '@mantine/demos';
+
+export default Layout(MDX_DATA.Button);
+
+## Usage
+
+
+
+ This will not work
+
+ Buttons will have incorrect borders
+
+ );
+}
+```
+
+
+ {/* top, right, left margins are negative – -1 * theme.spacing.xl */}
+ First section
+
+ {/* Content that is not inside Card.Section will have theme.spacing.xl spacing on all sides relative to Card */}
+ Some other content
+
+ {/* right, left margins are negative – -1 * theme.spacing.xl */}
+ Middle section
+
+ {/* bottom, right, left margins are negative – -1 * theme.spacing.xl */}
+ Last section
+
+ );
+}
+```
+
+Note that `Card` relies on mapping direct children and you cannot use fragments or others wrappers for `Card.Section`:
+
+```tsx
+import { Card } from '@mantine/core';
+
+function Demo() {
+ return (
+
+
+ Won't work
+
+
+ <>
+ Won't work either
+
+
+ Works fine
+
+ );
+}
+```
+
+## Polymorphic Card.Section
+
+`Card.Section` is a [polymorphic component](/guides/polymorphic/) component, you can change its root element:
+
+ setChecked(event.currentTarget.checked)} />
+ );
+}
+```
+
+## Label with link
+
+([]);
+
+ return (
+
+
+ );
+}
+```
+
+ setChecked((v) => !v)}>
+ My chip
+
+ );
+}
+```
+
+## Change checked icon
+
+
+ React
+ Angular
+ Svelte
+ Vue
+
+ );
+}
+
+function Multiple() {
+ // array of strings value when multiple is true
+ const [value, setValue] = useState(['react']);
+
+ return (
+
+ React
+ Angular
+ Svelte
+ Vue
+
+ );
+}
+```
+
+## 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.
diff --git a/docs/pages/core/close-button.mdx b/docs/pages/core/close-button.mdx
new file mode 100644
index 00000000000..d6dba495309
--- /dev/null
+++ b/docs/pages/core/close-button.mdx
@@ -0,0 +1,32 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+import { CloseButtonDemos } from '@mantine/demos';
+
+export default Layout(MDX_DATA.CloseButton);
+
+## Usage
+
+`CloseButton` renders a button with `X` icon inside. It is used in other Mantine components like [Drawer](/core/drawer) or [Modal](/core/modal).
+
+
+ Close modal
+
+
+ );
+}
+```
diff --git a/docs/pages/core/code.mdx b/docs/pages/core/code.mdx
new file mode 100644
index 00000000000..4c6f040c6b6
--- /dev/null
+++ b/docs/pages/core/code.mdx
@@ -0,0 +1,24 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+import { CodeDemos } from '@mantine/demos';
+
+export default Layout(MDX_DATA.Code);
+
+## Usage
+
+By default, Code component renders inline `code` html element:
+
+{/* Your implementation */} ;
+}
+```
+
+## useCombobox options
+
+`useCombobox` hooks accepts an options object with the following properties:
+
+```tsx
+interface UseComboboxOptions {
+ /** Default value for `dropdownOpened`, `false` by default */
+ defaultOpened?: boolean;
+
+ /** Controlled `dropdownOpened` state */
+ opened?: boolean;
+
+ /** Called when `dropdownOpened` state changes */
+ onOpenedChange?(opened: boolean): void;
+
+ /** Called when dropdown closes with event source: keyboard, mouse or unknown */
+ onDropdownClose?(eventSource: ComboboxDropdownEventSource): void;
+
+ /** Called when dropdown opens with event source: keyboard, mouse or unknown */
+ onDropdownOpen?(eventSource: ComboboxDropdownEventSource): void;
+
+ /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
+ loop?: boolean;
+
+ /** `behavior` passed down to `element.scrollIntoView`, `'instant'` by default */
+ scrollBehavior?: ScrollBehavior;
+}
+```
+
+You can import `UseComboboxOptions` type from `@mantine/core` package:
+
+```tsx
+import type { UseComboboxOptions } from '@mantine/core';
+```
+
+## Combobox store
+
+Combobox store is an object with the following properties:
+
+```tsx
+interface ComboboxStore {
+ /** Current dropdown opened state */
+ dropdownOpened: boolean;
+
+ /** Opens dropdown */
+ openDropdown(eventSource?: 'keyboard' | 'mouse' | 'unknown'): void;
+
+ /** Closes dropdown */
+ closeDropdown(eventSource?: 'keyboard' | 'mouse' | 'unknown'): void;
+
+ /** Toggles dropdown opened state */
+ toggleDropdown(eventSource?: 'keyboard' | 'mouse' | 'unknown'): void;
+
+ /** Selected option index */
+ selectedOptionIndex: number;
+
+ /** Selects `Combobox.Option` by index */
+ selectOption(index: number): void;
+
+ /** Selects first `Combobox.Option` with `active` prop.
+ * If there are no such options, the function does nothing.
+ */
+ selectActiveOption(): string | null;
+
+ /** Selects first `Combobox.Option` that is not disabled.
+ * If there are no such options, the function does nothing.
+ * */
+ selectFirstOption(): string | null;
+
+ /** Selects next `Combobox.Option` that is not disabled.
+ * If the current option is the last one, the function selects first option, if `loop` is true.
+ */
+ selectNextOption(): string | null;
+
+ /** Selects previous `Combobox.Option` that is not disabled.
+ * If the current option is the first one, the function selects last option, if `loop` is true.
+ * */
+ selectPreviousOption(): string | null;
+
+ /** Resets selected option index to -1, removes `data-combobox-selected` from selected option */
+ resetSelectedOption(): void;
+
+ /** Triggers `onClick` event of selected option.
+ * If there is no selected option, the function does nothing.
+ */
+ clickSelectedOption(): void;
+
+ /** Updates selected option index to currently selected or active option.
+ * The function is required to be used with searchable components to update selected option index
+ * when options list changes based on search query.
+ */
+ updateSelectedOptionIndex(target?: 'active' | 'selected'): void;
+
+ /** List id, used for `aria-*` attributes */
+ listId: string | null;
+
+ /** Sets list id */
+ setListId(id: string): void;
+
+ /** Ref of `Combobox.Search` input */
+ searchRef: React.MutableRefObject;
+
+ /** Moves focus to `Combobox.Search` input */
+ focusSearchInput(): void;
+
+ /** Ref of the target element */
+ targetRef: React.MutableRefObject;
+
+ /** Moves focus to the target element */
+ focusTarget(): void;
+}
+```
+
+You can import `ComboboxStore` type from `@mantine/core` package:
+
+```tsx
+import type { ComboboxStore } from '@mantine/core';
+```
+
+## useCombobox handlers
+
+Combobox store handlers can be used to control `Combobox` state.
+For example, to open the dropdown, call `openDropdown` handler:
+
+```tsx
+import { useCombobox, Combobox, Button } from '@mantine/core';
+
+function Demo() {
+ const combobox = useCombobox();
+
+ return (
+
+
+ combobox.openDropdown()}>Open dropdown
+
+
+ {/* Your implementation */}
+
+ );
+}
+```
+
+You can use store handlers in `useCombobox` options. For example, you can
+call `selectFirstOption` when the dropdown is opened and `resetSelectedOption`
+when it is closed:
+
+```tsx
+import { useCombobox, Combobox } from '@mantine/core';
+
+function Demo() {
+ const combobox = useCombobox({
+ onDropdownOpen: () => combobox.selectFirstOption(),
+ onDropdownClose: () => combobox.resetSelectedOption(),
+ });
+
+ return {/* Your implementation */} ;
+}
+```
+
+## Combobox.Target
+
+`Combobox.Target` should be used as a wrapper for the target element or component.
+`Combobox.Target` marks its child as a target for dropdown and sets `aria-*` attributes
+and adds keyboard event listeners to it.
+
+`Combobox.Target` requires a single child element or component. The child component
+must accept `ref` and `...others` props. You can use any Mantine component as a target without
+any additional configuration, for example, [Button](/core/button/), [TextInput](/core/text-input/)
+or [InputBase](/core/input/#inputbase-component).
+
+Example of using `Combobox.Target` with [TextInput](/core/text-input/) component:
+
+ {}}>
+ {/* Drawer content */}
+
+ );
+}
+```
+
+
+
+// to make "right: 0"
+
+```
+
+## Accessibility
+
+`Drawer` component follows [WAI-ARIA recommendations](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog) on accessibility.
+
+Set `title` props to make component accessible, will add `aria-labelledby` to the content element:
+
+```tsx
+import { Drawer } from '@mantine/core';
+
+function Demo() {
+ return {}} />;
+}
+```
+
+To set close button `aria-label` use `closeButtonProps`:
+
+```tsx
+import { Drawer } from '@mantine/core';
+
+function Demo() {
+ return {}} />;
+}
+```
diff --git a/docs/pages/core/fieldset.mdx b/docs/pages/core/fieldset.mdx
new file mode 100644
index 00000000000..075968b9b89
--- /dev/null
+++ b/docs/pages/core/fieldset.mdx
@@ -0,0 +1,15 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+import { FieldsetDemos } from '@mantine/demos';
+
+export default Layout(MDX_DATA.Fieldset);
+
+## Usage
+
+(null);
+ return ([]);
+ return
+ First string
+ <>
+ element inside fragment
+ another inside fragment
+
+ {20}
+
+ );
+}
+```
+
+
+ Native button – ok
+
+
+ {/* OK */}
+
+ Mantine component – ok
+
+
+ {/* String, NOT OK – will throw error */}
+ Raw string
+
+ {/* Number, NOT OK – will throw error */}
+ {2}
+
+ {/* Fragment, NOT OK – will throw error */}
+
+ <>Fragment, NOT OK, will throw error
+
+
+ {/* Multiple nodes, NOT OK – will throw error */}
+
+ More that one node
+ NOT OK, will throw error
+
+
+ );
+}
+```
+
+## Required ref prop
+
+Custom components that are rendered inside `HoverCard.Target` are required to support `ref` prop:
+
+```tsx
+// Example of code that WILL NOT WORK
+import { HoverCard } from '@mantine/core';
+
+function MyComponent() {
+ return My component
;
+}
+
+// This will not work – MyComponent does not support ref
+function Demo() {
+ return (
+
+
+
+
+ );
+}
+```
+
+Use `forwardRef` function to forward ref to root element:
+
+```tsx
+// Example of code that will work
+import { forwardRef } from 'react';
+import { HoverCard } from '@mantine/core';
+
+const MyComponent = forwardRef((props, ref) => (
+
+ My component
+
+));
+
+// Works correctly – ref is forwarded
+function Demo() {
+ return (
+
+
+
+
+ );
+}
+```
+
+## 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.
diff --git a/docs/pages/core/image.mdx b/docs/pages/core/image.mdx
new file mode 100644
index 00000000000..6f55ac9fe5a
--- /dev/null
+++ b/docs/pages/core/image.mdx
@@ -0,0 +1,48 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+import { ImageDemos } from '@mantine/demos';
+
+export default Layout(MDX_DATA.Image);
+
+## 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](/styles/style-props).
+
+
+
+ );
+}
+
+// Use TextInput instead of Input everywhere you want to use Input,
+// it is accessible by default and includes Input.Wrapper
+function Correct() {
+ return Your email
+
+
+ );
+}
+```
+
+You can use [use-id](/hooks/use-id) to generate unique ids:
+
+```tsx
+import { useId } from '@mantine/hooks';
+import { Input } from '@mantine/core';
+
+function Demo() {
+ const id = useId();
+ return (
+
+
+ );
+}
+```
diff --git a/docs/pages/core/json-input.mdx b/docs/pages/core/json-input.mdx
new file mode 100644
index 00000000000..e6453b700b1
--- /dev/null
+++ b/docs/pages/core/json-input.mdx
@@ -0,0 +1,42 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+import { JsonInputDemos } from '@mantine/demos';
+
+export default Layout(MDX_DATA.JsonInput);
+
+## Usage
+
+`JsonInput` is based on [Textarea](/core/textarea/) component,
+it includes json validation logic and option to format input value on blur:
+
+
+ {/* Menu content */}
+
+ );
+}
+```
+
+## Show menu on hover
+
+Set `trigger="hover"` to reveal dropdown when hovers over menu target and dropdown.
+`closeDelay` and `openDelay` props can be used to control open and close delay in ms.
+Note that:
+
+- If you set `closeDelay={0}` then menu will close before user will reach dropdown, set `offset={0}` to remove space between target element and dropdown
+- Menu with `trigger="hover"` is not accessible – users that navigate with keyboard will not be able to use it
+
+
+
+// to make "right: 0"
+
+```
+
+## Accessibility
+
+`Modal` component follows [WAI-ARIA recommendations](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog) on accessibility.
+
+Set `title` props to make component accessible, will add `aria-labelledby` to the content element:
+
+```tsx
+import { Modal } from '@mantine/core';
+
+function Demo() {
+ return {}} />;
+}
+```
+
+To set close button `aria-label` use `closeButtonProps`:
+
+```tsx
+import { Modal } from '@mantine/core';
+
+function Demo() {
+ return {}} />;
+}
+```
diff --git a/docs/pages/core/multi-select.mdx b/docs/pages/core/multi-select.mdx
new file mode 100644
index 00000000000..fd6e2c64948
--- /dev/null
+++ b/docs/pages/core/multi-select.mdx
@@ -0,0 +1,136 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+import { MultiSelectDemos } from '@mantine/demos';
+
+export default Layout(MDX_DATA.MultiSelect);
+
+([]);
+ return setValue(event.currentTarget.value)}
+ data={['React', 'Angular', 'Svelte', 'Vue']}
+ />
+ );
+}
+```
+
+## Adding options
+
+`NativeSelect` allows passing options in two ways:
+
+- `data` prop array
+- `children` prop with `option` components
+
+Note that if `children` is used, `data` will be ignored.
+
+### data prop
+
+`data` prop accepts values in one of the following formats:
+
+1. Array of strings:
+
+```tsx
+import { NativeSelect } from '@mantine/core';
+
+function Demo() {
+ return ('');
+ return setValue(event.currentTarget.value)} />;
+}
+```
+
+## Controlled visibility toggle
+
+Control visibility state with `visible` and `onVisibilityChange` props,
+for example, the props can be used to sync visibility state between two inputs:
+
+
+
+ );
+}
+```
+
+Set `aria-label` on the `PillsInput.Field` component to make the input accessible.
+In this case label will not be visible, but screen reader will announce it:
+
+```tsx
+import { PillsInput } from '@mantine/core';
+
+// Accessible input – it has aria-label
+function Demo() {
+ return (
+
+
+ );
+}
+```
+
+If `label` prop is set, the input will be accessible it is not required to set `aria-label`:
+
+```tsx
+import { PillsInput } from '@mantine/core';
+
+// Accessible input – it has associated label element
+function Demo() {
+ return (
+
+
+ );
+}
+```
diff --git a/docs/pages/core/pin-input.mdx b/docs/pages/core/pin-input.mdx
new file mode 100644
index 00000000000..9abe9556884
--- /dev/null
+++ b/docs/pages/core/pin-input.mdx
@@ -0,0 +1,47 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+import { PinInputDemos } from '@mantine/demos';
+
+export default Layout(MDX_DATA.PinInput);
+
+## Usage
+
+
+
+ setOpened((o) => !o)}>Toggle popover
+
+
+ Dropdown
+
+ );
+}
+```
+
+Controlled example with mouse events:
+
+
+
+ Target
+
+
+
+
+ );
+}
+```
+
+
+ {opened && (
+
+ Your modal content
+
+ )}
+
+ setOpened(true)} type="button">
+ Open modal
+
+
+ );
+}
+```
+
+In the example above, the div element is rendered outside of parent main (before closing body tag),
+but still receives `opened` and `onClose` props. The element will not be affected by parent z-index.
+
+## Specify target dom node
+
+You can specify dom node where portal will be rendered by passing `target` prop:
+
+```tsx
+import { Portal } from '@mantine/core';
+
+const container = document.createElement('div');
+document.body.appendChild(container);
+
+function Demo() {
+ return My portal ;
+}
+```
+
+Alternatively, you can specify selector to render portal in existing element:
+
+```tsx
+import { Portal } from '@mantine/core';
+
+function Demo() {
+ return My portal ;
+}
+```
+
+If you don't specify the target element, new one will be created and appended to the `document.body` for each Portal component.
+
+## Server side rendering
+
+`createPortal` is not supported during server side rendering.
+All components inside Portal are rendered only after the application was mounted to the dom.
+
+## OptionalPortal component
+
+`OptionalPortal` component lets you configure whether children should be rendered in `Portal`.
+It accepts the same props as the `Portal` component:
+
+```tsx
+import { OptionalPortal } from '@mantine/core';
+
+function Demo() {
+ return (
+ <>
+ This text is rendered in Portal
+ This text is rendered as regular child
+
+ );
+}
+```
diff --git a/docs/pages/core/progress.mdx b/docs/pages/core/progress.mdx
new file mode 100644
index 00000000000..579787b01f2
--- /dev/null
+++ b/docs/pages/core/progress.mdx
@@ -0,0 +1,45 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+import { ProgressDemos } from '@mantine/demos';
+
+export default Layout(MDX_DATA.Progress);
+
+## Usage
+
+
+
+ );
+}
+```
diff --git a/docs/pages/core/radio.mdx b/docs/pages/core/radio.mdx
new file mode 100644
index 00000000000..e0a58064e92
--- /dev/null
+++ b/docs/pages/core/radio.mdx
@@ -0,0 +1,62 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+import { RadioDemos } from '@mantine/demos';
+
+export default Layout(MDX_DATA.Radio);
+
+## Usage
+
+ setChecked(event.currentTarget.checked)} />;
+}
+```
+
+## Change icon
+
+
+
+ );
+}
+```
+
+First line
+// Second line
+```
+
+But when you work with regular HTML elements you do not have access to `theme.spacing` and you may want to use
+`Space` component to skip direct theme subscription:
+
+```tsx
+First line
+Second line
+```
diff --git a/docs/pages/core/spoiler.mdx b/docs/pages/core/spoiler.mdx
new file mode 100644
index 00000000000..ffe43f3f80a
--- /dev/null
+++ b/docs/pages/core/spoiler.mdx
@@ -0,0 +1,34 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+import { SpoilerDemos } from '@mantine/demos';
+
+export default Layout(MDX_DATA.Spoiler);
+
+## 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.
+
+`hideLabel` and `showLabel` props are required – they are used as spoiler toggle button label in corresponding state.
+
+(null);
+ return (null);
+ const stepper = useRef(null);
+
+ return (
+
+
+ );
+}
+```
+
+## Wrap Stepper.Step
+
+`Stepper` component relies on `Stepper.Step` order. Wrapping `Stepper.Step` is not supported,
+Instead you will need to use different approaches:
+
+```tsx
+import { Stepper } from '@mantine/core';
+
+// This will not work, step children will not render
+function WillNotWork() {
+ return (
+
+ This part will not render
+
+ );
+}
+
+// Create a separate component for children
+function WillWork() {
+ return This will work as expected!
;
+}
+
+function Demo() {
+ return (
+
+ First step
+ {/* Wrapped Stepper.Step will not render children, do not do that */}
+
+
+ Third step
+
+ );
+}
+```
+
+## Accessibility
+
+` setChecked(event.currentTarget.checked)} />;
+}
+```
+
+## Inner Labels
+
+([]);
+
+ return (
+
+
+ );
+}
+```
+
+(null);
+ return ('first');
+
+ return (
+
+
+ First tab
+ Second tab
+
+
+ First panel
+ Second panel
+
+ );
+}
+```
+
+## Uncontrolled Tabs
+
+If you do not need to subscribe to Tabs state changes, use `defaultValue`:
+
+```tsx
+import { Tabs } from '@mantine/core';
+
+function Demo() {
+ return (
+
+
+ First tab
+ Second tab
+
+
+ First panel
+ Second panel
+
+ );
+}
+```
+
+## Change colors
+
+To change colors of all tabs, set `color` on `Tabs` component, to change color of the individual tab,
+set `color` on `Tabs.Tab`.
+
+
+
+ First tab
+ Second tab
+
+
+ First panel
+ Second panel
+
+ );
+}
+```
+
+## Get tab control ref
+
+```tsx
+import { useRef } from 'react';
+import { Tabs } from '@mantine/core';
+
+function Demo() {
+ const secondTabRef = useRef(null);
+
+ return (
+
+
+ First tab
+
+ Second tab
+
+ Third tab
+
+
+ );
+}
+```
+
+## Usage with react-router
+
+```tsx
+ navigate(`/tabs/${value}`)}>
+
+ First tab
+ Second tab
+
+
+ );
+}
+```
+
+## Usage with Next.js router
+
+```tsx
+// For file /tabs/[activeTab].tsx
+import { useRouter } from 'next/router';
+import { Tabs } from '@mantine/core';
+
+function Demo() {
+ const router = useRouter();
+
+ return (
+ router.push(`/tabs/${value}`)}
+ >
+
+ First tab
+ Second tab
+
+
+ );
+}
+```
+
+
+
+ {/* aria-label is not required, tab is labelled by children */}
+ Chat
+
+ {/* aria-label is required, tab is not labelled by children */}
+ Get money
+
+
+
+ );
+}
+```
+
+To set tabs list label, set `aria-label` on `Tabs.List` component, it will be announced by screen reader:
+
+```tsx
+import { Tabs } from '@mantine/core';
+
+function Demo() {
+ return (
+
+ {/* Tabs.List aria-label will be announced when tab is focused for the first time */}
+
+ Most recent
+ Unanswered
+ Archived
+
+
+ );
+}
+```
+
+## Keyboard interactions
+
+([]);
+ return setValue(event.currentTarget.value)} />;
+}
+```
+
+## Sections
+
+Same as below
+ Same as above
+
+ );
+}
+```
diff --git a/docs/pages/core/textarea.mdx b/docs/pages/core/textarea.mdx
new file mode 100644
index 00000000000..21a78712338
--- /dev/null
+++ b/docs/pages/core/textarea.mdx
@@ -0,0 +1,39 @@
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+import { TextareaDemos } from '@mantine/demos';
+
+export default Layout(MDX_DATA.Textarea);
+
+## Usage
+
+