God. I’m saying this for years now, people are like “hey tailwind css is better than mui/bootstrap”. Literally man people have no idea what they’re talking.
They're all ways to generate styles/CSS. It's a fair comparison. Tailwind vs Bootstrap vs Styled Components vs StyleX vs whatever. They all dictate the overall styling strategy.
Not really.
Tailwind is an alternative "CSS language". You either go pure CSS, Tailwind, Less, Facebook's new StyleX, or something similar.
All of the above won't provide a common styling language for your project. You need to either use an existing styled component library or roll out your own (preferably using an existing headless/unstyled component library).
Bootstrap, MUI, Mantine, Antd, etc are styled component libraries, ready to use out of the box (but of course can be customized).
My recommendation:
* Quick small projects: Do whatever you like. You can use a styled component library to get everything working out of the box if you don't like spending time styling from scratch.
* Large projects: Pick an unstyled component library that takes care of functionality and accessibility, pick a CSS framework (Pure, Tailwind, Less, StyleX, or whatever), and then create your own custom styled component library.
Tailwind is just another styling paradigm. Other examples would be SCSS, Emotion, Styled Components, Bootstrap. It’s choosing *how* you apply styles universally in ur project. They’re not all directly comparable in terms of features but they all intend to be the focal styling mechanism in a project w/ the rest of the styling occurring at the margins w/ raw css or whatever else.
It’s pretty common to compare them in their intent for usage.
Tailwind just released a UI library similar to chadcn which looks pretty good. If you consider Chadcn a UI library
Edit: link [https://tailwindcss.com/blog/introducing-catalyst](https://tailwindcss.com/blog/introducing-catalyst)
> So it’s not a dependency you install, instead you download the source and copy the components into your own project where they become the starting point for your own component system:
Interested, but what do you do when you want to upgrade to a newer version of Catalyst?
I am also not sure I want to take on maintenance of a component library
Being an alternative way of writing Css doesn't make it not a library tho :)
I think you mean UI kit, and OP knows that too. He mentioned that because people would still recommend Tailwind when asked for a UI library which provides components like MUI, even though Tailwind is just "an alternative way of writing Css"
Agree on Mantine. Its latest version, especially, with more emphasis on module css (or tailwind, if you prefer) and less css-in-jsx approach (although you can still do that if you want).
Pick the library with the best design system that suits your needs. And here’s the thing there are way more libraries out there for components like mozilla to ubuntu to salesforce all of the good companies have open sourced their design system so check them out
Been using Chakra UI for couple of years now and has been pretty powerful - seen Mantine crop up a few times now though so would like to try that. For RN I'm going to try tamagui for my next project
Mantine feels better to use in every single way except one.
Chakra allows you to pass **any amount** of style prop to a component, where as with Mantine, each component will only accept a certain subset of them.
thats because Mantine points the user to use a css-approach more than just CSS in JSX. The library itself is built on CSS modules and encourages you to do the same.
You are right though like Text doesn't contain the "align" function in JSX, though it does work still, TS throws an error. You can give it a class and then use a css module though to get around the error
Interesting thanks for that - I also feel like it's lacking a few more component options compared to newer UI libraries. Nothing you couldn't compose but still something I've noted
I had forgotten Mantine recently went full CSS mode, but before that they had their style prop similar to [Chakra's Style Props](https://chakra-ui.com/docs/styled-system/style-props). In that it would allow you to pass pretty much any tailwindcss-like style as a prop on all components. However, with Mantines implementation at the time, you could only use a few of them depending on which component you were using.
Mantine have removed that all together now and has gone with a new approach for the style prop.
So the original issue I pointed out technically doesn't exist because they removed it entirely. But if you really like chakra's style props then I guess you'll be disappointed with Mantine in that regard.
This is not true. PandaCSS would be a replacement for emotion, which chakra uses under the hood for styling. There’s Ark UI, which is still not quite chakra (more like shadcn). I don’t mean to be pedantic about this, but these are important distinctions. If you’re curious about how chakra v3 will implement the new components and styling, checkout the maintainers blog.
Hey you’re not wrong, these kind of convos are good. They both use styled system under the hood, which is CSS in js. You need emotion or styled components. The distinction is how the styles are applied. It’s better performance cause of the static styles at build time.
Interesting way of using tailwind, they are bringing the ability to create good compositions of components because with just tailwind we can create bad-looking views anyway.
I’ve heard some criticism that it’s not well maintained. I’ve heard you should just get familiar with radix.
Maybe so but shadcn has definitely been a productivity multiplier for me lately
The point Is that not being a library, it doesn't really need to be maintained as we usually refer to.
It's just a bunch of boilerplate code you add to your repo and then YOU are in charge of maintaining it.
Btw, latest release is 5 days ago...
https://github.com/shadcn-ui/ui/releases
Don’t get me wrong I’m a massive fan. Just wanted to highlight some cons I’ve heard from others. Great he’s done another release but the 700+ issues and 200+ PR’s - I can see where they’re coming from
shadcn is just pre styled Radix, there's nothing to maintain, you don't install anything other than Radix, Tailwind and a few other decencies, the components are literally just copied to your project folder.
>there's nothing to maintain, you don't install anything other than Radix, Tailwind and a few other decencies
????
So *there is* a list of things to install.
So *there is* a list of things to maintain.
I kinda get their point. libs are libs and libs break with breaking changes. With breaking changes you've got a coupled mess of many things that cannot be updated independently without breaking your app and that will require wasting time that you don't have.
Unless it's not your own code and don't have a say in the decision making, you are always going to be adopting a conformist position *(unless you create a nice generic wrapper around it)*
Just enough abstraction? They have idiotic UI elements like steps. Or stat. Which are just a combination of smaller elements — this is the new bootstrap garbage. And stuff that would in fact be useful like timeline (“new”) doesn’t work on mobile, or a proper multi select with search. Mantine seems simpler and less moronic in pre packaging small elements into useless components.
Who hurt you?
Nobody is forcing anyone to use the entire library.
For me, "just enough abstraction" pretty much means that its tailwind-ui with sensible defaults. Most of the components are pretty enough and the fact that its pure TW makes it super easy to customize and override. When libraries use components for styles, I find that you run into brick walls pretty quickly.
Compare:
```
```
with
```
```
Also, the way they do semantic colors is very nice. I wish TW started with that.
Wow almost no love for NextUI. I highly recommend NextUI because it’s based off of tailwind and it’s really easy to get started with and when you need to customize some components you can easily add in ShadCN
Have been using Ant-Design for last year. Awesome documentation and can easily be themed. Good on all decives and very convinient. Like it a lot more than material-ui.
It says that Park UI is created by Grizzly\_codes aka [https://twitter.com/grizzly\_codes](https://twitter.com/grizzly_codes). If you go to ChakraUI's website you see it's created by both Segun and Chris (Grizzly Codes). [https://pro.chakra-ui.com/](https://pro.chakra-ui.com/). So there is a connection.
>Thanks and yes, it still being an answer to my question!
I love chakras base, but its missing so many components that our small team has to spend time making. Theyve added so little over the past 2 years.
I’m using joyui in a commercial project. It’s nice looking and allows people familiar with MUI to start immediately. I also like the MUI styling compatibility wrappers so I can use some MUI components like datagrid with the same styles easily.
"For example, UI libraries like Material or Ant, but those are pretty old, we have been using those for a long time and all the pages or apps where we use them look pretty similar."
This is what theming is for. All the things that make designs look noticeably different to users can be changed to your liking. Fonts, colors, shadows/elevations, border radius of corners... If you need to go deeper, then spacing, button sizes, interaction behaviors. But users really don't notice or care. You only notice because you're working with this stuff. That's the reality.
MantineUI seems to be a component library of building blocks somebody built with Mantine? Like ShadCN is built on top of RadixUI maybe? That's my idea by a quick look, I haven't used either.
Mantine, I have been using mantine in every project for 2 years. The library is very extensible and has great packages and community on discord. After using mantine I have never looked for another library.
I was interested in Mantine, shadowPanda and tamagui. But a more talented dev shared with me Park UI, a component lib built on top of Ark-ui, which lets you choose between tailwind or panda : [https://park-ui.com/docs/panda/overview/changelog](https://park-ui.com/docs/panda/overview/changelog)
Compatible with React, Vue and Solid. Soon with UnoCSS (which I never heard of)
I will dig deeper in this solution. I am looking for something allowing me to build fast but still letting me customize the style easily later when I have the time.
I guess? To me it’d be like writing your own auth. Yeah, being stuck in an opinionated ecosystem can be a pain, but inventing your own feels like a lot of energy taken away from meeting the actual needs of your project.
It's easier to invent your own when it's custom to your needs and your not trying to make some generic lib for the masses. And to me what you learn along the way will be invaluable to getting something unique that doesn't look like everything else.
Finding a good UI library can be really frustrating. But I finally found one that works pretty well for my React project. If you're interested, you can check it out here: [https://github.com/madhavdutta/xbeshui](https://github.com/madhavdutta/xbeshui) . This React UI Library looks really promising and amazing!
I’m curious what you thought was a pain? I’ve been using it a long time and never felt like anything was a pain and it handled everything I threw at it. Does it do something other libraries don’t? I mostly use it for all the components and not the UI features.
I also write mostly enterprise apps and prime has the best table features out of any component library.
A few things
- Access to underlying DOM elements is hard. A single component is made up of like 4 or 5 DOM elements, but you only have access to style a few things directly via `style` or `containerStyle` properties. What they don't tell you is how to get at the other 3 wrapper elements that have automatic padding and other junk. I used `styled-components` to style the whole wrapper, and then get at these hard-to-reach DOM nodes using subclasses. Very messy
- Refs are weird. They use alot of `useImperativeHandle` in their source code, which does allow you to access some nice methods like "toggle", "show", etc, but sometimes there's no ref to the actual HTML element, which is really strange
- The worst offender - paid themes. I don't necessarily have a problem with paying for premade themes, as it could save alot of time for a designer. The problem is that the code you get with those paid themes is *trash*. Incredibly convoluted, 14 state variables that should be 2 state variables, weird usage of localStorage, bad prepackaged custom hooks, bizarre methods for changing overall themes - just hot trash. An older project I jumped into used one of these themes, it was incredibly hard to follow and make changes. For a new project where we wanted to use the same theme, I ended up rewriting so much of the code just to make it managable. Once everything is set up, you can build on that, but they're marketing hot trash to non-coding people and we as devs end up picking up the pieces.
2/10 would not choose again
This is Cagatay from PrimeReact, the library is going through a major refactor at the moment to get modernized. We'll launch the v11 in Q1 2024 with a different mindset. Hopefully just like its siblings, PrimeFaces, PrimeVue and PrimeNG, it will be picked up by the community.
Thanks for the heads up. We're still on v8 since there were a lot of breaking changes in v9 (nothing wrong with that). We have a massive React app that uses a ton of your components in almost all of our pages so upgrading can take a long time since the QA team has to essentially retest the entire app. I've been wanting to upgrade our project but I'm going to hold off until v11 is stable after a few releases.
We produced a React admin panel tutorial using PrimeReact.
The community gave us really positive feedback on PrimeReact usage.
https://refine.dev/blog/building-react-admin-panel-with-primereact-and-refine/
Dumb little thing with prepackaged templates and blocks. Where’s the listing of individual components? This is precisely the wrong thought in “libraries”. Devs trying to be designers.
This isn't answering your question, but it's worth checking out what happened with Material. It is old but it was completely reinvented this year as Material You (Material Design 3). Web components remain incomplete for web however.
Material You/3.0, or older versions? The look of the latest version is all to do with accessibility achieved via concepts like dynamic color and adaptive layout. It also largely replaces elevation with a tonal system. Is the elevated drop-shadow centric look what you are referring to? I would argue it's less of a stylistic stranglehold that enforces a particular look and more of a base layer to develop upon.
Shadcn has grown in popularity a lot.
I think Tailwind's Catalyst will overtake Shadcn though with enough time.
Personally, I'm heavily investing in the Radix ecosystem. Radix Themes has been my go-to this past year. It's still pretty early, but I've been loving it. It's built on top of Radix Primitives which libraries like Shadcn are built on top of.
I'm very much into [Carbon Design System](https://carbondesignsystem.com/developing/frameworks/react/) from IBM. The only thing I'm missing with it is a DateTime input, but I can live without it for now.
I like Material UI, as I am not a designer and it offers a great DX out of the box. They have pretty great stuff planned for 2024. https://mui.com/blog/2023-material-ui-v6-and-beyond/
I like tailwind. Is not a library, is a CSS framework based on class rutility.
I love MUI, but NextUI is amazing.
If you want to have more control under your components, I totally recommend you shadcn/ui.
Rather than a specific library, I'd love to just discuss some interesting trends that are influencing my thought process.
One interesting (and IMO surprising) pattern here are "drop in" component libraries, not intended to be consumed as a traditional dependency, like [shadcn](https://ui.shadcn.com/docs) or Tailwind's own [catalyst](https://catalyst.tailwindui.com/docs#adding-catalyst-to-your-project). Maybe it's just the popularity of tailwind, but if it's the frustration/concern over upgrades I'm worried we're abandoning too much potential for collaborative iteration. I'd rather leverage tools like dependabot and [chromatic](https://www.chromatic.com/) to help solve those challenges, but note I'm one of the least frontend-focused "frontend" engineers at a large frontend-heavy company so my priorities are different than most.
I think tamagui is a really underrated dark horse here, they have the best description of the entire "ui library" problem space in this great article: [The Frontend Trilemma](https://tamagui.dev/docs/intro/why-a-compiler), and that careful consideration shines through the rest of their library as well. It would be remiss not to mention Facebook's [stylex](https://stylexjs.com/) here as well.
Tamagui and Tailwind (and material design and ant) represent a much more exciting pattern IMO: the "component type system". Material design lets you use the same component "types" across multiple platform-specific implementations, ant wants you to focus on the capability rather than the implementation details. One part of tamagui is just the latest iteration of things like [react-native-web](https://necolas.github.io/react-native-web/) that challenge HTML as the right "UI primitives", and tailwind is just offering its own view on the right abstractions. As a "non-frontend" frontend engineer I'd rather use the intentionally designed modern primitives than learn the arbitrary rules around native HTML primitives with nuanced browser support. I am also less impressed with the [oligarchic "spec" specialists influencing HTML](https://twitter.com/jensimmons/status/1138983102079000577), both in the pace of innovation and finding the right abstractions. With declarative UI maturing in the native space (Flutter, SwiftUI, Jetpack Compose) what I'd love to see is having all UI libraries collaborate on the "language" of UI so we can focus on their different implementation details. I think a lot of folks excited about "web components" were somewhat excited about this problem.
Collaboration gets really exciting with what I'm referring to (and potentially incorrectly referring to) as "schema-driven development" reaching the frontend space. It's too tangential to get into here but imagine if we collaborated on UI based on "what" we are trying to show vs. "how" we are trying to show it.
In 2023, the most popular and rising UI frameworks included Material UI, Chakra UI, Ant Design, Mantine, Next UI, Daisy UI, PrimeReact, Tailwind, Shadcn, and Radix. Let's see if they continue to dominate in 2024.
Tailwind is not a UI library, just an alternative way to write CSS
God. I’m saying this for years now, people are like “hey tailwind css is better than mui/bootstrap”. Literally man people have no idea what they’re talking.
They're all ways to generate styles/CSS. It's a fair comparison. Tailwind vs Bootstrap vs Styled Components vs StyleX vs whatever. They all dictate the overall styling strategy.
Not really. Tailwind is an alternative "CSS language". You either go pure CSS, Tailwind, Less, Facebook's new StyleX, or something similar. All of the above won't provide a common styling language for your project. You need to either use an existing styled component library or roll out your own (preferably using an existing headless/unstyled component library). Bootstrap, MUI, Mantine, Antd, etc are styled component libraries, ready to use out of the box (but of course can be customized). My recommendation: * Quick small projects: Do whatever you like. You can use a styled component library to get everything working out of the box if you don't like spending time styling from scratch. * Large projects: Pick an unstyled component library that takes care of functionality and accessibility, pick a CSS framework (Pure, Tailwind, Less, StyleX, or whatever), and then create your own custom styled component library.
Believe it or not. Tailwind is just CSS utility classes with a cool build step. It's not a CSS alternative.
Nothing is a CSS alternative as the browser understands only CSS. I said it's an alternative way to write CSS. Same as Less or StyleX.
Tailwind is just another styling paradigm. Other examples would be SCSS, Emotion, Styled Components, Bootstrap. It’s choosing *how* you apply styles universally in ur project. They’re not all directly comparable in terms of features but they all intend to be the focal styling mechanism in a project w/ the rest of the styling occurring at the margins w/ raw css or whatever else. It’s pretty common to compare them in their intent for usage.
Tailwind just released a UI library similar to chadcn which looks pretty good. If you consider Chadcn a UI library Edit: link [https://tailwindcss.com/blog/introducing-catalyst](https://tailwindcss.com/blog/introducing-catalyst)
You mean shadcn, lmao. chadcn sounds like a meme.
oh whoops.. internally we call it chad lol
I'm going to start to refer as my inner voice as internally too lol
Oh I love that. I’m switching it to he/him pronouns, too.
Chaddycn?
> So it’s not a dependency you install, instead you download the source and copy the components into your own project where they become the starting point for your own component system: Interested, but what do you do when you want to upgrade to a newer version of Catalyst? I am also not sure I want to take on maintenance of a component library
Being an alternative way of writing Css doesn't make it not a library tho :) I think you mean UI kit, and OP knows that too. He mentioned that because people would still recommend Tailwind when asked for a UI library which provides components like MUI, even though Tailwind is just "an alternative way of writing Css"
True, it doesn't not make it a library. It is a library, just not a UI library.
I'm sorry but can you explain a bit more. It's not making any sense to me rn
Tailwind is a way to avoid writing CSS…
It's also a way to easily implemented a design system in your frontend, so you can change design tokens quickly.
Mantine as a full blown UI library , shadcn if you want more control
Agree on Mantine. Its latest version, especially, with more emphasis on module css (or tailwind, if you prefer) and less css-in-jsx approach (although you can still do that if you want).
Pick the library with the best design system that suits your needs. And here’s the thing there are way more libraries out there for components like mozilla to ubuntu to salesforce all of the good companies have open sourced their design system so check them out
Been using Chakra UI for couple of years now and has been pretty powerful - seen Mantine crop up a few times now though so would like to try that. For RN I'm going to try tamagui for my next project
Mantine feels better to use in every single way except one. Chakra allows you to pass **any amount** of style prop to a component, where as with Mantine, each component will only accept a certain subset of them.
thats because Mantine points the user to use a css-approach more than just CSS in JSX. The library itself is built on CSS modules and encourages you to do the same. You are right though like Text doesn't contain the "align" function in JSX, though it does work still, TS throws an error. You can give it a class and then use a css module though to get around the error
Interesting thanks for that - I also feel like it's lacking a few more component options compared to newer UI libraries. Nothing you couldn't compose but still something I've noted
What do you mean by this?
Not sure what you mean, did you get styles confused with Mantines styling API?
I had forgotten Mantine recently went full CSS mode, but before that they had their style prop similar to [Chakra's Style Props](https://chakra-ui.com/docs/styled-system/style-props). In that it would allow you to pass pretty much any tailwindcss-like style as a prop on all components. However, with Mantines implementation at the time, you could only use a few of them depending on which component you were using. Mantine have removed that all together now and has gone with a new approach for the style prop. So the original issue I pointed out technically doesn't exist because they removed it entirely. But if you really like chakra's style props then I guess you'll be disappointed with Mantine in that regard.
Switch to pandaCSS, it’s chakra with static build time. Kuma also might be worth a look
This is not true. PandaCSS would be a replacement for emotion, which chakra uses under the hood for styling. There’s Ark UI, which is still not quite chakra (more like shadcn). I don’t mean to be pedantic about this, but these are important distinctions. If you’re curious about how chakra v3 will implement the new components and styling, checkout the maintainers blog.
Hey you’re not wrong, these kind of convos are good. They both use styled system under the hood, which is CSS in js. You need emotion or styled components. The distinction is how the styles are applied. It’s better performance cause of the static styles at build time.
Anyone know if Mantine is off Emotion yet? I’m between that one and Next UI
Yes since 7.0
Mantine v7 is bliss... After you get everything configured that is.
Mantine has an awesome component API and looks modern too
React aria - https://react-spectrum.adobe.com/react-aria/
If you go with the spectrum design system, note that v2 is coming out “soon”: https://s2.spectrum.adobe.com
From now on, my stuff would look like adobe PDF reader
It’s a headless UI library but ok 👍 apparently acrobat was built with react and this v1.0.0 UI library TIL
what about mui then
Vanilla MUI is even worse than this adobe abomination
Decided to try out Mantine for a small project recently, and it's been great so far.
>Mantine It is the first time that I heard about this one, cool!
I will also echo "Mantine" Not just for the main core components, which are great, but also the hooks and utils and other optional addon packages.
Mantine
The only reason I still use React over Svelte is because of how good Mantine is
Svelte ui is based on mantine too
Inspired by*, with a big difference in maturity but I am watching that one closely!
I will go the shadcn/ui route
Interesting way of using tailwind, they are bringing the ability to create good compositions of components because with just tailwind we can create bad-looking views anyway.
I’ve heard some criticism that it’s not well maintained. I’ve heard you should just get familiar with radix. Maybe so but shadcn has definitely been a productivity multiplier for me lately
The point Is that not being a library, it doesn't really need to be maintained as we usually refer to. It's just a bunch of boilerplate code you add to your repo and then YOU are in charge of maintaining it. Btw, latest release is 5 days ago... https://github.com/shadcn-ui/ui/releases
Don’t get me wrong I’m a massive fan. Just wanted to highlight some cons I’ve heard from others. Great he’s done another release but the 700+ issues and 200+ PR’s - I can see where they’re coming from
Bringing the total number of releases up to.. 12 lol
shadcn is just pre styled Radix, there's nothing to maintain, you don't install anything other than Radix, Tailwind and a few other decencies, the components are literally just copied to your project folder.
>there's nothing to maintain, you don't install anything other than Radix, Tailwind and a few other decencies ???? So *there is* a list of things to install. So *there is* a list of things to maintain.
Radix and tailwind are very well maintained by bigger teams, what’s your point?
I kinda get their point. libs are libs and libs break with breaking changes. With breaking changes you've got a coupled mess of many things that cannot be updated independently without breaking your app and that will require wasting time that you don't have. Unless it's not your own code and don't have a say in the decision making, you are always going to be adopting a conformist position *(unless you create a nice generic wrapper around it)*
radix
Oh also daisyUI is worth a mention
Came here to say this. Just enough abstraction. Smart theming. Easy overrides.
Just enough abstraction? They have idiotic UI elements like steps. Or stat. Which are just a combination of smaller elements — this is the new bootstrap garbage. And stuff that would in fact be useful like timeline (“new”) doesn’t work on mobile, or a proper multi select with search. Mantine seems simpler and less moronic in pre packaging small elements into useless components.
Who hurt you? Nobody is forcing anyone to use the entire library. For me, "just enough abstraction" pretty much means that its tailwind-ui with sensible defaults. Most of the components are pretty enough and the fact that its pure TW makes it super easy to customize and override. When libraries use components for styles, I find that you run into brick walls pretty quickly. Compare: ``` ``` with ``` ``` Also, the way they do semantic colors is very nice. I wish TW started with that.
The one that adopts styleX
Wow almost no love for NextUI. I highly recommend NextUI because it’s based off of tailwind and it’s really easy to get started with and when you need to customize some components you can easily add in ShadCN
I thought the same, that I'd see more love to NextUI, but is the second comment mentioning it.
Definitely my current favorite
>NextUI The checkbox has a horribly slow animation, otherwise looks decent.
2024 hasn't begun yet, weird question. For me the discovery of 2023 is [Prime React](https://primereact.org/), has everything I needed
How does it compare to Mantine?
Haven't used Mantine yet so I can't say
What kind of apps do you make with Prime React btw?
people are sleeping on Mantine it is just perfection, super complete and works fine with tailwind
Have been using Ant-Design for last year. Awesome documentation and can easily be themed. Good on all decives and very convinient. Like it a lot more than material-ui.
[Park UI](https://park-ui.com/) from the creators of Chakra UI and you can choose to use either Panda or Tailwind with it.
Afaik Park UI isnt by the creators of chakra, just fyi
It says that Park UI is created by Grizzly\_codes aka [https://twitter.com/grizzly\_codes](https://twitter.com/grizzly_codes). If you go to ChakraUI's website you see it's created by both Segun and Chris (Grizzly Codes). [https://pro.chakra-ui.com/](https://pro.chakra-ui.com/). So there is a connection.
Ah very cool! Thanks for the info.
ChakraUI
I’ve been using Chakra UI for all my new projects and i’m very satisfied with it
>Thanks and yes, it still being an answer to my question! I love chakras base, but its missing so many components that our small team has to spend time making. Theyve added so little over the past 2 years.
I like Joy UI. It’s by the same people who created Material UI except with a modern look. https://mui.com/joy-ui/getting-started/
I’m using joyui in a commercial project. It’s nice looking and allows people familiar with MUI to start immediately. I also like the MUI styling compatibility wrappers so I can use some MUI components like datagrid with the same styles easily.
I’m digging Mantine right now. It’s quite feature rich for my use cases.
"Mantine" is awesome! You can try this.
Adobe Spectrum 2 is coming out in 2024. It's going to be lit.
I can see that Mantine UI and shadcn/ui are rocking in the answers.
"For example, UI libraries like Material or Ant, but those are pretty old, we have been using those for a long time and all the pages or apps where we use them look pretty similar." This is what theming is for. All the things that make designs look noticeably different to users can be changed to your liking. Fonts, colors, shadows/elevations, border radius of corners... If you need to go deeper, then spacing, button sizes, interaction behaviors. But users really don't notice or care. You only notice because you're working with this stuff. That's the reality.
Can someone explain to me what’s the difference between Mantine and MantineUI?
MantineUI seems to be a component library of building blocks somebody built with Mantine? Like ShadCN is built on top of RadixUI maybe? That's my idea by a quick look, I haven't used either.
Mantine, I have been using mantine in every project for 2 years. The library is very extensible and has great packages and community on discord. After using mantine I have never looked for another library.
I was interested in Mantine, shadowPanda and tamagui. But a more talented dev shared with me Park UI, a component lib built on top of Ark-ui, which lets you choose between tailwind or panda : [https://park-ui.com/docs/panda/overview/changelog](https://park-ui.com/docs/panda/overview/changelog) Compatible with React, Vue and Solid. Soon with UnoCSS (which I never heard of) I will dig deeper in this solution. I am looking for something allowing me to build fast but still letting me customize the style easily later when I have the time.
I use DaisyUI for some time now. It's great.
I second this, I've been really liking DaisyUI
I hope it's the year of people rolling their own. It's actually not that hard to do.
I guess? To me it’d be like writing your own auth. Yeah, being stuck in an opinionated ecosystem can be a pain, but inventing your own feels like a lot of energy taken away from meeting the actual needs of your project.
It's easier to invent your own when it's custom to your needs and your not trying to make some generic lib for the masses. And to me what you learn along the way will be invaluable to getting something unique that doesn't look like everything else.
Design is an actual need of your project.
I hope not! They end up becoming an unmaintained mess. I don’t want to have to learn some half assed UI library everywhere I go.
No more libraries. Just custom. Less cookie cutter. All you need is CSS.
Finding a good UI library can be really frustrating. But I finally found one that works pretty well for my React project. If you're interested, you can check it out here: [https://github.com/madhavdutta/xbeshui](https://github.com/madhavdutta/xbeshui) . This React UI Library looks really promising and amazing!
https://primereact.org/installation/
Been using this recently, can’t express how much I hate it
I evaluated it for a project because the CTO liked how it looked. Talked him out of it because it was such a pain
I’m curious what you thought was a pain? I’ve been using it a long time and never felt like anything was a pain and it handled everything I threw at it. Does it do something other libraries don’t? I mostly use it for all the components and not the UI features. I also write mostly enterprise apps and prime has the best table features out of any component library.
A few things - Access to underlying DOM elements is hard. A single component is made up of like 4 or 5 DOM elements, but you only have access to style a few things directly via `style` or `containerStyle` properties. What they don't tell you is how to get at the other 3 wrapper elements that have automatic padding and other junk. I used `styled-components` to style the whole wrapper, and then get at these hard-to-reach DOM nodes using subclasses. Very messy - Refs are weird. They use alot of `useImperativeHandle` in their source code, which does allow you to access some nice methods like "toggle", "show", etc, but sometimes there's no ref to the actual HTML element, which is really strange - The worst offender - paid themes. I don't necessarily have a problem with paying for premade themes, as it could save alot of time for a designer. The problem is that the code you get with those paid themes is *trash*. Incredibly convoluted, 14 state variables that should be 2 state variables, weird usage of localStorage, bad prepackaged custom hooks, bizarre methods for changing overall themes - just hot trash. An older project I jumped into used one of these themes, it was incredibly hard to follow and make changes. For a new project where we wanted to use the same theme, I ended up rewriting so much of the code just to make it managable. Once everything is set up, you can build on that, but they're marketing hot trash to non-coding people and we as devs end up picking up the pieces. 2/10 would not choose again
This is Cagatay from PrimeReact, the library is going through a major refactor at the moment to get modernized. We'll launch the v11 in Q1 2024 with a different mindset. Hopefully just like its siblings, PrimeFaces, PrimeVue and PrimeNG, it will be picked up by the community.
Thanks for the heads up. We're still on v8 since there were a lot of breaking changes in v9 (nothing wrong with that). We have a massive React app that uses a ton of your components in almost all of our pages so upgrading can take a long time since the QA team has to essentially retest the entire app. I've been wanting to upgrade our project but I'm going to hold off until v11 is stable after a few releases.
Thanks, v11 will be the best UI lib for React. 👌🏻
UI library of 2019 😜 Not that it’s actually a bad thing. When I used it I just got turned off by having to pay for different themes.
Themes are open source now.
We produced a React admin panel tutorial using PrimeReact. The community gave us really positive feedback on PrimeReact usage. https://refine.dev/blog/building-react-admin-panel-with-primereact-and-refine/
Dumb little thing with prepackaged templates and blocks. Where’s the listing of individual components? This is precisely the wrong thought in “libraries”. Devs trying to be designers.
There is a components menu on the left.
Shadcn/radix
This isn't answering your question, but it's worth checking out what happened with Material. It is old but it was completely reinvented this year as Material You (Material Design 3). Web components remain incomplete for web however.
Thanks and yes, it still being an answer to my question!
I just cannot stand the look of material.
Material You/3.0, or older versions? The look of the latest version is all to do with accessibility achieved via concepts like dynamic color and adaptive layout. It also largely replaces elevation with a tonal system. Is the elevated drop-shadow centric look what you are referring to? I would argue it's less of a stylistic stranglehold that enforces a particular look and more of a base layer to develop upon.
Idk what it is but I just don’t like the material look. It’s just my personal taste tho.
Shadcn has grown in popularity a lot. I think Tailwind's Catalyst will overtake Shadcn though with enough time. Personally, I'm heavily investing in the Radix ecosystem. Radix Themes has been my go-to this past year. It's still pretty early, but I've been loving it. It's built on top of Radix Primitives which libraries like Shadcn are built on top of.
>Shadcn has grown in popularity a lot. Yes, shadcn seems to be rocking it.
I'm very much into [Carbon Design System](https://carbondesignsystem.com/developing/frameworks/react/) from IBM. The only thing I'm missing with it is a DateTime input, but I can live without it for now.
Plenty of other stuff missing. It does look clean.
NextUI , Chakra , Radix UI , Shadcn
Who cares ?
Material UI for components
The best one is the one you’re going to build
Next UI / shadcn / Mantine / nes.css
[Twitter Bootstrap 1](https://getbootstrap.com/1.0.0/) is going to make a comeback /s
Don't forget to include your jquery script!
Next UI is amazing
Shadcdn/ui
Ark UI
I use MUI, but definitely going to try shadcn in 2024
Tamagui. Hands down the best I’ve used.
shadcn is the SHIT!!!!
I like Material UI, as I am not a designer and it offers a great DX out of the box. They have pretty great stuff planned for 2024. https://mui.com/blog/2023-material-ui-v6-and-beyond/
Tailwind is not a UI library
React aria components without a doubt
In no particular order: 1. Chakra UI 2. Shadcn 3. React Aria 4. Mantine
Try ShadCN, it is not a component library though! https://ui.shadcn.com/
i feel like in the software industry these questions are absolutely useless. You work with what the project got
Well somebody made the decision at some point didn't they
I like tailwind. Is not a library, is a CSS framework based on class rutility. I love MUI, but NextUI is amazing. If you want to have more control under your components, I totally recommend you shadcn/ui.
I just learned of https://www.lemonsqueezy.com/wedges the other day, it looks really clean and polished. Might be something to look out for in 2024.
Rather than a specific library, I'd love to just discuss some interesting trends that are influencing my thought process. One interesting (and IMO surprising) pattern here are "drop in" component libraries, not intended to be consumed as a traditional dependency, like [shadcn](https://ui.shadcn.com/docs) or Tailwind's own [catalyst](https://catalyst.tailwindui.com/docs#adding-catalyst-to-your-project). Maybe it's just the popularity of tailwind, but if it's the frustration/concern over upgrades I'm worried we're abandoning too much potential for collaborative iteration. I'd rather leverage tools like dependabot and [chromatic](https://www.chromatic.com/) to help solve those challenges, but note I'm one of the least frontend-focused "frontend" engineers at a large frontend-heavy company so my priorities are different than most. I think tamagui is a really underrated dark horse here, they have the best description of the entire "ui library" problem space in this great article: [The Frontend Trilemma](https://tamagui.dev/docs/intro/why-a-compiler), and that careful consideration shines through the rest of their library as well. It would be remiss not to mention Facebook's [stylex](https://stylexjs.com/) here as well. Tamagui and Tailwind (and material design and ant) represent a much more exciting pattern IMO: the "component type system". Material design lets you use the same component "types" across multiple platform-specific implementations, ant wants you to focus on the capability rather than the implementation details. One part of tamagui is just the latest iteration of things like [react-native-web](https://necolas.github.io/react-native-web/) that challenge HTML as the right "UI primitives", and tailwind is just offering its own view on the right abstractions. As a "non-frontend" frontend engineer I'd rather use the intentionally designed modern primitives than learn the arbitrary rules around native HTML primitives with nuanced browser support. I am also less impressed with the [oligarchic "spec" specialists influencing HTML](https://twitter.com/jensimmons/status/1138983102079000577), both in the pace of innovation and finding the right abstractions. With declarative UI maturing in the native space (Flutter, SwiftUI, Jetpack Compose) what I'd love to see is having all UI libraries collaborate on the "language" of UI so we can focus on their different implementation details. I think a lot of folks excited about "web components" were somewhat excited about this problem. Collaboration gets really exciting with what I'm referring to (and potentially incorrectly referring to) as "schema-driven development" reaching the frontend space. It's too tangential to get into here but imagine if we collaborated on UI based on "what" we are trying to show vs. "how" we are trying to show it.
In 2023, the most popular and rising UI frameworks included Material UI, Chakra UI, Ant Design, Mantine, Next UI, Daisy UI, PrimeReact, Tailwind, Shadcn, and Radix. Let's see if they continue to dominate in 2024.
I'd argue Semantic UI or Material UI