General guideline and questions

[nouman91]

Let me start by saying this is amazing work you guys did. It is very refreshing seeing such a complete library. I don't know how I did not know about this library. I found this library today while doing R&D on the design system.

My current problem context

Currently, I am leading a couple of teams on a few projects, all of them are just starting out. Since all the projects going to be big businesses for the organization I am working for. I wanted to build a design system that can be used across various projects. For that, I have been doing R&D on design systems and component libraries.

I have years of experience in UI and through that experience, I know the importance of design systems and component libraries. I know how costly a decision it can be if the design system is not capable of supporting your business requirements. To make a long-term project and future-proof the UI I have been studying and doing headless UI development for the last couple of years, and glad to see it has been taking its shape in the large open-source domain.

There are a few projects I have been keeping an eye on for a good design system.

1- Adobe's React-aria and react-stately for adobe
2- Tailwind's headless UI

While both of these projects are fantastic but I can't use them in my project for the following reasons:

React-aria and react-stately are low-level primitives and crafting a production-grade component with all the Aria Rules is a daunting task.

Tailwind's headless UI is a good option to choose since we bootstrapped our initial projects with Tailwind CSS lib. But as of this moment, headless UI only offers a few components

I have been exploring mantine's for the past couple of hours and it seems like an amazing project. I however need guidance and clarifications on the following:

• Is the headless approach something that you will be supporting in the future or it's supported right now?
• How customizable are the components?
• Can components be installed independently?
• Can I use tailwind CSS with the components?
• Do all the components support Aria rules?
• What is the future of this project look like?

I apologize for the long post, but I really wanted to explain my thought process. Looking forward to your response.

[rtivital]

Hi Nouman, thanks for kind words! I've created Mantine to have as little default styles as possible to build my pet projects and projects at work (we have 4 design systems for separate products, and Mantine fits perfectly in all of them).

Is the headless approach something that you will be supporting in the future or it's supported right now?

There are many headless UI libraries already, and I doubt that we should create another one since all of them do not differ much, so this is not on our roadmap

How customizable are the components?

Components styles can be customized with Styles API and props that are individual for each component

Can components be installed independently?

No, modern bundlers will tree shake all unused dependencies, see #500

Can I use tailwind CSS with the components?

Yes, you can override Mantine components styles with any other styling solution, it will work with className and classNames props

Do all the components support Aria rules?

Those component that require accessibility features include them, so screen reader support should be fine

What is the future of this project look like?

We are actively working on improvements, new features, components, and hooks. We do not share a public roadmap, so you can get an idea on how things are going by exploring changelog from the last year

[buzinas]

I hope one day you reconsider the "headless" part. There are just a few headless libraries out there, and none of them are great as Mantine. The one I've been using is Radix UI, but now that WorkOS acquired them, the development staled, which is a shame.

• MUI now has this "MUI Base", a completely unstyled version of it, but it's bloated.
• Headless UI is great, but it has too few components
• I haven't used React Aria yet, but it's probably the one I'll start using in my next projects.

Mantine is a superb piece of software but the hard dependency on emotion makes it less suited for a range of apps/sites that rely on streaming rendering and it seems that it wouldn't be that hard to split the components in a way that they can be exported with a version without any styles and another that uses it internally and applies the styles.

I'd be happy to contribute if you'd be interested in doing such thing.

[rtivital]

All components support unstyled prop starting from 5.0 – https://mantine.dev/styles/styles-api/#unstyled-components

[buzinas]

Oh yeah, I saw that, thanks for answering! But from my testings, it still depends on emotion, even if you use the unstyled version – or am I missing something? If so, would you be open to a contribution that would actually create a completely headless version that would then be enhanced with styles instead?

[rtivital]

No, I do not want to maintain that

[nouman91]

Thank you so much for getting back to me, much appreciated.

I will start exploring it, and see how it fits.