About Mantine Hub 😍

🤘 Motivation

Mantine is an amazing library with a wide range of components, extensive customization options, and a vibrant community. It offers a developer experience unmatched by many React libraries. However, its default styling can feel less modern compared to frameworks like shadcn and Radix, which many companies prefer. Setting up colors and styles to match those modern aesthetics can be time-consuming and may hinder projects that need a quick start.

Enter MantineHub. Initially created as an experimental project to simplify the process of modernizing Mantine's styling, MantineHub offers pre-configured themes inspired by Shadcn, Radix, and more. With MantineHub, developers can quickly integrate modern styling into their projects by copying and pasting the theme configuration.

Due to the overwhelming positive feedback and community endorsment we’ve received, MantineHub has evolved into a comprehensive toolkit. It now supports all Mantine components and introduces exciting new features like Blocks—pre-built UI components designed to seamlessly work with the generated themes.

📌 What We Offer

🎨 Themes

Our theme library eliminates the process of creating modern styles for Mantine projects. Choose from a variety of predefined themes—like Shadcn-inspired designs, Tailwind-like colors (zinc, amber, rose, and red), and even Glassmorphic themes from Radix—and customize them to fit your project needs. The themes are fully compatible with all Mantine components, ensuring a cohesive and polished design for your application.

🧩 Blocks

Blocks are pre-built, ready-to-use UI components designed for specific features that developers can effortlessly integrate into their projects. These components work seamlessly with the themes generated by MantineHub, saving you time and effort.
Currently, Blocks are an experimental feature with a limited library. Based on user feedback, we plan to expand this collection significantly, making it an extensive resource for developers. Contributions and feature requests are welcome to help grow this library.

⛹️‍♂️ Playground

The Playground is an interactive tool that allows you to see how pre-built themes look on individual Mantine components. Customize component-specific props—like variant, color, and other features—in real-time and explore how each change affects the component's appearance. The Playground ensures you can visualize and fine-tune your design choices with ease, making it a valuable addition to the development process.

🚀 Future Plans

MantineHub(previously, Mantine Theme Builder) is now more than a theming tool—it's an evolving ecosystem for Mantine developers. New features are in the pipeline to further enhance the developer experience, streamline workflows, and solidify Mantine as the go-to UI library for React projects.

Stay tuned for exciting updates, and let us know what features you'd like to see next!

🧑‍💻 Contributors

This project is maintained by Abhishek-S-Lal and gopukr. Contributions from the community are welcome and appreciated. Please see our CONTRIBUTING.md file for more information on how to get involved.

🤝 Join us

MantineHub thrives on community feedback and contributions. If you find MantineHub helpful, please share your thoughts, and request or contribute features. Together, we can make MantineHub a complimentary tool to make UI development with Mantine much more faster and easier.

If you find this project useful, please consider

• ⭐️Starring the repository on GitHub
• 🫶Sharing the project with your friends and colleagues
• 👩‍💻Contributing to the project
• 🥤Buy me a coffee