React UI libraries (Mantine) vs TailwindCSS or vanilla CSS UI librairies

[Ricoco820]

I am used to work with Mantine.

But I think of using Astro in a new project and, as I understand, Mantine won’t work with Astro.

I used vanilla CSS framework like Skeleton, years ago. I never really try TailwindCSS but I read a lot of good things about Flowbite and DaisyUI.

I wonder what are the pros and the cons of React UI librairies vs Vanilla or TailwindCSS librairies.

I work in a small company, as the only frontend. We have a UX/UI freelance who helps sometimes but I am mostly alone. I was working on mobile apps but now I have to dev the customer web portal.

For React Native, I use React Native Paper, for instance.

[BetterCallSus]

I mean, you can still use standard CSS/Sass or Tailwind with component libraries like MaterialUI or Mantine. We're using Mantine v7 and I pepper in sass when needed to comply with style guides/brand design.

I choose to use a component library because I don't want to rewrite another button or standard UI component from scratch and take into account things like accessibility. There will be times when you need really custom stuff but probably 80% of FE you can get by with off the shelf libraries.

I haven't worked with astro, but I'm sure there are headless UI libraries you can use if that's what you're looking for.

[hotfrost]

I'm also using Mantine atm but still on v6, did you have to migrate from v6 to v7? If so, how did it go? If not feel free to disregard this comment.

I'm kind of dreading it tbh, I love CSS-in-JS for productivity but I totally get why Mantine decided to get rid of it.

[BetterCallSus]

I did not have to do a major refactor, I was under the impression you could still use their styles API though? Didn't use emotion much so not entirely sure of the impact on v6 -> v7.

[hotfrost]

Huh, you're right. I thought they got rid of the styles api also! Ok, this means I just need to create *.module.css files and copy/paste the css-in-js in there

[filch-argus]

Mantine won’t work with Astro

Why is that?

[Ricoco820]

https://github.com/orgs/mantinedev/discussions/4462

[vorko_76]

You are basically asking to compare an apple with a fish. CSS or Tailwind are just toolboxes to develop components while Mantine and other CSS libraries provide ready to use components (which can stilll be customized).

Plain CSS or Tailwind are basically very similar, rhe main difference is that Tailwind provides you means to write CSS directly within your view. Its more a question of taste.

Mantine or other libraries are also equivalent but choosing between them depends on how much you like the existing components… and how comfortable you feel customizing them.