Mantine Custom Components

Mantine Custom Components Skill

Component template

import {
  Box, BoxProps, createVarsResolver, ElementProps,
  factory, Factory, getRadius, MantineRadius,
  StylesApiProps, useProps, useStyles,
} from '@mantine/core';
import classes from './MyComponent.module.css';

export type MyComponentStylesNames = 'root' | 'inner';
export type MyComponentVariant = 'filled' | 'outline';
export type MyComponentCssVariables = { root: '--my-radius' };

export interface MyComponentProps
  extends BoxProps, StylesApiProps, ElementProps {
  radius?: MantineRadius;
}

export type MyComponentFactory = Factory;

const defaultProps = { radius: 'md' } satisfies Partial;

const varsResolver = createVarsResolver((_theme, { radius }) => ({
  root: { '--my-radius': getRadius(radius) },
}));

export const MyComponent = factory((_props) => {
  const props = useProps('MyComponent', defaultProps, _props);
  const { classNames, className, style, styles, unstyled, vars, attributes, radius, ...others } = props;

  const getStyles = useStyles({
    name: 'MyComponent', classes, props,
    className, style, classNames, styles, unstyled, vars, attributes, varsResolver,
  });

  return ;
});

MyComponent.displayName = '@mantine/core/MyComponent';
MyComponent.classes = classes;

Factory variant — which to use

| Scenario | Factory function | Type | |---|---|---| | Standard component | factory() | Factory | | Supports component prop (polymorphic) | polymorphicFactory() | PolymorphicFactory — add defaultComponent and defaultRef | | Props change based on a generic (e.g. multiple) | genericFactory() | Factory |

Use polymorphicFactory sparingly — it adds TypeScript overhead and slows IDE autocomplete.

Factory type fields

Factory JSX.Element; // only for genericFactory
}>

Theme integration

Users and the theme can override defaults via Component.extend():

const theme = createTheme({
  components: {
    MyComponent: MyComponent.extend({
      defaultProps: { radius: 'xl' },
      classNames: { root: 'my-root' },
      styles: { root: { color: 'red' } },
      vars: (_theme, props) => ({ root: { '--my-radius': getRadius(props.radius) } }),
    }),
  },
});

References

• [references/api.md](references/api.md) — All imports: factory, useProps, useStyles, createVarsResolver, createSafeContext, StylesApiProps, CompoundStylesApiProps, BoxProps, ElementProps, theme helpers (getSize, getRadius, etc.)
• [references/patterns.md](references/patterns.md) — Full examples: compound components with context, polymorphic component, generic component, theme integration

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: mantinedev
• Source: mantinedev/skills
• License: MIT

Install and usage instructions live in the source repository linked above.