Shadcn Templates Logo Shadcn Templates
default image

Mantine Theme Builder

Author Avatar Theme by Rubixcube innovations
Updated: 13 May 2025
212 Stars

MantineHub (previously Mantine Theme Builder) is an open-source tool to create modern, customizable shadcn inspired themes for Mantine UI components. Easily adjust styles, colors, radius, and light/dark modes, and export the theme object for quick integration into any Mantine project.

Github Live Preview

Categories

Nextjs React Scss Tailwind Mantine

Overview:

Mantine Hub, formerly known as Theme Builder, is a tool designed to streamline UI development with Mantine, offering pre-configured themes inspired by Shadcn. It has evolved into a comprehensive toolkit supporting all Mantine components and introducing features like Blocks—pre-built UI components. Developers can quickly integrate modern styling into their projects by copying and pasting the theme configuration.

Features:

  • Customizable Styles: Choose from predefined styles to update the UI look quickly.
  • Color Palette: Pick from a wide range of color themes like Zinc, Slate, Gray, and more.
  • Radius Control: Adjust the border radius for elements from sharp corners to fully rounded.
  • Light/Dark Mode: Toggle between light and dark themes for quick previews.
  • Export Theme: Copy the generated Mantine theme object for direct project integration.

Installation:

To use Mantine Theme Builder in your project, follow these steps:

  1. Set up a new project with Mantine by following the official Mantine documentation.
  2. Open the MantineProvider (usually in src/App.js or src/App.tsx).
  3. Copy the generated theme object from the Mantine Theme Builder website.
  4. Replace or extend the theme object in your MantineProvider as instructed.

Summary:

Mantine Hub, formerly Theme Builder, offers developers a streamlined way to integrate modern styling into their projects by providing pre-configured themes and Blocks—pre-built UI components. With features like customizable styles, color palette selection, radius control, and light/dark mode, developers can quickly create visually appealing UIs. By following a simple installation process, developers can leverage this tool to enhance their Mantine projects.