Mantine Theme Builder

Mantine Theme Builder is an open-source project that lets developers easily create and customize modern themes for Mantine components. Inspired by the shadcn themes, this tool is perfect for developers who want a fast and intuitive way to style their Mantine-based UI.

Features

Customizable Styles: Choose from a selection of predefined styles to quickly update the look of your UI.
Color Palette: Pick from a wide range of color themes like Zinc, Slate, Gray, and more.
Radius Control: Adjust the border radius to match your desired look, from sharp corners to fully rounded elements.
Light/Dark Mode: Toggle between light and dark themes for quick previews and real-time visualizations.
Export Theme: Copy the generated Mantine theme object and integrate it directly into your project.

Getting Started

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

Set up a new project with Mantine by following the official Mantine documentation:
Once your project is set up, 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 follows:

import { MantineProvider } from '@mantine/core';
import { yourCustomTheme } from './your-custom-theme';

function App() {
  return (
    <MantineProvider theme={yourCustomTheme}>
      <YourAppComponents />
    </MantineProvider>
  );
}

export default App;

That's it! Your project will now use the customized theme.

How to Use

Open Mantine Theme Builder and select from the available style presets or color themes to start building your Mantine theme.
Customize the border radius values for rounded corners.
Toggle between light and dark modes for your UI components.
Once you're satisfied, copy the theme object code and use it in your project.

Contribution

We welcome contributions from the community! Feel free to submit issues or pull requests to improve this project. See our Contribution Guide for more details.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Keywords

Mantine Theme Builder
Mantine Custom Theme
Mantine UI Components
Mantine Light/Dark Mode
Mantine Customizable Themes
Mantine Modern UI Themes
Mantine Style Presets
shadcn-like Mantine Themes
Mantine Theme Exporter
Mantine Theme Generator
Mantine Shadcn Themes
Shadcn Themes for Mantine