Usage with TypeScript

Mantine exports types for every component, this guide will help you understand how to use and extend them.

Components props types

Each @mantine/ package that exports components, exports props types for these components as well. You can import component props types by adding Props to the component name, for example, you can import Button and DatePicker components props like so:

import type { ButtonProps } from '@mantine/core';
import type { DatePickerProps } from '@mantine/dates';

Styles names

Each component that supports Styles API exports type with selectors that can be used in classNames and styles props. To import these types add StylesNames to the component name:

import type { SliderStylesNames } from '@mantine/core';

Selectors type

Selectors type extracts styles names from useStyles hook:

import { createStyles, Selectors } from '@mantine/core';

const useStyles = createStyles(() => ({
  body: {},
  header: {},
  footer: {},
}));

type ComponentStylesNames = Selectors<typeof useStyles>;
// -> 'body' | 'header' | 'footer'

MantineTheme type

Use MantineTheme type when theme type cannot be inferred, for example when you want to accept Mantine theme as an argument of a function:

import { MantineTheme, useMantineTheme } from '@mantine/core';

function getPrimaryColor(theme: MantineTheme) {
  return theme.colors.blue[5];
}

function Demo() {
  const theme = useMantineTheme();
  return <div style={{ color: getPrimaryColor(theme) }} />;
}

Other exported types

Other types exported from @mantine/core package:

• MantineSize – 'xs' | 'sm' | 'md' | 'lg' | 'xl'
• MantineNumberSize – 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number
• MantineShadow – MantineSize | (string & {})
• MantineGradient – { from: string; to: string; deg?: number; }
• MantineColor – key of theme.colors
• ColorScheme – 'light' | 'dark'

Polymorphic components type

Polymorphic components require passing a type if you need to use props that require callback functions:

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

// Works correctly, type is not required
<Button component="a" href="/">Link</Button>

// Type is required, callback prop is used
<Button<'a'> component="a" onClick={event => {}}>Link</Button>