usebondery/mantine-skills

Mantine Skills

To reference the latest Mantine UI documentation, best practices, and guides, visit the official Mantine documentation at https://mantine.dev/llms.txt.

Component specific

Avatar component

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.

Anchor, Button, and Link components

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.

Modals

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:

• If the modal requires inputs, the required inputs should have withAsterisk prop set to true.
• If the modal has destructive actions, the destructive prop for ModalTitle should be set to true. This will change the color of the title to red, indicating that the action is destructive and requires caution from the user.

Notifications

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.

Dropdown menus

When creating a dropdown menu, use following rules:

• The action button text should have "..." at the end to indicate that it will open a modal. If it does not open a modal, it should not have "..." at the end.
• If the modal only has a confirmation step, the action button should not have "..." at the end. If it has more steps, it should have "..." at the end.
• When an option is disabled put a Tooltip with the reason on hover. This helps users understand why an option is not available and can improve the overall user experience.

Buttons

• When a button is disabled, render a Mantine Tooltip on hover to explain why the button is disabled.

Common mistakes to avoid

Not using server component

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.

Inputs

When using text or other inputs with an async searching or loading state, use the loading prop.