Mantine

https://mantine.dev
Admin
Mantine is a fully featured React components library that includes over 120 customizable components...
Tokens:2,437,602
Snippets:15,704
Trust Score:9.2
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Start Storybook

Source: https://mantine.dev/guides/storybook

Starts Storybook after completing the setup.

```bash
npm run storybook
```

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

### Start the development server

Source: https://mantine.dev/guides/react-router

Run this command to start the development server after completing the setup.

```bash
npm run dev
```

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

### Start development server

Source: https://mantine.dev/guides/redwood

Starts the RedwoodJS development server after completing the setup.

```bash
yarn rw dev
```

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

### Start ordered list from specific number with start prop

Source: https://mantine.dev/core/list

Use the `start` prop to begin numbering from a specific value. This example starts an ordered list at 5.

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

function Demo() {
  return (
    <List type="ordered" start={5}>
      <List.Item>This is item #5</List.Item>
      <List.Item>This is item #6</List.Item>
      <List.Item>This is item #7</List.Item>
      <List.Item>This is item #8</List.Item>
    </List>
  );
}
```

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

### Create a new React Router application

Source: https://mantine.dev/guides/react-router

Run this command to scaffold a new React Router application using the official getting started guide.

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

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

### Create a new Vite application with npm

Source: https://mantine.dev/guides/vite

Run this command to create a new Vite application using npm. Follow the Vite getting started guide for more details.

```bash
npm create vite@latest
```

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

### Install with npm

Source: https://mantine.dev/llms/x-spotlight.md

Install the @mantine/spotlight package using npm.

```bash
npm install @mantine/spotlight
```

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

### Create a new Vite application with yarn

Source: https://mantine.dev/guides/vite

Run this command to create a new Vite application using yarn. Follow the Vite getting started guide for more details.

```bash
yarn create vite
```

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

### Install with npm

Source: https://mantine.dev/llms/x-code-highlight.md

Install the @mantine/code-highlight package using npm.

```bash
npm install @mantine/code-highlight
```

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

### Create vitest.setup.mjs with mocks

Source: https://mantine.dev/guides/vitest

Create a vitest.setup.mjs file in your project root. Mocks window.matchMedia and ResizeObserver APIs that are not available in jsdom but required by some Mantine components.

```javascript
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(),
  })),
});

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

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

window.ResizeObserver = ResizeObserver;
```

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

### Install with yarn

Source: https://mantine.dev/llms/x-spotlight.md

Install the @mantine/spotlight package using yarn.

```bash
yarn add @mantine/spotlight
```

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

### RichTextEditor table controls with Tiptap TableKit

Source: https://mantine.dev/changelog/9-6-0

Setup for adding table editing controls to the RichTextEditor. Requires installing and registering the Tiptap TableKit extension. The example includes a table with sample content and all table controls in the toolbar, which are automatically disabled when the cursor is not inside a table.

```TypeScript
import { TableKit } from '@tiptap/extension-table';
import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { RichTextEditor } from '@mantine/tiptap';

function Demo() {
  const editor = useEditor({
    extensions: [StarterKit, TableKit],
    content: `
      <table>
        <tbody>
          <tr><th><p>Framework</p></th><th><p>Language</p></th></tr>
          <tr><td><p>Mantine</p></td><td><p>TypeScript</p></td></tr>
          <tr><td><p>Tiptap</p></td><td><p>TypeScript</p></td></tr>
        </tbody>
      </table>
      <p></p>
`,
  });

  return (
    <RichTextEditor editor={editor}>
      <RichTextEditor.Toolbar sticky>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.TableInsert />
          <RichTextEditor.TableDelete />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.TableColumnBefore />
          <RichTextEditor.TableColumnAfter />
          <RichTextEditor.TableColumnDelete />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.TableRowBefore />
          <RichTextEditor.TableRowAfter />
          <RichTextEditor.TableRowDelete />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.TableToggleHeaderRow />
          <RichTextEditor.TableToggleHeaderColumn />
          <RichTextEditor.TableMergeCells />
          <RichTextEditor.TableSplitCell />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>

      <RichTextEditor.Content />
    </RichTextEditor>
  );
}
```

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

### Initialize Storybook

Source: https://mantine.dev/guides/storybook

Initializes Storybook in your application. Skip this step if Storybook is already set up.

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

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

### Install Vitest and React Testing Library

Source: https://mantine.dev/llms-full.txt

Install Vitest and React Testing Library. Two package manager alternatives are shown; choose one based on your project's package manager.

```bash
yarn add vitest jsdom @testing-library/dom @testing-library/jest-dom @testing-library/react @testing-library/user-event
```

```bash
npm install vitest jsdom @testing-library/dom @testing-library/jest-dom @testing-library/react @testing-library/user-event
```

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

### Install sass-embedded with yarn

Source: https://mantine.dev/llms/styles-sass.md

Install the sass-embedded package using yarn. Required for Sass support in Vite and Next.js setups.

```bash
yarn add sass-embedded
```

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

### Get element ref for YearPickerInput

Source: https://mantine.dev/dates/year-picker-input

Use this example to get a reference to the YearPickerInput element. The ref is typed as HTMLButtonElement and can be used to access the underlying button element.

```tsx
import { useRef } from 'react';
import { YearPickerInput } from '@mantine/dates';

function Demo() {
  const ref = useRef<HTMLButtonElement>(null);
  return <YearPickerInput ref={ref} />;
}

```

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

### Install with yarn

Source: https://mantine.dev/llms/x-code-highlight.md

Install the @mantine/code-highlight package using yarn.

```bash
yarn add @mantine/code-highlight
```

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

### Get control ref with useRef

Source: https://mantine.dev/llms/core-spoiler.md

Use the controlRef prop to get a ref to the toggle button element. This example shows how to create a ref with useRef and pass it to the Spoiler component.

```tsx
import { useRef } from 'react';
import { Spoiler } from '@mantine/core';

function Demo() {
  const spoilerControlRef = useRef<HTMLButtonElement>(null);
  return (
    <Spoiler
      controlRef={spoilerControlRef}
      hideLabel="Hide"
      showLabel="Show"
    />
  );
}
```

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

### Install shiki package

Source: https://mantine.dev/llms/changelog-8-0-0.md

Install the shiki package to use the shiki adapter with CodeHighlight. Both package managers are shown as alternatives.

```bash
yarn add shiki
```

```bash
npm install shiki
```

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

### Mantine setup with Next.js App Router

Source: https://mantine.dev/guides/next

Setup for Next.js App Router: add MantineProvider, ColorSchemeScript, and styles imports to app/layout.tsx, then start the development server with npm run dev.

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

import { ColorSchemeScript, MantineProvider, mantineHtmlProps } from '@mantine/core';

export const metadata = {
  title: 'My Mantine app',
  description: 'I have followed setup instructions carefully',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" {...mantineHtmlProps}>
      <head>
        <ColorSchemeScript />
      </head>
      <body>
        <MantineProvider>{children}</MantineProvider>
      </body>
    </html>
  );
}
```

```bash
npm run dev
```

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

### Install with npm

Source: https://mantine.dev/x/lightbox

Install the required packages for the lightbox using npm.

```bash
npm install embla-carousel@^8.5.2 embla-carousel-react@^8.5.2 @mantine/lightbox
```

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

### Install with npm

Source: https://mantine.dev/x/dropzone

Install the @mantine/dropzone package using npm.

```bash
npm install @mantine/dropzone
```

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

### NumberInput prefix and suffix example

Source: https://mantine.dev/core/number-input

Set the prefix and suffix props to add a given string to the start or end of the input value. The example shows a dollar prefix and a percent suffix.

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

function Demo() {
  return (
    <>
      <NumberInput
        label="With prefix"
        placeholder="Dollars"
        prefix="$"
        defaultValue={100}
        mb="md"
      />
      <NumberInput
        label="With suffix"
        placeholder="Percents"
        suffix="%"
        defaultValue={100}
        mt="md"
      />
    </>
  );
}
```

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

### useTimeout API with autoInvoke option

Source: https://mantine.dev/hooks/use-timeout

API example showing the useTimeout signature with options. autoInvoke defaults to false, so the timer only starts when start() is called unless autoInvoke is set to true.

```tsx
import { useTimeout } from '@mantine/hooks';

const { start, clear } = useTimeout(callback, delay, {
  autoInvoke: true,
});
```

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

### Install @tiptap/extension-details

Source: https://mantine.dev/llms/x-tiptap.md

Install the Tiptap details extension using either Yarn or npm. Both commands are equivalent alternatives; choose the one that matches your package manager.

```bash
yarn add @tiptap/extension-details
```

```bash
npm install @tiptap/extension-details
```

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

### Get input DOM node with use-form

Source: https://mantine.dev/llms-full.txt

Use the `form.getInputNode` function to get the input DOM node at a given path. This example shows how to retrieve nodes for `order_id` and `user.email` inputs.

```tsx
import { useForm } from '@mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialValues: {
    order_id: null,
    user: { email: '' },
  },
});

// Returns the input DOM node for order_id input
form.getInputNode('order_id');

// Returns the input DOM node for user.email input
form.getInputNode('user.email');
```

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

### Install @mantine/spotlight with Yarn or npm

Source: https://mantine.dev/x/spotlight

Install the @mantine/spotlight package using either Yarn or npm. Choose the command that matches your package manager.

```bash
yarn add @mantine/spotlight
```

```bash
npm install @mantine/spotlight
```

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

### useMounted usage example

Source: https://mantine.dev/hooks/use-mounted

Import useMounted from @mantine/hooks and call it inside a component to get a boolean indicating whether the component is mounted. The example renders different text based on the mounted state.

```tsx
import { useMounted } from '@mantine/hooks';

function Demo() {
  const mounted = useMounted();
  return (
    <div>
      {mounted ? 'Component is mounted' : 'Component is not mounted'}
    </div>
  );
}

```

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

### Install highlight.js with Yarn or npm

Source: https://mantine.dev/llms/guides-7x-to-8x.md

Install the highlight.js package to continue using it with @mantine/code-highlight. Both Yarn and npm commands are provided as alternatives.

```bash
yarn add highlight.js
```

```bash
npm install highlight.js
```

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

### Set firstDayOfWeek

Source: https://mantine.dev/llms/schedule-year-view.md

Set firstDayOfWeek to control which day starts the week. The example uses 0 (Sunday).

```tsx
import { YearView } from '@mantine/schedule';
import { events } from './data';

function Demo() {
  return <YearView date={new Date()} events={events} firstDayOfWeek={0} />;
}
```

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

### Start development server

Source: https://mantine.dev/guides/gatsby

Command to start the Gatsby development server.

```bash
npm run develop
```

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

### Install and use mantine-form-zod-resolver

Source: https://mantine.dev/llms-full.txt

Install the new zod resolver package and use it with @mantine/form. The resolver is a drop-in replacement for the old one and remains exported from @mantine/form until 8.0.0. The example shows validation errors for name, email, and age.

```bash
yarn add zod mantine-form-zod-resolver
```

```bash
npm install zod mantine-form-zod-resolver
```

```tsx
import { zodResolver } from 'mantine-form-zod-resolver';
import { z } from 'zod';
import { useForm } from '@mantine/form';

const schema = z.object({
  name: z
    .string()
    .min(2, { message: 'Name should have at least 2 letters' }),
  email: z.string().email({ message: 'Invalid email' }),
  age: z.number().min(18, {
    message: 'You must be at least 18 to create an account',
  }),
});

const form = useForm({
  initialValues: {
    name: '',
    email: '',
    age: 16,
  },
  validate: zodResolver(schema),
});

form.validate();
form.errors;
// -> {
//  name: 'Name should have at least 2 letters',
//  email: 'Invalid email',
//  age: 'You must be at least 18 to create an account'
// }
```

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

### Install with yarn

Source: https://mantine.dev/x/dropzone

Install the @mantine/dropzone package using yarn.

```bash
yarn add @mantine/dropzone
```

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

### DateInput valueFormat

Source: https://mantine.dev/llms/dates-date-input.md

Documentation for the DateInput component's valueFormat and dateParser props, including usage examples and setup instructions.

```APIDOC
## DateInput valueFormat

### Description
Sets the format of the value label using a dayjs format string or a function. When a function is provided, it receives the value as a `YYYY-MM-DD` string and returns the formatted value. The `valueFormat` is also used to parse user input; a function cannot be used for parsing, so typed values are parsed as `YYYY-MM-DD` strings unless a custom `dateParser` is provided.

### Component
`DateInput` from `@mantine/dates`

### Props
- **valueFormat** (string | function) - Optional - The dayjs format string or a function that formats the value. When a string, it must be a valid dayjs format. When a function, it receives the value as a `YYYY-MM-DD` string and returns the formatted value.
- **dateParser** (function) - Optional - A function that parses user input into a `Date` object. It receives the input string and returns a `Date` object or `null` if parsing fails.
- **label** (string) - Optional - The label displayed above the input.
- **placeholder** (string) - Optional - The placeholder text displayed when the input is empty.

### Usage Examples

#### Example 1: Custom dayjs format
```tsx
import { DateInput } from '@mantine/dates';

function Demo() {
  return <DateInput valueFormat="YYYY MMM DD" label="Date input" placeholder="Date input" />;
}
```

#### Example 2: Custom format function with dateParser
```tsx
import { DateInput } from '@mantine/dates';

function Demo() {
  return (
    <DateInput
      valueFormat={(date) =>
        new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(new Date(`${date}T00:00:00`))
      }
      dateParser={(input) => {
        const parsed = new Date(input);
        return Number.isNaN(parsed.getTime()) ? null : parsed;
      }}
    />
  );
}
```

### Notes
- To use custom dayjs formats, enable the `customParseFormat` plugin once in your application root file:
```tsx
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';

dayjs.extend(customParseFormat);
```
- When `valueFormat` is a function, typed values are parsed as `YYYY-MM-DD` strings. Set the `dateParser` prop to support other formats.
```
Tokens:
Raw