Mantine is one of the better React component libraries out there. Good defaults, solid API, comprehensive set of components. One of its strengths is theming — you pass a theme object to MantineProvider and everything just follows.

The problem is building that theme object by hand.

Mantine’s theme covers a lot of ground: primary color, color shade, radius, font family, spacing scale, heading sizes, and more. The colors alone are arrays of ten shades each. Getting a palette that actually looks right across all the component states — hover, active, disabled — means a lot of trial and error.

I kept doing the same thing on every new project: tweaking values, rebuilding, checking how a Button looks next to a Select next to a Card, going back and adjusting. It works, but it is slow and you lose context jumping between code and browser.

So I built a visual tool for it.

What it does

Mantine Theme lets you configure a Mantine theme visually and see the result on actual components in real time.

You can:

  • Pick a primary color and see the full generated shade palette
  • Adjust border radius, spacing, and font settings
  • Toggle between light and dark color schemes
  • Preview how the theme looks across a set of common Mantine components
  • Export the resulting theme object, ready to drop into your MantineProvider

The goal is not to replace Mantine’s docs or to be a full design system editor. It is a quick way to get from “I want this kind of look” to a working theme config without the round-trip of editing JSON, rebuilding, and checking.

Why a standalone tool

I considered building it as a local dev tool or a plugin, but a standalone web app was simpler and shareable. You do not need to install anything or set up a dev environment — open it, configure what you want, copy the output.

It also makes it easy to share themes with a team. Instead of pasting a theme object into Slack and hoping people can visualize what it looks like, you can send a link and iterate from there.

Try it

The tool is live at tools.yetric.net/design/mantine-theme. It is free and there is nothing to sign up for.

If you use Mantine and have ever spent too long fiddling with primaryShade values, give it a shot. Side projects like this and Fotbollsfeber are where I learn the most.