Skip to content

Mantine

Mantine gives React apps styled components such as inputs, buttons and dialogs.

Visit Mantine

What do you need for a Mantine settings screen?

In a React app, add Mantine’s core components, load the core styles, and place the screen inside MantineProvider. The provider shares choices like colors and type across controls.

Additional Mantine packages can need their own styles. Follow the setup guide for your app framework.

What can you control when a settings dialog opens?

Mantine’s Modal lets you control whether keyboard focus stays inside, Escape closes it and focus returns after closing. Give the dialog a title and give an icon-only close button an accessible label if you use one.

Your app still decides whether closing keeps the draft and how to handle an unsuccessful Save.

What belongs with your app code?

The Mantine library is MIT-licensed. Keep your shared theme, styles, package versions and the logic that validates and saves settings with the project.

How would you check reopening a settings form?

Sketch a fictional shop’s display-name settings and assume only Save should apply a change. Use no app or account.

  1. Start from a known name
    Write a saved name and a different draft name. Decide which control gets focus first.
  2. Dismiss and reopen
    Follow the Cancel path, then reopen the form. Show the last saved name and note where keyboard focus returned on close.
  3. Try the invalid value
    Draw an empty name and a visible explanation. Keep the form available so the person can correct it.