Usage with TypeScript
@mantine/* packages are fully compatible with TypeScript. All examples in the documentation
are written in TypeScript – you can copy-paste them to your project without any changes.
This guide will help you get familiar with types that
@mantine/core package exports.
@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:
Note that there are two variations of props types: for polymorphic components and for regular components.
Regular components props types include
X is the root element
type, for example
Example of extending regular component props:
Polymorphic components props types do not include
because their root element depends on the
component prop value.
Example of extending polymorphic components props:
ElementProps is a utility type similar to
React.ComponentPropsWithoutRef, but with additional
features. It replaces native elements
style prop with Mantine style prop and
allows omitting properties that are passed as a second type.
MantineTheme is a type of theme object. You can use it to add types
to functions that accept theme object as an argument:
MantineThemeOverride type is a deep partial of
MantineTheme. It can be used in functions
that accept theme override as an argument:
MantineColorScheme is a union of
'light' | 'dark' | 'auto' values. You can use to add types
to function that accept color scheme as an argument:
MantineSize type is a union of
'xs' | 'sm' | 'md' | 'lg' | 'xl' values. You can use to add types
to various props that accept size as an argument, for example,
You can change
theme.colors types by extending
.d.ts file. Create
mantine.d.ts anywhere in your project (must be included in
to extend theme object types.
Note that extending theme type is not required, it is only needed if you want to make your theme object types more strict and add autocomplete in your editor.