skills.rest
usebondery
usebonderyOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mantine-custom-components

Build Mantine custom components with factory, Styles API, and CSS variables.

15|Updated Dec 4, 2025
Search Tags:#components#factory#css-variables#compound-components#mantine#usestyles#styles-api
One-click install
npx skills add https://github.com/usebondery/bondery --skill mantine-custom-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mantine-custom-components
Source: https://github.com/usebondery/bondery/tree/main/.agents/skills/mantine-custom-components
Command: npx skills add https://github.com/usebondery/bondery --skill mantine-custom-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build custom Mantine-based components that integrate seamlessly with Mantine's theming, the Styles API, and advanced patterns like compound components and contextual sharing.

Core Features & Use Cases

  • Create components with factory(), polymorphicFactory(), or genericFactory() to support standard, polymorphic, and generic props.
  • Extend the Styles API with classNames, styles, vars, and unstyled, and use createVarsResolver to map props to CSS variables.
  • Implement compound components with sub-components and shared context, then register with MantineProvider via Component.extend() or theme extension.

Quick Start

Create a new Mantine component using factory(), wire up useProps and useStyles, and expose root styles with getStyles.

Frequently Asked Questions about mantine-custom-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build custom Mantine components with the Styles API?▼

Build custom Mantine components with the Styles API by using factory(), useProps, and useStyles to wire up root styles, expose classNames and styles, and integrate seamlessly with MantineProvider theming.

How do I map component props to CSS variables in Mantine?▼

Map component props to CSS variables in Mantine by using createVarsResolver within useStyles, allowing dynamic styling integration through the Styles API without manual style overrides.

When do I need polymorphicFactory or genericFactory in Mantine?▼

Use polymorphicFactory or genericFactory in Mantine when building components that require polymorphic props for dynamic HTML tags or generic props for flexible, reusable type definitions across your component library.

Does this approach support compound components with shared context in Mantine?▼

Yes, this approach supports compound components with sub-components and shared context in Mantine, allowing you to register the grouped elements with MantineProvider via Component.extend() or theme extension.

What is the best way to extend Mantine theming with custom components?▼

The best way to extend Mantine theming with custom components is applying factory patterns alongside useStyles and createVarsResolver to ensure consistent theme integration and Styles API compatibility across standard and compound structures.

Why use useProps and useStyles when creating Mantine components?▼

Use useProps and useStyles when creating Mantine components to manage default props, extract style overrides, and cleanly expose root styles via getStyles for robust Styles API integration.

Related Skills

Explore More Software Engineering Skills→
deepnoodle-aideepnoodle-ai

mantine-ui

Guide React developers in implementing Mantine UI components with theming and responsive layouts.

Official
Advanced
Aniket-a14Aniket-a14
22

design-system-patterns

Define design tokens and implement theming with CSS custom properties.

Community
Advanced
JNZader-VaultJNZader-Vault

mantine-ui

Build React interfaces with Mantine components, forms, charts, and notifications.

Official
Intermediate
dylantarredylantarre
38

compound-components

Build accessible React UI primitives with compound component patterns.

Community
Advanced