mantine-custom-components

The mantine-custom-components skill helps developers build custom React components that integrate cleanly with Mantine's theming, Styles API, and core features from @mantine/core. It solves the problem of authoring components that behave like first-class Mantine components — supporting theme overrides, style customization, CSS variables, and compound patterns — rather than one-off components that ignore the design system. It applies when creating components with factory(), polymorphicFactory(), or genericFactory(), adding Styles API support, implementing CSS variables, building compound components, or registering a component with MantineProvider.

The skill provides a full component template using imports such as Box, BoxProps, createVarsResolver, ElementProps, factory, Factory, getRadius, MantineRadius, StylesApiProps, useProps, and useStyles, wired together with a MyComponentFactory type, a defaultProps object, a varsResolver, and displayName and classes assignments. It documents which factory function to choose: factory() for standard components, polymorphicFactory() for components that support a component prop (adding defaultComponent and defaultRef), and genericFactory() when props change based on a generic such as multiple. It notes that polymorphicFactory should be used sparingly because it adds TypeScript overhead and slows IDE autocomplete. Factory type fields include props, ref, stylesNames, vars, variant, staticComponents, compound, ctx, and signature. Theme integration is handled through Component.extend() inside createTheme, allowing overrides of defaultProps, classNames, styles, and vars.

This skill targets React and TypeScript developers working within the Mantine ecosystem who need Styles API support (classNames, styles, vars, unstyled), CSS variables via createVarsResolver, or compound components with shared context. Two reference files extend the SKILL.md: references/api.md covers all imports and theme helpers such as getSize and getRadius, and references/patterns.md provides full examples of compound, polymorphic, generic, and theme-integrated components.