### Start Development Server

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

Command to launch the local development server after installation.

```bash
npm start
```

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

### Start Development Server

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

Starts the development server for the Vite project. This command is used after initial setup or after making changes to view them in the browser.

```bash
npm run dev
```

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

### Install Mantine Spotlight Package

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

Instructions for installing the @mantine/spotlight package using common package managers.

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

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

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

### Install Mantine Dropzone

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

Instructions for installing the @mantine/dropzone package using common package managers.

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

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

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

### Installation

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

Install the Mantine Prism component using yarn or npm. It depends on `@mantine/core` and `@mantine/hooks`.

```APIDOC
## Installation

Package depends on `@mantine/core` and `@mantine/hooks`.

Install with yarn:
```bash
yarn add @mantine/prism
```

Install with npm:
```bash
npm install @mantine/prism
```
```

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

### Setup ModalsProvider

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

Wraps the application with the ModalsProvider component to enable global modal management.

```javascript
import { MantineProvider } from '@mantine/core';
import { ModalsProvider } from '@mantine/modals';

function Demo() {
  return (
    <MantineProvider>
      <ModalsProvider>
        <App />
      </ModalsProvider>
    </MantineProvider>
  );
}
```

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

### Drawer Sizing Examples

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

Illustrates how to control the width or height of the Drawer using the size prop with different units.

```typescript
<Drawer position="right" size="xl" />
<Drawer position="top" size={160} />
<Drawer position="left" size="75%" />
```

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

### Basic Hook Usage

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

A minimal example demonstrating how to initialize the hook and attach the returned ref to a div element.

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

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

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

### Initialize Gatsby Application

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

Command to create a new Gatsby.js application. This is the first step before installing any libraries.

```bash
npm init gatsby
```

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

### Install Tiptap Extensions

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

Commands to install additional Tiptap extension packages required for specific editor controls or features like placeholders.

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

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

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

### Install RTL dependencies

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

Commands to install the necessary stylis and stylis-plugin-rtl packages required for RTL support in Mantine.

```bash
yarn add stylis stylis-plugin-rtl
```

```bash
npm install stylis stylis-plugin-rtl
```

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

### use-local-storage Example: Color Scheme Toggle

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

An example of using the use-local-storage hook to manage the application's color scheme, allowing users to toggle between light and dark modes, with the preference persisted in localStorage.

```javascript
import { useLocalStorage } from '@mantine/hooks';
import { ActionIcon, ColorScheme } from '@mantine/core';
import { IconSun, IconMoonStars } from '@tabler/icons-react';


function ColorSchemeToggle() {
  const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
    key: 'color-scheme',
    defaultValue: 'light',
  });


  const toggleColorScheme = () =>
    setColorScheme((current) => (current === 'dark' ? 'light' : 'dark'));


  return (
    <ActionIcon onClick={toggleColorScheme}>
      {colorScheme === 'dark' ? <IconSun /> : <IconMoonStars />}
    </ActionIcon>
  );
}
```

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

### useClickOutside API and Basic Example

Source: https://v6.mantine.dev/hooks/use-click-outside

Provides an example of the useClickOutside hook's API, showing how to define a handler function for outside clicks and attach the returned ref to a div element.

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


function Example() {
  const handleClickOutside = () => console.log('Clicked outside of div');
  const ref = useClickOutside(handleClickOutside);
  return <div ref={ref} />;
}
```

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

### Basic MultiSelect Implementation

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

A minimal example demonstrating how to initialize a MultiSelect component with a predefined array of data objects.

```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"
    />
  );
}
```

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

### Install Mantine Core and Hooks (Yarn)

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

Installs the core Mantine components library and essential hooks using Yarn. These are fundamental for building UI with Mantine.

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

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

### Install @emotion/styled dependency

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

Commands to install the required @emotion/styled package using yarn or npm to enable styled-components syntax in Mantine projects.

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

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

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

### Accessibility Best Practices

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

Examples of how to properly label the input for screen reader support.

```typescript
<PasswordInput label="Your password" />
<PasswordInput aria-label="Your password" />
```

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

### Configure Spotlight Keyboard Shortcuts

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

Examples of how to customize or disable keyboard shortcuts for the Spotlight interface.

```typescript
import { SpotlightProvider } from '@mantine/spotlight';

function Demo() {
  return (
    <SpotlightProvider shortcut={['mod + P', 'mod + K', '/']} actions={[]}>
      <App />
    </SpotlightProvider>
  );
}
```

```typescript
import { SpotlightProvider } from '@mantine/spotlight';

function Demo() {
  return (
    <SpotlightProvider shortcut={null} actions={[]}>
      <App />
    </SpotlightProvider>
  );
}
```

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

### Install Mantine Dependencies with Gatsby Plugin

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

Installs the necessary Mantine core and hooks packages along with the Gatsby plugin and Emotion for styling. This is for the simplified setup.

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

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

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

### Initialize Remix Application

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

Command to scaffold a new Remix project using the official CLI.

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

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

### Implement Spotlight Provider and Actions

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

Demonstrates how to wrap an application with SpotlightProvider and define searchable actions with icons and triggers.

```typescript
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 without Plugin

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

Installs Mantine core, hooks, and SSR packages along with Emotion. This setup is for manual configuration of the emotion cache and server-side rendering.

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

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

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

### Initialize use-local-storage Hook

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

Demonstrates the basic initialization of the use-local-storage hook with a key and a default value. It shows how to get and set values, including using a callback function for updates.

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


// hook will read value from localStorage.getItem('color-scheme')
// if localStorage is not available or value at given key does not exist
// 'dark' will be assigned to value variable
const [value, setValue] = useLocalStorage({ key: 'color-scheme', defaultValue: 'dark' });


// Value is set both to state and localStorage at 'color-scheme'
setValue('light');


// You can also use callback like in useState hook to set value
setValue((current) => (current === 'dark' ? 'light' : 'dark'));
```

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

### Example Usage of useInterval Hook - React

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

Shows a practical example of using the useInterval hook to create a counter that updates every second. It includes starting, stopping, and toggling the interval.

```javascript
import { useState, useEffect } from 'react';
import { useInterval } from '@mantine/hooks';
import { Stack, Button, Text } from '@mantine/core';


function Demo() {
  const [seconds, setSeconds] = useState(0);
  const interval = useInterval(() => setSeconds((s) => s + 1), 1000);


  useEffect(() => {
    interval.start();
    return interval.stop;
  }, []);


  return (
    <Stack align="center">
      <Text>Page loaded <b>{seconds}</b> seconds ago</Text>
      <Button
        onClick={interval.toggle}
        color={interval.active ? 'red' : 'teal'}
        variant="outline"
      >
        {interval.active ? 'Stop' : 'Start'} counting
      </Button>
    </Stack>
  );
}
```

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

### Get Tab Control Ref with Mantine

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

Demonstrates how to get a reference to a specific Tabs.Tab component using the 'ref' prop. This allows programmatic access to tab elements, for example, to focus them or trigger actions.

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


function Demo() {
  const secondTabRef = useRef<HTMLButtonElement>(null);


  return (
    <Tabs defaultValue="first">
      <Tabs.List>
        <Tabs.Tab value="first">First tab</Tabs.Tab>
        <Tabs.Tab value="Second" ref={secondTabRef}>
          Second tab
        </Tabs.Tab>
        <Tabs.Tab value="third">Third tab</Tabs.Tab>
      </Tabs.List>
    </Tabs>
  );
}
```

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

### Set Item Type for use-list-state

Source: https://v6.mantine.dev/hooks/use-list-state

Examples of how to specify the item type when initializing the hook, especially when starting with an empty array.

```typescript
useListState(['hello']); // ok, item type is string
useListState([]); // not ok, item type is any
useListState<string>([]); // ok, item type is string
```

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

### Install @mantine/nprogress Package

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

Install the @mantine/nprogress package, which depends on @mantine/core and @mantine/hooks. Use either yarn or npm for installation.

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

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

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

### SimpleGrid with Breakpoints

Source: https://v6.mantine.dev/core/simple-grid

Illustrates how to configure responsive behavior for SimpleGrid using the `breakpoints` prop.

```APIDOC
## SimpleGrid with Breakpoints

### Description
This example demonstrates how to define responsive behavior for `SimpleGrid` using the `breakpoints` prop. You can specify different column counts and spacing based on screen width.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Props
- **breakpoints** (SimpleGridBreakpoint[]) - Optional - Breakpoints data to change items per row and spacing based on max-width.
  - **maxWidth** (string | number) - Max-width at which media query will work.
  - **minWidth** (string | number) - Min-width at which media query will work.
  - **cols** (number) - Number of columns per row at given max-width.
  - **spacing** (number | "xs" | "sm" | "md" | "lg" | "xl") - Optional - Spacing at given max-width.
- **cols** (number) - Default amount of columns.
- **spacing** (number | "xs" | "sm" | "md" | "lg" | "xl") - Default spacing between columns.

### Request Example
```javascript
import { SimpleGrid } from '@mantine/core';

function Demo() {
  return (
    <SimpleGrid
      cols={4}
      spacing="lg"
      breakpoints={[
        { maxWidth: '62rem', cols: 3, spacing: 'md' },
        { maxWidth: '48rem', cols: 2, spacing: 'sm' },
        { maxWidth: '36rem', cols: 1, spacing: 'sm' },
      ]}
    >
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </SimpleGrid>
  )
}
```

### Response
N/A (Component Usage)
```

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

### Getting Input Ref

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

Shows how to get a reference to the input element using `useRef`.

```APIDOC
## Getting Input Ref

### Description
This example demonstrates how to obtain a reference to the underlying input element of the TextInput component using the `useRef` hook.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Props
- **ref** (React.RefObject<HTMLInputElement>) - Optional - A ref object to attach to the input element.

### Request Example
```jsx
import { useRef } from 'react';
import { TextInput } from '@mantine/core';

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

### Response
N/A (Component Usage)
```

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

### Configuring Container Sizes

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

Illustrates how to configure default container sizes globally using MantineProvider.

```APIDOC
## Configure Container Sizes

### Description
This section explains how to set custom default sizes for the `Container` component via the `MantineProvider`'s theme configuration.

### Method
N/A (Component Configuration)

### Endpoint
N/A (Component Configuration)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
import { MantineProvider, Container } from '@mantine/core';

function App() {
  return (
    <MantineProvider
      theme={{
        components: {
          Container: {
            defaultProps: {
              sizes: {
                xs: 540,
                sm: 720,
                md: 960,
                lg: 1140,
                xl: 1320,
              },
            },
          },
        },
      }}
    >
      <Container size="sm">Your app</Container>
    </MantineProvider>
  );
}
```

### Response
#### Success Response (200)
N/A (Component Rendering)

#### Response Example
N/A (Component Rendering)
```

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

### Responsive Styles with Style Props

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

Shows how to apply responsive styles using an object syntax with style props.

```APIDOC
## Responsive styles

You can use object syntax to add responsive styles with style props:

### Box with responsive style props

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

function Demo() {
  return (
    <Box
      w={{ base: 200, sm: 400, lg: 500 }}
      py={{ base: 'xs', sm: 'md', lg: 'xl' }}
      bg="blue.7"
      c="#fff"
      ta="center"
      mx="auto"
    >
      Box with responsive style props
    </Box>
  );
}
```

Responsive values are calculated the following way:
  * `base` value is used when none of breakpoint values are applied
  * `xs`, `sm`, `md`, `lg`, `xl` values are used when the viewport width is larger that the value of corresponding breakpoint specified in theme.breakpoints

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

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

In this case the element will have the following styles:

### Response Example
```css
/* Base styles added to element and then get overwritten with responsive values */
.element {
  width: 20rem;
}

/* 48em is theme.breakpoints.sm by default */
@media (min-width: 48em) {
  .element {
    width: 30rem;
  }
}

/* 75em is theme.breakpoints.lg by default */
@media (min-width: 75em) {
  .element {
    width: 40rem;
  }
}
```
```

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

### Install Mantine Dependencies

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

Installs the core Mantine packages and emotion dependencies required for styling.

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

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

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

### Basic Transition Usage

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

Demonstrates how to use the Transition component with a premade 'fade' animation. It takes a boolean 'mounted' prop to trigger the animation and a render function to apply the transition styles.

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

function Demo({ opened }) {
  return (
    <Transition mounted={opened} transition="fade" duration={400} timingFunction="ease">
      {(styles) => <div style={styles}>Your modal</div>}
    </Transition>
  );
}
```

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

### Basic Drawer Implementation

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

Demonstrates the standard implementation of a Drawer using the useDisclosure hook to manage the open/close state.

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

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

  return (
    <>
      <Drawer opened={opened} onClose={close} title="Authentication">
        {/* Drawer content */}
      </Drawer>

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

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

### Drawer Basic Usage with Initial Focus

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

Demonstrates how to open a Drawer and set initial focus to an input element using the `data-autofocus` attribute.

```APIDOC
## Basic Drawer Usage with Initial Focus

### Description
This example shows a basic implementation of the Mantine `Drawer` component. It utilizes the `useDisclosure` hook to manage the open/closed state and includes a `TextInput` with the `data-autofocus` attribute to specify which element should receive focus when the drawer opens.

### Method
N/A (Client-side component)

### Endpoint
N/A (Client-side component)

### Parameters
N/A

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

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

  return (
    <>
      <Drawer opened={opened} onClose={close} title="Focus demo">
        <TextInput label="First input" placeholder="First input" />
        <TextInput
          data-autofocus
          label="Input with initial focus"
          placeholder="It has data-autofocus attribute"
          mt="md"
        />
      </Drawer>

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

### Response
N/A (Client-side component)
```

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

### Install Mantine Prism Package

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

Commands to install the @mantine/prism package using common package managers.

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

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

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

### Install Mantine Notifications Package

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

Commands to install the notifications package using common package managers.

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

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

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

### useOs Hook Usage

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

Demonstrates how to import and use the useOs hook to display the detected operating system.

```APIDOC
## useOs Hook

### Description
Detects the user's operating system. Possible values are: `undetermined`, `macos`, `ios`, `windows`, `android`, `linux`. If the OS cannot be identified (e.g., during server-side rendering), `undetermined` will be returned.

### Method
```javascript
import { useOs } from '@mantine/hooks';
```

### Usage Example
```javascript
import { useOs } from '@mantine/hooks';

function Demo() {
  const os = useOs();
  return <>Your os is <b>{os}</b></>;
}
```

### TypeScript

You can import the `OS` union type from `@mantine/hooks` for type safety.

```typescript
import type { OS } from '@mantine/hooks';
// OS type is 'undetermined' | 'macos' | 'ios' | 'windows' | 'android' | 'linux'
```

### Definition

```typescript
function getOS(options?: { getValueInEffect: boolean }): 'undetermined' | 'macos' | 'ios' | 'windows' | 'android' | 'linux';
```
```

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

### Install Mantine Modals Package

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

Commands to install the @mantine/modals package using popular package managers.

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

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

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

### Install Mantine Carousel Dependencies

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

Commands to install the necessary packages for the carousel component using yarn or npm.

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

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

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

### SimpleGrid Spacing Examples

Source: https://v6.mantine.dev/core/simple-grid

Illustrates how to set spacing for the SimpleGrid component using theme spacing values (e.g., 'xl') or pixel values.

```javascript
// xl spacing from theme.spacing
<SimpleGrid spacing="xl" />;


// 1rem spacing
<SimpleGrid spacing={16} />;
```

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

### Initialize Mantine with Dark Theme

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

Demonstrates how to set up the MantineProvider to enable a dark color scheme for your application. This is a foundational step for theming.

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

function Demo() {
  return (
    <MantineProvider theme={{ colorScheme: 'light' }}>
      <App />
    </MantineProvider>
  );
}
```

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

### Get Input Ref

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

Demonstrates how to get a reference to the FileInput component's input element using `useRef`.

```APIDOC
## Get Input Ref

### Description
Access the underlying input element of the FileInput component by using the `ref` prop with React's `useRef` hook. This allows for imperative manipulation or inspection of the input.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

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

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

### Response
#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A
```

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

### Import SimpleGrid Component

Source: https://v6.mantine.dev/core/simple-grid

Demonstrates how to import the SimpleGrid component from the '@mantine/core' package.

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

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

### Get Button Ref

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

Shows how to get a reference to the Button component's root element using `useRef`.

```APIDOC
## Get Ref

### Description

This example demonstrates how to obtain a reference to the Button component's underlying DOM element using the `useRef` hook.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Request Example

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

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

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

### Initialize Next.js Project

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

Command to scaffold a new Next.js application with TypeScript support.

```shell
yarn create next-app --typescript
```

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

### Nested Objects Example

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

An example of a form with nested objects and checkboxes, showing how to bind inputs using `getInputProps`.

```APIDOC
## Nested objects

### Form Example

```javascript
import { useForm } from '@mantine/form';
import { TextInput, Checkbox, Code, Text, Box } from '@mantine/core';

function Demo() {
  const form = useForm({
    initialValues: {
      terms: false,
      user: {
        firstName: '',
        lastName: '',
      },
    },
  });

  return (
    <Box maw={320} mx="auto">
      <TextInput
        label="First name"
        placeholder="First name"
        {...form.getInputProps('user.firstName')}
      />
      <TextInput
        label="Last name"
        placeholder="Last name"
        mt="md"
        {...form.getInputProps('user.lastName')}
      />
      <Checkbox
        label="I accepts terms & conditions"
        mt="sm"
        {...form.getInputProps('terms', { type: 'checkbox' })}
      />

      <Text size="sm" weight={500} mt="xl">
        Form values:
      </Text>
      <Code block mt={5}>
        {JSON.stringify(form.values, null, 2)}
      </Code>
    </Box>
  );
}
```

### Form Values Example

```json
{
  "terms": false,
  "user": {
    "firstName": "",
    "lastName": ""
  }
}
```
```

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

### Install @mantine/ssr Package

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

Installs the necessary @mantine/ssr package for server-side rendering. Supports both Yarn and npm package managers.

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

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

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

### SimpleGrid with Min-Width Breakpoints

Source: https://v6.mantine.dev/core/simple-grid

Demonstrates a mobile-first approach using `minWidth` in the `breakpoints` prop to define column layouts as screen width increases.

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

function Demo() {
  return (
    <SimpleGrid
      breakpoints={[
        { minWidth: 'sm', cols: 2 },
        { minWidth: 'md', cols: 3 },
        { minWidth: 1200, cols: 4 },
      ]}>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </SimpleGrid>
  );
}
```

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

### Get Input Ref

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

Demonstrates how to get a reference to the NumberInput's underlying input element using the `ref` prop.

```APIDOC
## Get input ref

### Request Example
```jsx
import { useRef } from 'react';
import { NumberInput } from '@mantine/core';

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

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

### Control Spotlight with useSpotlight hook

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

Demonstrates how to use the useSpotlight hook to programmatically open the spotlight component from a button click.

```typescript
import { useSpotlight } from '@mantine/spotlight';
import { Button, Group } from '@mantine/core';

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

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

### Install Mantine Rich Text Editor dependencies

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

Commands to install the required packages for the Mantine RichTextEditor using yarn or npm.

```bash
yarn add @mantine/tiptap @mantine/core @mantine/hooks @tabler/icons-react @tiptap/react @tiptap/pm @tiptap/extension-link @tiptap/starter-kit
```

```bash
npm install @mantine/tiptap @mantine/core @mantine/hooks @tabler/icons-react @tiptap/react @tiptap/pm @tiptap/extension-link @tiptap/starter-kit
```

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

### Install @mantine/form Package

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

Instructions for installing the @mantine/form package using npm or yarn. This package is standalone and does not require other Mantine libraries.

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

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

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

### Initialize and Use useQueue Hook

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

Demonstrates the basic usage of the useQueue hook, including initialization with initial values and a limit, adding items that exceed the limit to the queue, updating existing items, and cleaning 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 -> []
```

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

### Specify Accepted File Types by Array of MIME Types

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

This example shows an alternative way to specify accepted file types using an array of MIME type strings directly in the `accept` prop. This is useful for accepting a predefined list of common image formats like PNG, JPEG, SVG, and GIF.

```javascript
import { Dropzone } from '@mantine/dropzone';


function Demo() {
  return (
    <Dropzone accept={['image/png', 'image/jpeg', 'image/sgv+xml', 'image/gif']}>
      {/* children */}
    </Dropzone>
  );
}
```

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

### Dropzone Basic Usage

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

Demonstrates the basic implementation of the Dropzone component for capturing files with drag and drop functionality. It includes examples for handling accepted and rejected files, setting maximum file size, and specifying accepted MIME types.

```APIDOC
## Dropzone Basic Usage

### Description
This example shows how to use the `Dropzone` component to allow users to drag and drop files or click to select them. It configures the component to accept image files, reject files larger than 5MB, and provides feedback for accepted and rejected files.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Props
- **onDrop** (function) - Required - Callback function that is called when files are dropped.
- **onReject** (function) - Required - Callback function that is called when files are rejected.
- **maxSize** (number) - Optional - Maximum file size in bytes.
- **accept** (object or array) - Optional - MIME types or file extensions that are accepted.

### Request Example
```javascript
import { Group, Text, useMantineTheme, 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<DropzoneProps>) {
  const theme = useMantineTheme();
  return (
    <Dropzone
      onDrop={(files) => console.log('accepted files', files)}
      onReject={(files) => console.log('rejected files', files)}
      maxSize={3 * 1024 ** 2}
      accept={IMAGE_MIME_TYPE}
      {...props}
    >
      <Group position="center" spacing="xl" style={{ minHeight: rem(220), pointerEvents: 'none' }}>
        <Dropzone.Accept>
          <IconUpload
            size="3.2rem"
            stroke={1.5}
            color={theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]}
          />
        </Dropzone.Accept>
        <Dropzone.Reject>
          <IconX
            size="3.2rem"
            stroke={1.5}
            color={theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]}
          />
        </Dropzone.Reject>
        <Dropzone.Idle>
          <IconPhoto size="3.2rem" stroke={1.5} />
        </Dropzone.Idle>


        <div>
          <Text size="xl" inline>
            Drag images here or click to select files
          </Text>
          <Text size="sm" color="dimmed" inline mt={7}>
            Attach as many files as you like, each file should not exceed 5mb
          </Text>
        </div>
      </Group>
    </Dropzone>
  );
}
```

### Response
N/A (Component Usage)

### Response Example
N/A (Component Usage)
```

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

### Install Mantine Logo Component

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

Demonstrates how to install the @mantine/ds package to use the MantineLogo component. This package provides design system assets.

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

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

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

### Setup MantineProvider with RTL cache

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

Initialize the emotion cache with the rtlPlugin and pass it to the MantineProvider to enable RTL styles globally.

```javascript
import { MantineProvider, createEmotionCache } from '@mantine/core';
import rtlPlugin from 'stylis-plugin-rtl';

const rtlCache = createEmotionCache({
  key: 'mantine-rtl',
  stylisPlugins: [rtlPlugin],
});

function Demo() {
  return (
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS
      emotionCache={rtlCache}
      theme={{ dir: 'rtl' }}
    >
      <App />
    </MantineProvider>
  );
}
```

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

### Install Mantine Core and Hooks (NPM)

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

Installs the core Mantine components library and essential hooks using NPM. These are fundamental for building UI with Mantine.

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

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

### SimpleGrid with Min-Width Breakpoints

Source: https://v6.mantine.dev/core/simple-grid

Shows how to use `min-width` breakpoints for a mobile-first approach in SimpleGrid.

```APIDOC
## SimpleGrid with Min-Width Breakpoints

### Description
This example demonstrates using `min-width` breakpoints for a mobile-first responsive design with the `SimpleGrid` component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Props
- **breakpoints** (SimpleGridBreakpoint[]) - Optional - Breakpoints data to change items per row and spacing based on min-width.
  - **minWidth** (string | number) - Min-width at which media query will work.
  - **cols** (number) - Number of columns per row at given min-width.
  - **spacing** (number | "xs" | "sm" | "md" | "lg" | "xl") - Optional - Spacing at given min-width.

### Request Example
```javascript
import { SimpleGrid } from '@mantine/core';

function Demo() {
  return (
    <SimpleGrid
      breakpoints={[
        { minWidth: 'sm', cols: 2 },
        { minWidth: 'md', cols: 3 },
        { minWidth: 1200, cols: 4 },
      ]}
    >
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </SimpleGrid>
  );
}
```

### Response
N/A (Component Usage)
```

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

### Implement Controlled Spotlight Search

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

Demonstrates how to use the SpotlightProvider to manage a controlled search query. It shows how to dynamically update actions based on the current query state, allowing for conditional UI behavior.

```typescript
import { useState } from 'react';
import { Button, Group } from '@mantine/core';
import { SpotlightProvider, spotlight, SpotlightAction } from '@mantine/spotlight';

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

function Demo() {
  const [query, setQuery] = useState('');
  const actions: SpotlightAction[] =
    query !== '%%secret%%'
      ? [
          {
            title: 'Reveal secret actions',
            description: 'Click this action to reveal secret actions',
            onTrigger: () => setQuery('%%secret%%'),
            closeOnTrigger: false,
          },
        ]
      : [
          { title: 'Super secret action', keywords: '%%secret%%', onTrigger: () => {} },
          {
            title: 'Rick roll',
            description: 'Do not click',
            keywords: '%%secret%%',
            onTrigger: () => {
              window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
            },
          },
        ];

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

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

### Get Textarea Input Reference - React

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

Demonstrates how to get a reference to the underlying HTMLTextAreaElement of the Mantine UI Textarea component using the useRef hook in React.

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


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

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

### NativeSelect Get Input Ref - React

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

Explains how to get a reference to the NativeSelect input element using the `useRef` hook. This allows for imperative manipulation of the input.

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

function Demo() {
  const ref = useRef<HTMLSelectElement>(null);
  return <NativeSelect ref={ref} data={[]} />;
}
```

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

### Drawer Basic Usage

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

Demonstrates the basic implementation of the Drawer component, including how to open and close it using the `useDisclosure` hook.

```APIDOC
## Drawer Basic Usage

### Description
This example shows how to use the `Drawer` component with basic functionality. It utilizes the `useDisclosure` hook from `@mantine/hooks` to manage the open/closed state of the drawer.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Props
- **opened** (boolean) - Required - Controls the visibility of the drawer.
- **onClose** (function) - Required - Callback function to close the drawer.
- **title** (string) - Optional - Sets the title displayed in the drawer header.

### Request Example
```jsx
import { useDisclosure } from '@mantine/hooks';
import { Drawer, Button, Group } from '@mantine/core';

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

  return (
    <>
      <Drawer opened={opened} onClose={close} title="Authentication">
        {/* Drawer content */}
      </Drawer>

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

### Response
#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

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

### Implement Image Previews

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

Shows how to handle file uploads and generate object URLs to display image previews in a grid layout.

```typescript
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<FileWithPath[]>([]);
  const previews = files.map((file, index) => {
    const imageUrl = URL.createObjectURL(file);
    return (
      <Image
        key={index}
        src={imageUrl}
        imageProps={{ onLoad: () => URL.revokeObjectURL(imageUrl) }}
      />
    );
  });

  return (
    <div>
      <Dropzone accept={IMAGE_MIME_TYPE} onDrop={setFiles}>
        <Text align="center">Drop images here</Text>
      </Dropzone>
      <SimpleGrid
        cols={4}
        breakpoints={[{ maxWidth: 'sm', cols: 1 }]}
        mt={previews.length > 0 ? 'xl' : 0}
      >
        {previews}
      </SimpleGrid>
    </div>
  );
}
```

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

### Get NumberInput Element Reference

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

Explains how to get a reference to the NumberInput's underlying HTML input element using the `ref` prop. This is useful for imperative DOM manipulations or integrating with other libraries.

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

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

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

### Basic Autocomplete Implementation

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

Demonstrates how to initialize the Autocomplete component with a placeholder, label, and a data array for suggestions.

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

function Demo() {
  return (
    <Autocomplete
      placeholder="Pick one"
      label="Your favorite framework/library"
      withAsterisk
      data={['React', 'Angular', 'Svelte', 'Vue']}
    />
  );
}
```

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

### Basic MantineProvider Setup in App.tsx

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

Replaces the default App.tsx content to include MantineProvider and a simple Text component. This demonstrates the basic setup for using Mantine components within a React application.

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


export default function App() {
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS>
      <Text>Welcome to Mantine!</Text>
    </MantineProvider>
  );
}
```

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

### Initialize MantineProvider

Source: https://v6.mantine.dev/pages/getting-started

Wraps the application root with MantineProvider to apply global styles and normalize CSS, which is required for Mantine components to function correctly.

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

function Demo() {
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  );
}
```