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:

Set up a new project with Mantine by following the official Mantine documentation.
Open the MantineProvider (usually in src/App.js or src/App.tsx).
Copy the generated theme object from the Mantine Theme Builder website.
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.