Menu
A collection of guides, best practices, and resources for using Mantine UI in your projects.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Bondery-specific architectural decisions, product UX patterns, and their rationale.
Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support, and Expo Router data loaders (`useLoaderData`).
Interact with Plane.so project management via MCP. Use when: creating work items, updating issues, listing tasks, searching Plane, managing cycles/sprints, organizing modules, tracking epics, assigning issues, adding comments, creating labels, managing states, viewing project boards, or any task involving Plane work items, PROJ-123 identifiers, or project planning in Plane.
Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.
When the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," or "SEO health check." For building pages at scale to target keywords, see programmatic-seo. For adding structured data, see schema-markup.
| name | mantine-skills |
| description | A collection of guides, best practices, and resources for using Mantine UI in your projects. |
| metadata | {"version":"0.0.1"} |
To reference the latest Mantine UI documentation, best practices, and guides, visit the official Mantine documentation at https://mantine.dev/llms.txt.
The Avatar component in Mantine UI is designed to display user profile pictures or initials. When using the Avatar component, it is important to utilize the name prop to generate fallback initials. Avoid nesting child elements inside the Avatar, as this can lead to unexpected behavior and styling issues. Instead, rely on the name prop to ensure that the Avatar displays correctly even when an image is not provided.
When using the Anchor, Button with a Link, or Next.js Link components, import the helper components from packages/mantine-next. These provide wrappers around the standard Mantine components that are optimized for Next.js applications. Using these helper components ensures better performance and compatibility with Next.js features such as server-side rendering and client-side navigation.
Import the common ModalTitle from packages/mantine-next to ensure consistent styling and behavior across your application. The ModalTitle component provides a standardized way to display titles within modals, enhancing the user experience and maintaining a cohesive design throughout your application.
Following best practices should be used:
When implementing notifications in your application, utilize the successNotificationTemplate, errorNotificationTemplate, loadingNotificationsTemplate, warningNotificationTemplate from packages/mantine-next. These templates provide pre-configured styles and structures for success and error notifications, ensuring a consistent look and feel across your application. By using these templates, you can save time on styling and focus on delivering clear and effective notifications to your users.
When creating a dropdown menu, use following rules:
Mantine UI compoennts support Next.js server components. However, they need to be referenced as named exports. For example the List.Item must be imported as ListItem to be used in a server component.
When using text or other inputs with an async searching or loading state, use the loading prop.
