### Start Development Server

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/guides/react-router.mdx

Run the development server after completing Mantine setup.

```bash
npm run dev
```

--------------------------------

### Project Setup

Source: https://github.com/mantinedev/mantine/blob/master/apps/help.mantine.dev/src/pages/q/how-can-i-contribute.mdx

Run the initial project setup script.

```bash
npm run setup
```

--------------------------------

### Initialize Storybook

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/guides/storybook.mdx

Use this command to add Storybook to your application if it's not already installed. This guide is for Storybook 10+.

```bash
npx storybook@latest init
```

--------------------------------

### Mantine Development Server Scripts

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/contribute.mdx

Commands to start development servers for Storybook and the documentation site. An example is provided for starting Storybook for a specific component.

```bash
storybook
```

```bash
npm run storybook Tooltip
```

```bash
docs
```

--------------------------------

### Mantine Local Development Setup

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/contribute.mdx

A sequence of commands to set up your local environment for Mantine development, including Node.js version management, dependency installation, and initial project builds.

```bash
nvm use
```

```bash
yarn
```

```bash
npm run setup
```

```bash
npm run build
```

```bash
npm run storybook
```

```bash
npm run docs
```

```bash
npm run docs:docgen
```

--------------------------------

### Install @mantinex/dev-icons with yarn or npm

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantinex/dev-icons/README.md

Install the @mantinex/dev-icons package using either yarn or npm. Choose the package manager that matches your project setup.

```bash
# With yarn
yarn add @mantinex/dev-icons
```

```bash
# With npm
npm install @mantinex/dev-icons
```

--------------------------------

### Install @mantinex/mantine-header with yarn or npm

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantinex/mantine-header/README.md

Install the @mantinex/mantine-header package using either yarn or npm. Choose the package manager that matches your project setup.

```bash
# With yarn
yarn add @mantinex/mantine-header
```

```bash
# With npm
npm install @mantinex/mantine-header
```

--------------------------------

### Fieldset Documentation Setup

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/core/fieldset.mdx

Setup for the Fieldset documentation page using MDX layout and demo data.

```typescript
import { FieldsetDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Fieldset);
```

--------------------------------

### NavLink Documentation Page Setup

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/core/nav-link.mdx

Initial setup and layout configuration for the NavLink documentation page using MDX.

```javascript
import { NavLinkDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.NavLink);
```

--------------------------------

### Calendar Documentation Layout Setup

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/dates/calendar.mdx

Initial setup for the Calendar documentation page using MDX layout and data.

```javascript
import { CalendarDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Calendar);
```

--------------------------------

### Install @mantine/schedule with yarn and npm

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantine/schedule/README.md

Install @mantine/schedule and its required dependencies using either yarn or npm. Both commands install the same packages with identical peer dependencies.

```bash
# With yarn
yarn add @mantine/schedule @mantine/core @mantine/hooks @mantine/dates
```

```bash
# With npm
npm install @mantine/schedule @mantine/core @mantine/hooks @mantine/dates
```

--------------------------------

### Install @mantine/tiptap with npm

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantine/tiptap/README.md

Install @mantine/tiptap and its required dependencies using npm package manager.

```bash
npm install @mantine/tiptap @mantine/core @mantine/hooks @tiptap/react @tiptap/extension-link
```

--------------------------------

### Start Documentation Server

Source: https://github.com/mantinedev/mantine/blob/master/apps/help.mantine.dev/src/pages/q/how-can-i-contribute.mdx

Run the local development server for the Mantine documentation.

```bash
npm run docs
```

--------------------------------

### Start Gatsby development server

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/guides/gatsby.mdx

Run the development server to start building your Mantine application with Gatsby.

```bash
npm run develop
```

--------------------------------

### Install Vitest and React Testing Library

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/guides/vitest.mdx

Install necessary dev dependencies for testing in a Vite-based project.

```html
<InstallScript
  dev
  packages="vitest jsdom @testing-library/dom @testing-library/jest-dom @testing-library/react @testing-library/user-event"
/>
```

--------------------------------

### Install @mantine/tiptap with yarn

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantine/tiptap/README.md

Install @mantine/tiptap and its required dependencies using yarn package manager.

```bash
yarn add @mantine/tiptap @mantine/core @mantine/hooks @tiptap/react @tiptap/extension-link
```

--------------------------------

### Start Storybook

Source: https://github.com/mantinedev/mantine/blob/master/apps/help.mantine.dev/src/pages/q/how-can-i-contribute.mdx

Launch the Storybook environment for component development and testing.

```bash
npm run storybook
```

--------------------------------

### Install @mantine/form package

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/form/package.mdx

Install the @mantine/form package using npm or yarn.

```bash
npm install @mantine/form

# or


```

```bash
yarn add @mantine/form
```

--------------------------------

### Documentation Page Setup

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/core/code.mdx

Imports and layout configuration for the Code component documentation page.

```javascript
import { CodeDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Code);
```

--------------------------------

### MDX Page Setup

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/core/loading-overlay.mdx

Initial imports and layout configuration for the LoadingOverlay documentation page.

```javascript
import { LoadingOverlayDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.LoadingOverlay);
```

--------------------------------

### Install @mantine/charts with dependencies

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantine/charts/README.md

Use yarn or npm to install the charts package and its required peer dependencies.

```bash
# With yarn
yarn add @mantine/charts @mantine/core @mantine/hooks recharts

# With npm
npm install @mantine/charts @mantine/core @mantine/hooks recharts
```

--------------------------------

### Install @mantine/emotion

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantine/emotion/README.md

Install the package and its peer dependencies using yarn or npm.

```bash
# With yarn
yarn add @mantine/emotion @mantine/core @mantine/hooks @emotion/react

# With npm
npm install @mantine/emotion @mantine/core @mantine/hooks @emotion/react
```

--------------------------------

### useClipboard Hook Usage Example

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/hooks/use-clipboard.mdx

Practical example demonstrating how to use the useClipboard hook to copy text to the clipboard and manage the copied state with automatic reset.

```APIDOC
## useClipboard Usage

### Description
Basic usage pattern for the useClipboard hook to copy text and track the copy state.

### Example Implementation
```tsx
import { useClipboard } from '@mantine/hooks';

function CopyButton() {
  const { copy, copied, error } = useClipboard();

  return (
    <button onClick={() => copy('Text to copy')}>
      {copied ? 'Copied!' : 'Copy'}
    </button>
  );
}
```

### With Custom Timeout
```tsx
const { copy, copied, reset } = useClipboard({ timeout: 3000 });
```

### With Error Handling
```tsx
const { copy, copied, error, reset } = useClipboard();

if (error) {
  console.error('Failed to copy:', error);
}
```
```

--------------------------------

### Install Mantine Form with yarn

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantine/form/README.md

Install @mantine/form package using yarn package manager.

```bash
yarn add @mantine/form
```

--------------------------------

### Install @mantine/modals

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantine/modals/README.md

Install the modals manager along with its required peer dependencies using Yarn or npm.

```bash
# With yarn
yarn add @mantine/hooks @mantine/core @mantine/modals
```

```bash
# With npm
npm install @mantine/hooks @mantine/core @mantine/modals
```

--------------------------------

### Install npm-check-updates globally

Source: https://github.com/mantinedev/mantine/blob/master/apps/help.mantine.dev/src/pages/q/how-to-update-dependencies.mdx

Install the ncu utility globally to use it as a standalone command for future dependency updates.

```sh
npm install -g npm-check-updates
```

--------------------------------

### Install updated dependencies with yarn

Source: https://github.com/mantinedev/mantine/blob/master/apps/help.mantine.dev/src/pages/q/how-to-update-dependencies.mdx

After updating package.json, run the install command to download the new versions of the packages.

```sh
yarn
```

--------------------------------

### BackgroundImage MDX Setup

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/core/background-image.mdx

Required imports and layout export for the BackgroundImage documentation page.

```typescript
import { BackgroundImageDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.BackgroundImage);
```

--------------------------------

### Install @mantinex/demo package with Yarn or npm

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantinex/demo/README.md

This snippet demonstrates how to install the `@mantinex/demo` package using either Yarn or npm package managers. It provides the necessary commands for adding the package to your project's dependencies.

```bash
yarn add @mantinex/demo
```

```bash
npm install @mantinex/demo
```

--------------------------------

### Install @mantinex/colors-generator

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantinex/colors-generator/README.md

Add the package to your project using either yarn or npm package managers.

```bash
# With yarn
yarn add @mantinex/colors-generator

# With npm
npm install @mantinex/colors-generator
```

--------------------------------

### Fieldset Usage Demo

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/core/fieldset.mdx

Basic Fieldset component usage example.

```jsx
<Demo data={FieldsetDemos.usage} />
```

--------------------------------

### Install @mantinex/mantine-meta package

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantinex/mantine-meta/README.md

Use yarn or npm to add the @mantinex/mantine-meta package to your project dependencies.

```bash
# With yarn
yarn add @mantinex/mantine-meta
```

```bash
# With npm
npm install @mantinex/mantine-meta
```

--------------------------------

### Setup Mantine List documentation layout in JavaScript

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/core/list.mdx

Initializes the documentation page by importing demos and applying the List layout.

```javascript
import { ListDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.List);
```

--------------------------------

### Flex Documentation Page Setup

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/core/flex.mdx

Initial imports and layout configuration for the Flex component documentation page.

```javascript
import { FLEX_STYLE_PROPS_DATA } from '@mantine/core';
import { FlexDemos } from '@docs/demos';
import { StylePropsTable } from '@/components/StylePropsTable';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Flex);
```

--------------------------------

### Full Polymorphic Component Example with Mantine's polymorphicFactory

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/guides/custom-components.mdx

This example demonstrates how to create a fully polymorphic component using `polymorphicFactory`, including defining props, styles, and a vars resolver. It shows the complete setup for a component whose root element can be changed.

```tsx
import {
  Box,
  BoxProps,
  createVarsResolver,
  polymorphicFactory,
  PolymorphicFactory,
  StylesApiProps,
  useProps,
  useStyles,
} from '@mantine/core';
import classes from './PolymorphicExample.module.css';

export type PolymorphicExampleStylesNames = 'root';
export type PolymorphicExampleVariant = string;
export type PolymorphicExampleCssVariables = {
  root: '--test';
};

export interface PolymorphicExampleProps
  extends BoxProps, StylesApiProps<PolymorphicExampleFactory> {}

export type PolymorphicExampleFactory = PolymorphicFactory<{
  props: PolymorphicExampleProps;
  defaultRef: HTMLDivElement;
  defaultComponent: 'div';
  stylesNames: PolymorphicExampleStylesNames;
  vars: PolymorphicExampleCssVariables;
  variant: PolymorphicExampleVariant;
}>;

const defaultProps = {} satisfies Partial<PolymorphicExampleProps>;

const varsResolver = createVarsResolver<PolymorphicExampleFactory>(() => ({
  root: {
    '--test': 'test',
  },
}));

export const PolymorphicExample = polymorphicFactory<PolymorphicExampleFactory>((_props) => {
  const props = useProps('PolymorphicExample', defaultProps, _props);
  const { classNames, className, style, styles, unstyled, vars, attributes, ...others } = props;

  const getStyles = useStyles<PolymorphicExampleFactory>({
    name: 'PolymorphicExample',
    props,
    classes,
    className,
    style,
    classNames,
    styles,
    unstyled,
    attributes,
    vars,
    varsResolver,
  });

  return <Box {...getStyles('root')} {...others} />;
});

PolymorphicExample.displayName = '@mantine/core/PolymorphicExample';
```

--------------------------------

### useInterval basic API usage

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/hooks/use-interval.mdx

Import and use the useInterval hook to get control methods (start, stop, toggle) and active status. The hook requires a callback function and interval duration in milliseconds.

```typescript
import { useInterval } from '@mantine/hooks';

const { start, stop, toggle, active } = useInterval(fn, interval);
```

--------------------------------

### Access and Use Mantine Component Classes

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/changelog/7-0-0.mdx

Access predefined component classes from the Component.classes object to apply Mantine styling to custom HTML elements. This example retrieves Button classes and applies the root class to a native button element.

```typescript
import { Button } from '@mantine/core';

function Demo() {
  return <button type="button" className={Button.classes.root} />;
}
```

--------------------------------

### Configure rem Units Scaling in Mantine Theme

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/changelog/7-0-0.mdx

Set up rem units scaling in the Mantine theme to adjust component sizes when changing the root font-size. This example scales components by 1.6 to accommodate a 10px root font-size while maintaining proportional sizing.

```css
:root {
  font-size: 10px;
}
```

```typescript
import { createTheme, MantineProvider } from '@mantine/core';

const theme = createTheme({
  scale: 1.6,
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      {/* Your app here */}
    </MantineProvider>
  );
}
```

--------------------------------

### Extend Mantine Component with Theme Configuration

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/changelog/7-0-0.mdx

Use the static extend function on Mantine components to customize defaultProps, classNames, and styles with autocomplete support. This example demonstrates customizing TextInput with compact size styling and CSS module classes applied through the theme object.

```typescript
import {
  createTheme,
  MantineProvider,
  TextInput,
} from '@mantine/core';
import classes from './Demo.module.css';

const theme = createTheme({
  components: {
    TextInput: TextInput.extend({
      styles: (t, props) => ({
        input: {
          fontSize:
            props.size === 'compact' ? t.fontSizes.sm : undefined,
        },
      }),
      classNames: {
        root: classes.root,
        input: classes.input,
        label: classes.label,
      },
      defaultProps: {
        size: 'compact',
      },
    }),
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      {/* Your app here */}
    </MantineProvider>
  );
}
```

--------------------------------

### Kbd Documentation Layout Setup

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/core/kbd.mdx

Imports documentation components and exports the Kbd page layout configuration.

```typescript
import { KbdDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Kbd);
```

--------------------------------

### Build All Packages

Source: https://github.com/mantinedev/mantine/blob/master/apps/help.mantine.dev/src/pages/q/how-can-i-contribute.mdx

Compile and build a local version of all packages in the repository.

```bash
npm run build all
```

--------------------------------

### Create React Router Application

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/guides/react-router.mdx

Initialize a new React Router project using the official scaffolding tool.

```bash
npx create-react-router@latest my-react-router-app
```

--------------------------------

### Configure MDX layout and imports for Collapse documentation

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/core/collapse.mdx

Initial setup for the Collapse documentation page, including demo data imports and layout wrapping.

```javascript
import { CollapseDemos, UseCollapseDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Collapse);
```

--------------------------------

### Install Mantine Form with npm

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantine/form/README.md

Install @mantine/form package using npm package manager.

```bash
npm install @mantine/form
```

--------------------------------

### Basic Usage Demo

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/core/loading-overlay.mdx

Demonstrates the basic implementation and visibility control of the LoadingOverlay component.

```jsx
<Demo data={LoadingOverlayDemos.usage} />
```

--------------------------------

### RingProgress Documentation Setup

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/core/ring-progress.mdx

Configuration for the RingProgress documentation page, including demo and layout imports.

```javascript
import { RingProgressDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.RingProgress);
```

--------------------------------

### Basic MantineProvider Setup with Theme

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/theming/mantine-provider.mdx

Wrap your application with MantineProvider at the root level, passing a theme object created with createTheme. The theme overrides are merged with defaults and applied to all components.

```tsx
import { createTheme, MantineProvider } from '@mantine/core';

const theme = createTheme({
  /** Your theme override here */
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      {/* Your app here */}
    </MantineProvider>
  );
}
```

--------------------------------

### Configure Jest setup file

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/guides/jest.mdx

Add the jest.setup.js file to Jest configuration via setupFilesAfterEnv to ensure Web API mocks are applied before tests run.

```javascript
const config = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // ... rest of your config
};
```

--------------------------------

### Kbd Size Demo

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/core/kbd.mdx

Renders the Kbd component size variations demonstration.

```jsx
<Demo data={KbdDemos.size} />
```

--------------------------------

### Install Emotion and Mantine Emotion dependencies

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/styles/emotion.mdx

Install the necessary packages for using Emotion with Mantine in your project.

```bash
npm install @mantine/emotion @emotion/react @emotion/cache @emotion/serialize @emotion/utils
```

--------------------------------

### Install @mantine/notifications via package managers

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantine/notifications/README.md

Use yarn or npm to install the notifications package and its required dependencies.

```bash
# With yarn
yarn add @mantine/hooks @mantine/core @mantine/notifications

# With npm
npm install @mantine/hooks @mantine/core @mantine/notifications
```

--------------------------------

### Kbd Usage Demo

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/core/kbd.mdx

Renders the Kbd component usage demonstration.

```jsx
<Demo data={KbdDemos.usage} />
```

--------------------------------

### Start RedwoodJS development server

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/guides/redwood.mdx

Launch the development server to begin working with Mantine components in your Redwood application.

```bash
yarn rw dev
```

--------------------------------

### Inaccessible PillsInput Example

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/core/pills-input.mdx

This example shows an `PillsInput` without a label or `aria-label`, which makes it inaccessible to screen readers.

```tsx
import { PillsInput } from '@mantine/core;

// Inaccessible input – screen readers will not announce it properly
function Demo() {
  return (
    <PillsInput>
      <PillsInput.Field />
    </PillsInput>
  );
}
```

--------------------------------

### Mantine documentation page setup

Source: https://github.com/mantinedev/mantine/blob/master/apps/help.mantine.dev/src/pages/q/align-input-button.mdx

Defines the imports, metadata, and default export for a Mantine documentation page.

```javascript
import {
  AlignInputButton,
  AlignInputButtonCorrect,
  AlignInputButtonStyles
} from '@/demos/AlignInputButton.demo';
import { Layout } from '@/layout';

export const meta = {
  title: 'How to align input with a button in a flex container?',
  description:
    'Learn how to align Mantine inputs with buttons using Group component',
  slug: 'align-input-button',
  category: 'styles',
  tags: ['inputs', 'button', 'flexbox', 'centering'],
  created_at: 'February 15, 2024',
  last_updated_at: 'February 15, 2024'
};

export default Layout(meta);
```

--------------------------------

### Navigate to web directory

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/guides/redwood.mdx

Change to the web directory before installing Mantine dependencies. This is required for proper package installation in the Redwood monorepo structure.

```bash
cd web
```

--------------------------------

### Mantine Documentation Layout and Data Setup

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/guides/icons.mdx

Import necessary utilities and data to configure the layout and demos for the icons documentation page.

```javascript
import { GuidesDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Icons);
```

--------------------------------

### Setup MantineProvider with pages router

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/guides/next.mdx

Configure pages/_app.tsx with MantineProvider and theme setup. Required for all Mantine components to work in pages router applications.

```typescript
// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';

import type { AppProps } from 'next/app';
import { createTheme, MantineProvider } from '@mantine/core';

const theme = createTheme({
  /** Put your mantine theme override here */
});

export default function App({ Component, pageProps }: AppProps) {
  return (
    <MantineProvider theme={theme}>
      <Component {...pageProps} />
    </MantineProvider>
  );
}
```

--------------------------------

### Mock Web APIs in Jest setup

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/guides/jest.mdx

Configure jest.setup.js to mock browser APIs like window.matchMedia, ResizeObserver, and document.fonts that Mantine components depend on but are unavailable in jest-environment-jsdom.

```typescript
import '@testing-library/jest-dom';

const { getComputedStyle } = window;
window.getComputedStyle = (elt) => getComputedStyle(elt);
window.HTMLElement.prototype.scrollIntoView = () => {};

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(),
    removeListener: jest.fn(),
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});

Object.defineProperty(document, 'fonts', {
  value: { addEventListener: jest.fn(), removeEventListener: jest.fn() },
});

class ResizeObserver {
  observe() {}
  unobserve() {}
  disconnect() {}
}

window.ResizeObserver = ResizeObserver;
```

--------------------------------

### usePagination Hook - Start Value Configuration

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/hooks/use-pagination.mdx

Set a custom starting page number using the startValue parameter. This defines the beginning of the pagination range.

```APIDOC
## usePagination - Start Value

### Description
Set startValue to define the starting page number. For example, with startValue={5} and total={15}, the pagination range will be from 5 to 15.

### Parameters
#### Options
- **total** (number) - Required - Total amount of pages
- **startValue** (number) - Optional - Starting page number, defaults to 1

### Usage Example
```tsx
import { usePagination } from '@mantine/hooks';

const pagination = usePagination({ total: 15, startValue: 5 });
```
```

--------------------------------

### Install @mantine/store using yarn or npm

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantine/store/README.md

Add the package to your project dependencies using your preferred package manager.

```bash
# With yarn
yarn add @mantine/store

# With npm
npm install @mantine/store
```

--------------------------------

### Default RichTextEditor Labels Example

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/x/tiptap.mdx

An example of default labels provided by `@mantine/tiptap`, showing how some common control labels are defined. These can be imported and merged with custom labels.

```tsx
import { RichTextEditorLabels } from '@mantine/tiptap';

export const DEFAULT_LABELS: RichTextEditorLabels = {
  // Controls labels
  linkControlLabel: 'Link',
  colorPickerControlLabel: 'Text color',
  highlightControlLabel: 'Highlight text',
}
```

--------------------------------

### Install Mantine ESLint config and dependencies using npm

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/eslint-config-mantine.mdx

This command installs `eslint-config-mantine` along with its required peer dependencies, including core ESLint, TypeScript ESLint, React ESLint plugin, and JSX A11y plugin, as development dependencies. Ensure you have ESLint 9 or higher installed.

```bash
npm install --save-dev @eslint/js eslint eslint-plugin-jsx-a11y eslint-plugin-react typescript-eslint eslint-config-mantine
```

--------------------------------

### Install @mantinex/mantine-logo with npm

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantinex/mantine-logo/README.md

Install the Mantine logo React component package using npm package manager. This command adds the package to your project dependencies.

```bash
npm install @mantinex/mantine-logo
```

--------------------------------

### Install @mantinex/mantine-logo with Yarn

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantinex/mantine-logo/README.md

Install the Mantine logo React component package using Yarn package manager. This command adds the package to your project dependencies.

```bash
yarn add @mantinex/mantine-logo
```

--------------------------------

### Install Mantine Hooks with npm

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantine/hooks/README.md

Install the @mantine/hooks package using the npm package manager. This command adds the hooks library to your project dependencies.

```bash
npm install @mantine/hooks
```

--------------------------------

### Install Mantine Hooks with Yarn

Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantine/hooks/README.md

Install the @mantine/hooks package using the Yarn package manager. This command adds the hooks library to your project dependencies.

```bash
yarn add @mantine/hooks
```

--------------------------------

### Using useDrawersStack Hook with Drawer Component

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/core/drawer.mdx

This example demonstrates how to initialize `useDrawersStack` with unique IDs and register `Drawer` components to the stack, allowing programmatic control over their open/close states.

```tsx
import { Drawer, useDrawersStack } from '@mantine/core';

function Demo() {
  const stack = useDrawersStack(['first', 'second']);

  return (
    <>
      <Drawer {...stack.register('first')}>First</Drawer>
      <Drawer {...stack.register('second')}>Second</Drawer>
      <Button onClick={() => stack.open('first')}>Open first</Button>
    </>
  );
}
```

--------------------------------

### Vitest setup and browser API mocks

Source: https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/guides/vitest.mdx

Mocks matchMedia and ResizeObserver APIs required by Mantine components in the jsdom environment.

```tsx
import '@testing-library/jest-dom/vitest';

import { vi } from 'vitest';

const { getComputedStyle } = window;
window.getComputedStyle = (elt) => getComputedStyle(elt);
window.HTMLElement.prototype.scrollIntoView = () => {};

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: vi.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: vi.fn(),
    removeListener: vi.fn(),
    addEventListener: vi.fn(),
    removeEventListener: vi.fn(),
    dispatchEvent: vi.fn(),
  })),
});

Object.defineProperty(document, 'fonts', {
  value: { addEventListener: vi.fn(), removeEventListener: vi.fn() },
});

class ResizeObserver {
  observe() {}
  unobserve() {}
  disconnect() {}
}

window.ResizeObserver = ResizeObserver;
```

--------------------------------

### Emotion Nested Inline Styles Example

Source: https://github.com/mantinedev/mantine/blob/master/apps/help.mantine.dev/src/pages/q/nested-inline-styles.mdx

This example from Emotion documentation demonstrates the syntax for nested inline styles using the `css` prop, which is common in CSS-in-JS libraries.

```tsx
render(
  <div
    css={{
      backgroundColor: 'hotpink',
      '&:hover': {
        color: 'lightgreen',
      },
    }}
  >
    This has a hotpink background.
  </div>
);
```