Mantine

https://v6.mantine.dev/
Admin
Mantine is a React component library with 100+ customizable components and 50+ hooks for building...
Tokens:301,205
Snippets:3,008
Trust Score:9.2
Update:3 months ago
Show doc for...
Tokens:
Raw
### Syntax Highlight Setup

Source: https://v6.mantine.dev/core/code

To enable syntax highlighting, use the `@mantine/prism` package. This example shows importing a Button component for demonstration.

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


function Demo() {
  return <Button>Hello</Button>
}
```

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

### Start Development Server

Source: https://v6.mantine.dev/guides/cra

Run this command to start the development server after setting up Mantine.

```bash
npm start
```

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

### Start Storybook

Source: https://v6.mantine.dev/pages/contributing

Start the Storybook development server to view and test components.

```bash
npm run storybook
```

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

### Install Placeholder Extension

Source: https://v6.mantine.dev/others/tiptap

Install the @tiptap/extension-placeholder package using yarn or npm.

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

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

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

### Install Underline Extension (NPM)

Source: https://v6.mantine.dev/others/tiptap

Install the @tiptap/extension-underline package using NPM.

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

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

### Install Packages (NPM)

Source: https://v6.mantine.dev/others/tiptap

Install the necessary packages using NPM for code highlighting with Tiptap.

```bash
npm install lowlight @tiptap/extension-code-block-lowlight
```

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

### Start Docs Development Server

Source: https://v6.mantine.dev/pages/contributing

Start the local development server for the Mantine documentation.

```bash
npm run docs
```

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

### Install Underline Extension (Yarn)

Source: https://v6.mantine.dev/others/tiptap

Install the @tiptap/extension-underline package using Yarn.

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

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

### Install Dropzone with Yarn

Source: https://v6.mantine.dev/others/dropzone

Install the @mantine/dropzone package and its dependencies using yarn.

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

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

### Install with NPM

Source: https://v6.mantine.dev/others/spotlight

Install the @mantine/spotlight package using NPM. This package depends on @mantine/core and @mantine/hooks.

```bash
npm install @mantine/spotlight

```

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

### Install Packages (Yarn)

Source: https://v6.mantine.dev/others/tiptap

Install the necessary packages using Yarn for code highlighting with Tiptap.

```bash
yarn add lowlight @tiptap/extension-code-block-lowlight
```

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

### Install Dropzone with NPM

Source: https://v6.mantine.dev/others/dropzone

Install the @mantine/dropzone package and its dependencies using npm.

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

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

### Install Dependencies

Source: https://v6.mantine.dev/pages/contributing

Install project dependencies using yarn.

```bash
yarn
```

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

### Start Development Server

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

Run the Next.js development server to see your changes.

```bash
npm run dev
```

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

### Install with Yarn

Source: https://v6.mantine.dev/others/spotlight

Install the @mantine/spotlight package using Yarn. This package depends on @mantine/core and @mantine/hooks.

```bash
yarn add @mantine/spotlight

```

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

### Install @mantine/ssr package

Source: https://v6.mantine.dev/guides/ssr

Install the necessary package for server-side rendering capabilities.

```bash
yarn add @mantine/ssr
```

```bash
npm install @mantine/ssr
```

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

### Install Mantine Dependencies without Plugin (Yarn)

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

Install core Mantine packages and Emotion for manual server-side rendering setup.

```bash
yarn add @mantine/core @mantine/hooks @mantine/ssr @emotion/react
```

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

### Install stylis-plugin-rtl

Source: https://v6.mantine.dev/guides/rtl

Install the stylis and stylis-plugin-rtl packages using either yarn or npm.

```bash
# Install with yarn
yarn add stylis stylis-plugin-rtl


# or with npm
npm install stylis stylis-plugin-rtl
```

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

### Responsive Flex layout with buttons

Source: https://v6.mantine.dev/core/flex

Illustrates how to use responsive props with the Flex component to adjust layout based on screen size. This example changes direction and gap between small and larger screens. Ensure @mantine/core is installed.

```javascript
import { Flex, Button } from '@mantine/core';


function Demo() {
  return (
    <Flex
      direction={{ base: 'column', sm: 'row' }}
      gap={{ base: 'sm', sm: 'lg' }}
      justify={{ sm: 'center' }}
    >
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </Flex>
  );
}
```

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

### Install @emotion/styled with Yarn

Source: https://v6.mantine.dev/styles/styled

Install the @emotion/styled package using Yarn. This is the first step to enable styled components syntax.

```bash
yarn add @emotion/styled
```

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

### Install @emotion/styled with NPM

Source: https://v6.mantine.dev/styles/styled

Install the @emotion/styled package using npm. This is the first step to enable styled components syntax.

```bash
npm install @emotion/styled
```

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

### Install Text Color Extensions

Source: https://v6.mantine.dev/others/tiptap

Install the @tiptap/extension-color and @tiptap/extension-text-style packages for text color functionality.

```bash
yarn add @tiptap/extension-color @tiptap/extension-text-style
```

```bash
npm install @tiptap/extension-color @tiptap/extension-text-style
```

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

### Basic Notification Examples

Source: https://v6.mantine.dev/core/notification

Demonstrates the default, icon, and loading variants of the Notification component. Includes examples with and without titles, and a loading state with no close button.

```javascript
import { Notification } from '@mantine/core';
import { IconCheck, IconX } from '@tabler/icons-react';

function Demo() {
  return (
    <>
      <Notification title="Default notification">
        This is default notification with title and body
      </Notification>


      <Notification icon={<IconCheck size="1.1rem" />} color="teal" title="Teal notification">
        This is teal notification with icon
      </Notification>


      <Notification icon={<IconX size="1.1rem" />} color="red">
        Bummer! Notification without title
      </Notification>


      <Notification
        loading
        title="Uploading data to the server"
        withCloseButton={false}
      >
        Please wait until data is uploaded, you cannot close this notification yet
      </Notification>
    </>
  );
}

```

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

### Install storybook-dark-mode Addon

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

Install the storybook-dark-mode addon to enable color scheme toggling within Storybook.

```bash
yarn add --dev storybook-dark-mode

```

```bash
npm install --save-dev storybook-dark-mode

```

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

### Responsive width example

Source: https://v6.mantine.dev/styles/style-props

Provides an example of applying responsive width to a Box component, showing how different widths are applied based on screen breakpoints.

```jsx
import { Box } from '@mantine/core';


<Box w={{ base: 320, sm: 480, lg: 640 }} />

```

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

### Python Example

Source: https://v6.mantine.dev/others/prism

A Python function with type hints, docstrings, and conditional logic, including an example of an interpreter prompt.

```python
@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None


class SomeClass:
    pass


>>> message = '''interpreter
... prompt'''

```

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

### Basic MultiSelect Example

Source: https://v6.mantine.dev/core/multi-select

A minimal example demonstrating the MultiSelect component with a predefined data array. The 'data' prop accepts an array of objects, each with 'value' and 'label' properties.

```javascript
import { MultiSelect } from '@mantine/core';


const data = [
  { value: 'react', label: 'React' },
  { value: 'ng', label: 'Angular' },
  { value: 'svelte', label: 'Svelte' },
  { value: 'vue', label: 'Vue' },
  { value: 'riot', label: 'Riot' },
  { value: 'next', label: 'Next.js' },
  { value: 'blitz', label: 'Blitz.js' },
];


function Demo() {
  return (
    <MultiSelect
      data={data}
      label="Your favorite frameworks/libraries"
      placeholder="Pick all that you like"
    />
  );
}
```

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

### Basic useScrollIntoView Example

Source: https://v6.mantine.dev/hooks/use-scroll-into-view

This example demonstrates scrolling a target element into view within a scrollable parent container. Ensure the target and scrollable elements are correctly referenced.

```javascript
import { useScrollIntoView } from '@mantine/hooks';
import { Button, Text, Group, Paper, Box } from '@mantine/core';


function Demo() {
  const { scrollIntoView, targetRef, scrollableRef } = useScrollIntoView<
    HTMLDivElement,
    HTMLDivElement
  >();


  return (
    <Group position="center">
      <Paper ref={scrollableRef} h={300} sx={{ overflowY: 'scroll', flex: 1 }}>
        <Box pt={260} pb={450}>
          <Paper
            ref={targetRef}
            p="xl"
            sx={(theme) => ({
              backgroundColor:
                theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2],
              width: '100%',
            })}
          >
            <Text>Scroll me into view</Text>
          </Paper>
        </Box>
      </Paper>
      <Button onClick={() => scrollIntoView()}>Scroll to target</Button>
    </Group>
  );
}
```

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

### Install Mantine Dependencies without Plugin (NPM)

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

Install core Mantine packages and Emotion for manual server-side rendering setup.

```bash
npm install @mantine/core @mantine/hooks @mantine/ssr @emotion/react
```

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

### Go Example

Source: https://v6.mantine.dev/others/prism

A basic Go program demonstrating channel usage, goroutines, and deferred execution.

```go
package main


import "fmt"


func main() {
    ch := make(chan float64)
    ch <- 1.0e10    // magic number
    x, ok := <- ch
    defer fmt.Println(`exitting now`)
    go println(len("hello world!"))
    return
}


```

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

### Build Production Docs

Source: https://v6.mantine.dev/pages/contributing

Build the production-ready documentation bundle, including running all relevant docs scripts.

```bash
npm run docs:build
```

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

### Get Embla Instance with getEmblaApi Prop

Source: https://v6.mantine.dev/others/carousel

Access the Embla instance using the `getEmblaApi` prop to enhance the carousel with additional logic. This example demonstrates tracking scroll progress and updating a progress bar.

```jsx
import { useCallback, useEffect, useState } from 'react';
import { Carousel, Embla } from '@mantine/carousel';
import { Progress, rem } from '@mantine/core';


function Demo() {
  const [scrollProgress, setScrollProgress] = useState(0);
  const [embla, setEmbla] = useState<Embla | null>(null);


  const handleScroll = useCallback(() => {
    if (!embla) return;
    const progress = Math.max(0, Math.min(1, embla.scrollProgress()));
    setScrollProgress(progress * 100);
  }, [embla, setScrollProgress]);


  useEffect(() => {
    if (embla) {
      embla.on('scroll', handleScroll);
      handleScroll();
    }
  }, [embla]);


  return (
    <>
      <Carousel
        dragFree
        slideSize="50%"
        slideGap="md"
        height={200}
        getEmblaApi={setEmbla}
        initialSlide={2}
      >
        <Carousel.Slide>1</Carousel.Slide>
        <Carousel.Slide>2</Carousel.Slide>
        <Carousel.Slide>3</Carousel.Slide>
        {/* ...other slides */}
      </Carousel>
      <Progress
        value={scrollProgress}
        styles={{ bar: { transitionDuration: '0ms' }, root: { maxWidth: rem(320) } }}
        size="sm"
        mt="xl"
        mx="auto"
      />
    </>
  );
}
```

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

### Get Selected Text with useTextSelection

Source: https://v6.mantine.dev/hooks/use-text-selection

Use the useTextSelection hook to retrieve the currently selected text. The hook returns the selection as a string or null if no text is selected. This example displays the selected text in real-time.

```javascript
import { useTextSelection } from '@mantine/hooks';

function Demo() {
  const selection = useTextSelection();
  return (
    <>
      <div>Select some text here or anywhere on the page and it will be displayed below</div>
      <div>Selected text: {selection?.toString()}</div>
    </>
  );
}
```

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

### SQL Example

Source: https://v6.mantine.dev/others/prism

SQL statements for creating a 'topic' table with a foreign key constraint and inserting initial data.

```sql
CREATE TABLE "topic" (
  "id" serial NOT NULL PRIMARY KEY,
  "forum_id" integer NOT NULL,
  "subject" varchar(255) NOT NULL
);
ALTER TABLE "topic"
ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id")
REFERENCES "forum" ("id");


-- Initials
insert into "topic" ("forum_id", "subject")
values (2, 'D\'artagnian');


```

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

### Force Component Update with use-force-update

Source: https://v6.mantine.dev/hooks/use-force-update

Use the use-force-update hook to get a function that, when called, rerenders the component. This example shows a button that triggers a force update, displaying a new random ID each time.

```javascript
import { Button, Text, Group } from '@mantine/core';
import { useForceUpdate, randomId } from '@mantine/hooks';


function Demo() {
  const forceUpdate = useForceUpdate();


  return (
    <Group position="center">
      <Text>{randomId()}</Text>
      <Button onClick={forceUpdate}>Force update</Button>
    </Group>
  );
}
```

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

### Basic FileInput Usage

Source: https://v6.mantine.dev/core/file-input

A basic example of the FileInput component with a label, placeholder, and asterisk.

```jsx
import { FileInput } from '@mantine/core';


function Demo() {
  return (
    <FileInput
      placeholder="Pick file"
      label="Your resume"
      withAsterisk
    />
  );
}
```

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

### Load Additional Prism Languages

Source: https://v6.mantine.dev/others/prism

Example of how to import and register additional language definitions for Prism.js.

```javascript
import Prism from 'prism-react-renderer/prism';


(typeof global !== 'undefined' ? global : window).Prism = Prism;


require('prismjs/components/prism-kotlin');
require('prismjs/components/prism-csharp');

```

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

### Scroll Area Programmatic Scrolling

Source: https://v6.mantine.dev/core/scroll-area

Use the `viewportRef` prop to get a reference to the viewport element and then call the `scrollTo` method to programmatically scroll to a specific position. This example shows how to scroll to the top, center, and bottom of the content.

```jsx
import { useRef } from 'react';
import { ScrollArea, Button, Stack, Group } from '@mantine/core';


function Demo() {
  const viewport = useRef<HTMLDivElement>(null);


  const scrollToBottom = () =>
    viewport.current.scrollTo({ top: viewport.current.scrollHeight, behavior: 'smooth' });


  const scrollToCenter = () =>
    viewport.current.scrollTo({ top: viewport.current.scrollHeight / 2, behavior: 'smooth' });


  const scrollToTop = () => viewport.current.scrollTo({ top: 0, behavior: 'smooth' });


  return (
    <Stack align="center">
      <ScrollArea w={300} h={200} viewportRef={viewport}>
        {/* ... content */}
      </ScrollArea>


      <Group position="center">
        <Button onClick={scrollToBottom} variant="outline">
          Scroll to bottom
        </Button>
        <Button onClick={scrollToCenter} variant="outline">
          Scroll to center
        </Button>
        <Button onClick={scrollToTop} variant="outline">
          Scroll to top
        </Button>
      </Group>
    </Stack>
  );
}
```

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

### Basic AppShell Usage

Source: https://v6.mantine.dev/core/app-shell

Demonstrates a basic AppShell setup with a header and navbar. Customize the layout by providing components to the header, navbar, and main content areas.

```javascript
import { AppShell, Navbar, Header } from '@mantine/core';


function Demo() {
  return (
    <AppShell
      padding="md"
      navbar={<Navbar width={{ base: 300 }} height={500} p="xs">{/*Navbar content */}</Navbar>}
      header={<Header height={60} p="xs">{/* Header content */}</Header>}
      styles={(theme) => ({
        main: { backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0] },
      })}
    >
      {/* Your application here */}
    </AppShell>
  );
}
```

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

### Generate New Remix Application

Source: https://v6.mantine.dev/guides/remix

Use this command to initialize a new Remix application. Follow the prompts to select necessary packages.

```bash
npx create-remix@latest my-mantine-app
```

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

### Default Slider Example

Source: https://v6.mantine.dev/

A basic example of a Mantine Slider component with default styles.

```jsx
<Slider defaultValue={40} marks={marks} />
```

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

### Input Component with Icon and Placeholder

Source: https://v6.mantine.dev/core/input

Shows how to use the Input component with an icon and a placeholder. This example requires importing Input and an icon component like IconAt.

```javascript
import { Input } from '@mantine/core';
import { IconAt } from '@tabler/icons-react';


function Demo() {
  return (
    <Input
      icon={<IconAt />}
      placeholder="Your email"
    />
  );
}
```

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

### Build All Packages

Source: https://v6.mantine.dev/pages/contributing

Build a local version of all packages in the monorepo.

```bash
npm run build:all
```

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

### Install Carousel Dependencies

Source: https://v6.mantine.dev/others/carousel

Install the necessary packages for the Carousel component, including embla-carousel-react and @mantine/carousel.

```bash
yarn add embla-carousel-react @mantine/carousel

```

```bash
npm install embla-carousel-react @mantine/carousel

```

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

### NavLink Examples

Source: https://v6.mantine.dev/core/nav-link

Demonstrates various configurations of the NavLink component, including icons, right sections, disabled states, descriptions, and different active styles.

```javascript
import { Badge, Box, NavLink } from '@mantine/core';
import { IconHome2, IconGauge, IconChevronRight, IconActivity, IconCircleOff } from '@tabler/icons-react';


function Demo() {
  return (
    <Box w={240}>
      <NavLink label="With icon" icon={<IconHome2 size="1rem" stroke={1.5} />} />
      <NavLink
        label="With right section"
        icon={<IconGauge size="1rem" stroke={1.5} />}
        rightSection={<IconChevronRight size="0.8rem" stroke={1.5} />}
      />
      <NavLink label="Disabled" icon={<IconCircleOff size="1rem" stroke={1.5} />} disabled />
      <NavLink
        label="With description"
        description="Additional information"
        icon={
          <Badge size="xs" variant="filled" color="red" w={16} h={16} p={0}>
            3
          </Badge>
        }
      />
      <NavLink
        label="Active subtle"
        icon={<IconActivity size="1rem" stroke={1.5} />}
        rightSection={<IconChevronRight size="0.8rem" stroke={1.5} />}
        variant="subtle"
        active
      />
      <NavLink
        label="Active light"
        icon={<IconActivity size="1rem" stroke={1.5} />}
        rightSection={<IconChevronRight size="0.8rem" stroke={1.5} />}
        active
      />
      <NavLink
        label="Active filled"
        icon={<IconActivity size="1rem" stroke={1.5} />}
        rightSection={<IconChevronRight size="0.8rem" stroke={1.5} />}
        variant="filled"
        active
      />
    </Box>
  );
}

```

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

### Open Drawer Example

Source: https://v6.mantine.dev/core/drawer

Demonstrates how to open and close a basic Drawer component using the useDisclosure hook from mantine/hooks. Ensure Drawer.Root, Drawer.Overlay, Drawer.Content, Drawer.Header, Drawer.Title, Drawer.CloseButton, and Drawer.Body are imported and used correctly.

```javascript
import { useDisclosure } from '@mantine/hooks';
import { Drawer, Button, Group } from '@mantine/core';


function Demo() {
  const [opened, { open, close }] = useDisclosure(false);


  return (
    <>
      <Drawer.Root opened={opened} onClose={close}>
        <Drawer.Overlay />
        <Drawer.Content>
          <Drawer.Header>
            <Drawer.Title>Drawer title</Drawer.Title>
            <Drawer.CloseButton />
          </Drawer.Header>
          <Drawer.Body>Drawer content</Drawer.Body>
        </Drawer.Content>
      </Drawer.Root>


      <Group position="center">
        <Button onClick={open}>Open drawer</Button>
      </Group>
    </>
  );
}
```

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

### Install @mantine/form with yarn

Source: https://v6.mantine.dev/form/use-form

Install the @mantine/form package using yarn. This package has no external dependencies.

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

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

### Install @mantine/form with npm

Source: https://v6.mantine.dev/form/use-form

Install the @mantine/form package using npm. This package has no external dependencies.

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

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

### use-session-storage Hook Example

Source: https://v6.mantine.dev/hooks/use-local-storage

Demonstrates the basic usage of the use-session-storage hook, which functions similarly to use-local-storage but utilizes window.sessionStorage.

```javascript
import { useSessionStorage } from '@mantine/hooks';


const [value, setValue] = useSessionStorage({ key: 'session-key', defaultValue: 'mantine' });
```

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

### Install @mantine/notifications with NPM

Source: https://v6.mantine.dev/others/notifications

Install the notifications package using NPM. This package depends on `@mantine/core` and `@mantine/hooks`.

```bash
npm install @mantine/notifications
```

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

### Basic Card Usage Example

Source: https://v6.mantine.dev/core/card

Demonstrates a typical use case for the Card component, featuring an image, title, badge, description, and a call-to-action button. Ensure all necessary components are imported.

```javascript
import { Card, Image, Text, Badge, Button, Group } from '@mantine/core';


function Demo() {
  return (
    <Card shadow="sm" padding="lg" radius="md" withBorder>
      <Card.Section>
        <Image
          src="https://images.unsplash.com/photo-1527004013197-933c4bb611b3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=720&q=80"
          height={160}
          alt="Norway"
        />
      </Card.Section>


      <Group position="apart" mt="md" mb="xs">
        <Text weight={500}>Norway Fjord Adventures</Text>
        <Badge color="pink" variant="light">
          On Sale
        </Badge>
      </Group>


      <Text size="sm" color="dimmed">
        With Fjord Tours you can explore more of the magical fjord landscapes with tours and
        activities on and around the fjords of Norway
      </Text>


      <Button variant="light" color="blue" fullWidth mt="md" radius="md">
        Book classic tour now
      </Button>
    </Card>
  );
}
```

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

### Install @mantine/notifications with Yarn

Source: https://v6.mantine.dev/others/notifications

Install the notifications package using Yarn. This package depends on `@mantine/core` and `@mantine/hooks`.

```bash
yarn add @mantine/notifications
```

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

### Deploy Docs to GitHub Pages

Source: https://v6.mantine.dev/pages/contributing

Deploy the built documentation to GitHub Pages after running all necessary build scripts.

```bash
npm run docs:deploy
```

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

### Install @mantine/modals

Source: https://v6.mantine.dev/others/modals

Install the @mantine/modals package using yarn or npm. This package depends on @mantine/core and @mantine/hooks.

```bash
yarn add @mantine/modals
```

```bash
npm install @mantine/modals
```

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

### Initialize Gatsby Application

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

Use this command to create a new Gatsby application. You will be prompted to choose packages for your application.

```bash
npm init gatsby
```

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

### Install @mantine/nprogress with npm

Source: https://v6.mantine.dev/others/nprogress

Install the @mantine/nprogress package using npm. This package depends on @mantine/core and @mantine/hooks.

```bash
npm install @mantine/nprogress
```

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

### Install @mantine/nprogress with Yarn

Source: https://v6.mantine.dev/others/nprogress

Install the @mantine/nprogress package using Yarn. This package depends on @mantine/core and @mantine/hooks.

```bash
yarn add @mantine/nprogress
```

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

### CSS Example

Source: https://v6.mantine.dev/others/prism

CSS code demonstrating font face declarations, body styling, import rules, and media queries for print.

```css
@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}


body, .usertext {
  color: #F0F0F0; background: #600;
  font-family: Chunkfive, sans;
  --heading-1: 2rem/2rem Helvetica, sans-serif;
}


@import url(print.css);


@media print {
  a[href^=http]::after {
    content: attr(href)
  }
}


```

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

### Install Mantine Dependencies (NPM)

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

Install core Mantine packages and Next.js integration for NPM users.

```bash
npm install @mantine/core @mantine/hooks @mantine/next @emotion/server @emotion/react
```

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

### Basic Spotlight Usage

Source: https://v6.mantine.dev/others/spotlight

Wrap your application with SpotlightProvider and define actions to be displayed in the spotlight. The spotlight can be opened programmatically or via a keyboard shortcut.

```javascript
import { Button, Group } from '@mantine/core';
import { SpotlightProvider, spotlight } from '@mantine/spotlight';
import type { SpotlightAction } from '@mantine/spotlight';
import { IconHome, IconDashboard, IconFileText, IconSearch } from '@tabler/icons-react';


function SpotlightControl() {
  return (
    <Group position="center">
      <Button onClick={spotlight.open}>Open spotlight</Button>
    </Group>
  );
}


const actions: SpotlightAction[] = [
  {
    title: 'Home',
    description: 'Get to home page',
    onTrigger: () => console.log('Home'),
    icon: <IconHome size="1.2rem" />,
  },
  {
    title: 'Dashboard',
    description: 'Get full information about current system status',
    onTrigger: () => console.log('Dashboard'),
    icon: <IconDashboard size="1.2rem" />,
  },
  {
    title: 'Documentation',
    description: 'Visit documentation to lean more about all features',
    onTrigger: () => console.log('Documentation'),
    icon: <IconFileText size="1.2rem" />,
  },
];


function Demo() {
  return (
    <SpotlightProvider
      actions={actions}
      searchIcon={<IconSearch size="1.2rem" />}
      searchPlaceholder="Search..."
      shortcut="mod + shift + 1"
      nothingFoundMessage="Nothing found..."
    >
      <SpotlightControl />
    </SpotlightProvider>
  );
}

```

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

### Install Mantine Dependencies (Yarn)

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

Install core Mantine packages and Next.js integration for Yarn users.

```bash
yarn add @mantine/core @mantine/hooks @mantine/next @emotion/server @emotion/react
```

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

### Install @mantine/prism package

Source: https://v6.mantine.dev/others/prism

Install the @mantine/prism package using yarn or npm. This package depends on @mantine/core and @mantine/hooks.

```bash
yarn add @mantine/prism
```

```bash
npm install @mantine/prism
```

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

### Install Mantine Dependencies with NPM

Source: https://v6.mantine.dev/guides/remix

Install core Mantine packages and Remix integration for your project using NPM.

```bash
npm install @mantine/core @mantine/hooks @mantine/remix @emotion/server @emotion/react
```

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

### Responsive AppShell with Header, Navbar, Aside, and Footer

Source: https://v6.mantine.dev/core/app-shell

Implement a fully responsive AppShell that adapts to different screen sizes. Includes a burger menu for mobile navigation and adjusts layout for larger screens.

```javascript
import { useState } from 'react';
import {
  AppShell,
  Navbar,
  Header,
  Footer,
  Aside,
  Text,
  MediaQuery,
  Burger,
  useMantineTheme,
} from '@mantine/core';


export default function AppShellDemo() {
  const theme = useMantineTheme();
  const [opened, setOpened] = useState(false);
  return (
    <AppShell
      styles={{
        main: {
          background: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
        },
      }}
      navbarOffsetBreakpoint="sm"
      asideOffsetBreakpoint="sm"
      navbar={
        <Navbar p="md" hiddenBreakpoint="sm" hidden={!opened} width={{ sm: 200, lg: 300 }}>
          <Text>Application navbar</Text>
        </Navbar>
      }
      aside={
        <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
          <Aside p="md" hiddenBreakpoint="sm" width={{ sm: 200, lg: 300 }}>
            <Text>Application sidebar</Text>
          </Aside>
        </MediaQuery>
      }
      footer={
        <Footer height={60} p="md">
          Application footer
        </Footer>
      }
      header={
        <Header height={{ base: 50, md: 70 }} p="md">
          <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
            <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
              <Burger
                opened={opened}
                onClick={() => setOpened((o) => !o)}
                size="sm"
                color={theme.colors.gray[6]}
                mr="xl"
              />
            </MediaQuery>


            <Text>Application header</Text>
          </div>
        </Header>
      }
    >
      <Text>Resize app to see responsive navbar in action</Text>
    </AppShell>
  );
}
```

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

### Install Mantine Dependencies with Yarn

Source: https://v6.mantine.dev/guides/remix

Install core Mantine packages and Remix integration for your project using Yarn.

```bash
yarn add @mantine/core @mantine/hooks @mantine/remix @emotion/server @emotion/react
```

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

### Valid Braces Kata Example

Source: https://v6.mantine.dev/others/tiptap

A JavaScript implementation for validating braces in a string, used as an example for code highlighting.

```javascript
// Valid braces Kata – https://www.codewars.com/kata/5277c8a221e209d3f6000b56


const pairs: Record<string, string> = {
  '[': ']',
  '{': '}',
  '(': ')',
};


const openBraces = Object.keys(pairs);


export function validBraces(braces: string) {
  const opened: string[] = [];


  for (let i = 0; i < braces.length; i += 1) {
    const brace = braces[i];


    if (openBraces.includes(brace)) {
      opened.push(brace);
      continue;
    }


    if (pairs[opened[opened.length - 1]] !== brace) {
      return false
    }


    opened.pop();
  }


  return opened.length === 0;
}
```

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

### Basic DatePickerInput Usage

Source: https://v6.mantine.dev/dates/date-picker-input

Demonstrates the basic setup of DatePickerInput with a placeholder, label, and asterisk for required input.

```jsx
import { DatePickerInput } from '@mantine/dates';


function Demo() {
  return (
    <DatePickerInput
      placeholder="Pick date"
      label="Pick date"
      withAsterisk
    />
  );
}
```

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

### use-form Initial Values Setup

Source: https://v6.mantine.dev/form/use-form

Sets up the initial values for the use-form hook, including nested objects and arrays.

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


const form = useForm({
  initialValues: {
    path: '',
    path2: '',
    user: {
      firstName: 'John',
      lastName: 'Doe',
    },
    fruits: [
      { name: 'Banana', available: true },
      { name: 'Orange', available: false },
    ],
    accepted: false,
  },
});
```

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

### Basic useQueue Usage

Source: https://v6.mantine.dev/hooks/use-queue

Initialize useQueue with initial values and a limit. New items are added to state if space is available, otherwise they go to the queue.

```javascript
import { useQueue } from '@mantine/hooks';


const { state, queue, add, update, cleanQueue } = useQueue({
  initialValues: [1],
  limit: 2,
});


// state -> [1], queue -> []


// When state.length is less that limit, new items are added to state
add(2);
// state -> [1,2], queue -> []


// When state.length is equal to limit, new items are added to queue
add(3, 4, 5, 6);
// state -> [1,2], queue -> [3,4,5,6]


// Use update function to modify items
update((values) => values.map((item) => item * 3));
// state -> [3,6], queue -> [9,12,15,18]


// If you add or remove items in update function,
// they will be divided between queue and state according to limit
// order is always preserved
update((values) => values.filter((item) => item % 2));
// state -> [3,9], queue -> [15]


// Remove all items from queue
cleanQueue();
// state -> [3,9], queue -> []


// Remove all items from queue and state
update(() => []);
// state -> [], queue -> []
```

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

### Get Dropzone Ref

Source: https://v6.mantine.dev/others/dropzone

This snippet shows how to get a ref to the Dropzone component using `useRef` and `useEffect` to programmatically focus it.

```jsx
import { useRef, useEffect } from 'react';
import { Dropzone } from '@mantine/dropzone';


function Demo() {
  const dropzoneRef = useRef<HTMLDivElement>(null);


  useEffect(() => {
    dropzoneRef.current.focus();
  }, []);


  return <Dropzone ref={dropzoneRef}>{/* children */}</Dropzone>;
}
```

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

### Basic Usage of useResizeObserver

Source: https://v6.mantine.dev/hooks/use-resize-observer

A basic example demonstrating how to attach the ref returned by useResizeObserver to an element to observe its size and position.

```javascript
import { useResizeObserver } from '@mantine/hooks';


function Demo() {
  const [ref, rect] = useResizeObserver();
  return <div ref={ref}>Observed</div>;
}
```

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

### Install Mantine Dependencies with NPM

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

Install core Mantine packages, Gatsby plugin, and Emotion for server-side rendering when using the plugin.

```bash
npm install @mantine/core @mantine/hooks gatsby-plugin-mantine @emotion/server @emotion/react
```

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

### Min, Max, and Step Configuration

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

Configure minimum, maximum, and step values to control the range and increment/decrement behavior of the NumberInput. The first example sets a strict range for age, while the second allows for larger steps for weight.

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


function Demo() {
  return (
    <>
      <NumberInput
        label="Your age"
        description="From 0 to 120, step is 1"
        placeholder="Your age"
        max={120}
        min={0}
      />


      <NumberInput
        label="Your weight in kg"
        description="From 0 to Infinity, step is 5"
        defaultValue={80}
        step={5}
        min={0}
      />
    </>
  );
}
```

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

### Install Mantine Dependencies with Yarn

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

Install core Mantine packages, Gatsby plugin, and Emotion for server-side rendering when using the plugin.

```bash
yarn add @mantine/core @mantine/hooks gatsby-plugin-mantine @emotion/server @emotion/react
```

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

### Basic Container Usage

Source: https://v6.mantine.dev/core/container

Demonstrates the default Container, an xs container with xs padding, and a 30rem container with no horizontal padding.

```javascript
import { Container } from '@mantine/core';

function Demo() {
  return (
    <>
      <Container>
        Default container
      </Container>


      <Container size="xs" px="xs">
        xs container with xs horizontal padding
      </Container>


      <Container size="30rem" px={0}>
        30rem container with 0 horizontal padding
      </Container>
    </>
  );
}
```

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

### Run Syncpack

Source: https://v6.mantine.dev/pages/contributing

Execute the syncpack tool, likely for managing dependencies across packages.

```bash
syncpack
```

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

### Get FileInput Reference

Source: https://v6.mantine.dev/core/file-input

Use the `useRef` hook to get a reference to the FileInput component. This is useful for imperative access to the input element.

```jsx
import { useRef } from 'react';
import { FileInput } from '@mantine/core';


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

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

### Install Mantine DS package

Source: https://v6.mantine.dev/pages/about

Install the @mantine/ds package using yarn or npm to access Mantine logos and other design system assets.

```bash
yarn add @mantine/ds
```

```bash
npm install @mantine/ds
```

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

### MediaQuery with Compatible Button Components

Source: https://v6.mantine.dev/core/media-query

Demonstrates how to use the MediaQuery component with child components that correctly handle the `className` prop. The first example shows an incompatible component, while the subsequent two show compatible implementations.

```jsx
// Will not work with MediaQuery – component does not handle className
const MyButton => ({ label }) => <button>{label}</button>


// Will work with MediaQuery – handle className
const MyButton => ({ label, className }) => <button className={className}>{label}</button>


// Will work with MediaQuery – handle className
const MyButton => ({ label, ...others }) => <button {...others}>{label}</button>
```

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

### Get Paper Component Ref

Source: https://v6.mantine.dev/core/paper

Demonstrates how to get a reference to the Paper component's underlying DOM element using the useRef hook.

```javascript
import { useRef } from 'react';
import { Paper } from '@mantine/core';


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

```
Tokens:
Raw