mantine

Guide Mantine UI component usage, styling, and navigation patterns.

Updated Nov 19, 2025

Search Tags:#ui #react #components #styling #navigation #mantine

Ready to run

npx skills add https://github.com/alexturpin/cf-app-starter --skill mantine

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mantine
Source: https://github.com/alexturpin/cf-app-starter/tree/main/.opencode/skills/mantine
Command: npx skills add https://github.com/alexturpin/cf-app-starter --skill mantine

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides guidance and examples for using the Mantine UI library and its associated components for building user interfaces and navigation within the application.

Core Features & Use Cases

UI Components: Leverage Mantine for consistent styling and pre-built UI elements.
Iconography: Utilize icons from @tabler/icons-react.
Navigation: Implement internal links and nested navigation using provided components like AppLink, AppButtonLink, and AppNavLink.
Loading States: Manage visual feedback during data loading with <Skeleton>.
Modals: Replace native window.confirm with Mantine's modal manager for interactive confirmations.

Quick Start

Use the mantine skill to create a navigation link to the dashboard page with a home icon.

Frequently Asked Questions about mantine

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

FAQPage Schema

How do I build React UI components using Mantine?▼

Build React UI components using Mantine by leveraging its pre-built elements for consistent styling. This skill provides guidance on component usage, interactive interfaces, and navigation patterns for frontend development.

How do I implement navigation links with Mantine and TanStack Router?▼

Implement navigation links with Mantine and TanStack Router using provided components like AppLink, AppButtonLink, and AppNavLink. These components support internal links and nested navigation within your application.

What is the best way to handle loading states in a Mantine React app?▼

Handle loading states in a Mantine React app using the Skeleton component. This provides visual feedback during data loading to improve user experience while content is being fetched.

Can I use Tabler icons with Mantine UI components?▼

Yes, you can use Tabler icons with Mantine UI components. This skill supports integrating icons from the @tabler/icons-react package to enhance your application's iconography alongside Mantine elements.

How do I replace window.confirm with a Mantine modal?▼

Replace the native window.confirm with Mantine's modal manager for interactive confirmations. This approach provides consistent, styled confirmation dialogs that match your application's UI.