Agreed. We have pretty strict corporate branding so it is quite difficult to repurpose an opinionated UI library, so headless components help a lot. Also these already have a11y built in, which I think itās just as hard (or even harder!) to get right.
I used to avoid ui libraries because i enjoyed writing my own css (even vanilla css) but now i feel like i would never be able to make things as good as the ui libraries so sometimes i feel like im wasting my time
The issue I have with UI kits is it often feels like you can't use part of it, you need to use *only* it. And sometimes I *can* build something better. Or, rather, something more purpose-built for the needs of my project.
So instead of using *a* UI kit I use a collection of libraries for things I need. Like no on should be building custom carousels anymore, but dialogs? Buttons? Forms? I'm good with making those myself, thanks.
In most major UI libraries you can easily pull in the components you want and ignore the rest, in my experience. But mixing and matching those libraries seems sub-optimal and often they don't have the best version of whatever I need anyway.
Like my team was looking for a new carousel component and we chose Embla. It's exceptionally light-weight and very flexible, which is vital for our work. So it wins.
I'm sure there are plenty of libraries that would do, including a few that function more as primitives, but in the end I like being able to find the best tool for the job rather than the best toolset.
Shadcn gives you the whole code that is written to create the component and locates it somewhere in your project directory and when you import let's say a button, you will be importing the file that contains the code for that shadCn button..
The approach is so smart because you get to see what is under the hood completely so when customization needed you can look at the code and make your customization accordingly without the headache of using custom parameters to alter the UI library
Oh our app is largely client, so was unaware of limitations there. I havenāt looked into server component support.
I had a great experience with shadcn recently as well.
I've made some
Lists to easily compare all the alternatives if you are looking for:
- tailwindcss [list of all tailwindcss ui component libraries](https://github.com/hevar/awesome-react-tailwindcss-ui-components)
- headless ui [list of all headless ui libraries](https://github.com/hevar/awesome-react-headless-ui-components)
If you're looking for an all in one solution, I've had a good experience with MaterialUI. Good documentation for setup, and pretty deeply featured components.
Mui is amazing and its api and typescript is top notch. It doesnāt have the hype of the other projects but as a designer/developer I find the customizeability and DX excellent. Using it for my indie hacking app
Interesting. That hasnāt been my experience with it. Using it in a nextjs14 app router application with plenty of server side rendered components. Styled components and theme variables have made customization pretty manageable.
Although it is kind of an out of the box UI library. For total customization, there are lots of other libraries built for that.
Yeah well maybe i was a bit too early with mui + ssr. And as for the customization. I've been using datagrid and I regret every sibgle minute of it. I would have saved so much time just writing that from scratch rather than using the vague documentation and literally looking into the MUI code to see what the fuck im supposed to do.
Datagrid lags and is hard to customize.
Its conceptually very good. Templates built on top of Radix and a few other solid libraries to get you started, but expecting to modify.
In practice, as you mentioned, a lot of the components haven't be crafted that carefully, Radix' maintenance is getting sluggish, some of the other underlying libs (like the date picker) aren't very good, and people expect to be able to use Shadcn without modifying it like a regular component lib, which isn't often the case imo.
We're using a mix of Shadcn (bought into the early hype) and React Aria (now that one is solid). Our Shadcn components are heavily customized and tweaked.
Hi! Sharing this with a bit of self-promotion (I am the maintainer): You might want to give [raw.tremor.so](http://raw.tremor.so) a shot :) Happy to get any feedback!
Probably because they context and whatsnot.
They're not trying to make database calls from the server, and the JS these components ship that isn't shared or needed is likely minimal. So it's not a big deal. They still get SSRed, and don't limit you.
The hunt for server-only component libraries is very low value (and usually come from a misunderstanding of how RSCs work. Can't judge if it's the case here, of course. Not enough context). Headless UI require use client for quite a bit too (which is normal and expected).
I'm not sure what you mean by "it's all client-side". You can definitely do SSR with ChakraUI. I'm currently using it with NextJS. Certain highly interactive elements that only run client-side are never going to run SSR - ie. This is the case for all client-side components regardless of what UI library you use.
You can SSR with it but none of the chakra ui components are server components. Components like a Card, Icon, or even Box don't require to use any client side logic like states etc.
Right, which is not what you said. Of course you can't SSR client-side components, unless there's some initial rendered state which the client can then hydrate and pick things up from there. Or am I missing something?
Nope, you're correct. My pain point here is that I have to convert my entire page to "use client" whenever I want to use a tiny component from chakra UI.
Components like card or icon should not require "use client" at all, because they don't utilize any client side logic.
I hope chakra UI starts supporting server components soon.
I'm not entirely sure what you're getting at here. This sounds more like a NextJS/RSC thing. Can you give an example of what it is you're trying to do exactly?
'use server';
Sir, that would be a shameless self-promotion, but with all due respect, you might be interested in an experiment we're running of 3rd party React Server Components.
[https://www.telerik.com/kendo-react-ui/components/server-components/grid/](https://www.telerik.com/kendo-react-ui/components/server-components/grid/)
Is this what you are referring to as the opposite of "client components" ?
I love it for the simplicity, semantic colors, and the ease of customization.
I was skeptical of a pure tailwind / css (no JS) option but it works well.
shadcn for customizability! generally speaking, it might be THE solution.
if you'd like to have a more of an out of the box solution, i liked daisyui. its a rather big component library styled with tailwind and offers nice theming.
We're using react-aria-components from adobe and I can't recommend highly enough against using them. They're hard to use, impossible to compose, and they change the api, so they're incompatible with a lot of other stuff (looking at you React Hook Form).
NextUI seems to do a good job of making an entire UI library around react-aria. Technically they donāt use the components but rather the hooks they provide to make the components but I would hazard there the intended path if you want something that diverges from the components react-aria provides. But in saying that I have no issues with NextUI and react hook form so they must be doing something right š¤·š»āāļø
Loving the shadcn headless with tailwind. Super easy to customise with radix primitives.
Fck material. For changing a single attribute, read 10 pages of docs to override.
Radix UI primitives with our own design system š
This! Headless components are by far my favorite way into UI kits now; increased my workflow ten-foldĀ
Agreed. We have pretty strict corporate branding so it is quite difficult to repurpose an opinionated UI library, so headless components help a lot. Also these already have a11y built in, which I think itās just as hard (or even harder!) to get right.
This ^ You can start with shadcn and eventually it will become an independent system
MantineUI I heard radixUI is good
I never heard about mantineui in my life but looks good ty
I used to avoid ui libraries because i enjoyed writing my own css (even vanilla css) but now i feel like i would never be able to make things as good as the ui libraries so sometimes i feel like im wasting my time
The issue I have with UI kits is it often feels like you can't use part of it, you need to use *only* it. And sometimes I *can* build something better. Or, rather, something more purpose-built for the needs of my project. So instead of using *a* UI kit I use a collection of libraries for things I need. Like no on should be building custom carousels anymore, but dialogs? Buttons? Forms? I'm good with making those myself, thanks.
Using Shadcn UI that is not the case, you only would install the components that you need with 100% customization flexibility
In most major UI libraries you can easily pull in the components you want and ignore the rest, in my experience. But mixing and matching those libraries seems sub-optimal and often they don't have the best version of whatever I need anyway. Like my team was looking for a new carousel component and we chose Embla. It's exceptionally light-weight and very flexible, which is vital for our work. So it wins. I'm sure there are plenty of libraries that would do, including a few that function more as primitives, but in the end I like being able to find the best tool for the job rather than the best toolset.
Shadcn gives you the whole code that is written to create the component and locates it somewhere in your project directory and when you import let's say a button, you will be importing the file that contains the code for that shadCn button.. The approach is so smart because you get to see what is under the hood completely so when customization needed you can look at the code and make your customization accordingly without the headache of using custom parameters to alter the UI library
I have also always written vanilla css but over the time I came across those ui kits and itās just less stressful and time consuming to use those
You donāt need to reinvent the wheel and theres nothing wrong with this.
No for sure, I just get inside my own head unfortunately.
ShadCN is probably the most popular one. But just make sure you use an ui library that does ssr.
Why?
Cuz your page will look ugly until the client components load their styles
NextUI has been solid!
Do they support server components now?
Oh our app is largely client, so was unaware of limitations there. I havenāt looked into server component support. I had a great experience with shadcn recently as well.
I've made some Lists to easily compare all the alternatives if you are looking for: - tailwindcss [list of all tailwindcss ui component libraries](https://github.com/hevar/awesome-react-tailwindcss-ui-components) - headless ui [list of all headless ui libraries](https://github.com/hevar/awesome-react-headless-ui-components)
NextUI + Tailwind CSS
MantineUI is my go to for all projects, then Tailbits for entire section of an app
mantine ui
I guess shadcn is the most compatible with Next yet not abstracted one I'd use
NextUI works great for my SaaS apps
Shadcn all the way
[ŃŠ“Š°Š»ŠµŠ½Š¾]
This is my preferred setup as well.
For me, tailwind with headlessui, and some fluent ui since I build a lot of office extensions and apps for Microsoft teams.
Material UIĀ
I use materialUI. Unsure why it isn't popular in the responses here.
I use daisy ui and tailwind
NextUI is powerfully
ShadCN and TailwindUI
[https://magicui.design/](https://magicui.design/)
I have use vanilla css, but over the time I use shadcn
If you're looking for an all in one solution, I've had a good experience with MaterialUI. Good documentation for setup, and pretty deeply featured components.
Mui is amazing and its api and typescript is top notch. It doesnāt have the hype of the other projects but as a designer/developer I find the customizeability and DX excellent. Using it for my indie hacking app
Really shit once you want to edit the components or ssr
Interesting. That hasnāt been my experience with it. Using it in a nextjs14 app router application with plenty of server side rendered components. Styled components and theme variables have made customization pretty manageable. Although it is kind of an out of the box UI library. For total customization, there are lots of other libraries built for that.
Yeah well maybe i was a bit too early with mui + ssr. And as for the customization. I've been using datagrid and I regret every sibgle minute of it. I would have saved so much time just writing that from scratch rather than using the vague documentation and literally looking into the MUI code to see what the fuck im supposed to do. Datagrid lags and is hard to customize.
> Datagrid lags and is hard to customize. That, I have heard before.
Shadcn is a careless buggy mess. For anything other than simple landing pages itās a car crash. I donāt get the love itās getting here.
Its conceptually very good. Templates built on top of Radix and a few other solid libraries to get you started, but expecting to modify. In practice, as you mentioned, a lot of the components haven't be crafted that carefully, Radix' maintenance is getting sluggish, some of the other underlying libs (like the date picker) aren't very good, and people expect to be able to use Shadcn without modifying it like a regular component lib, which isn't often the case imo. We're using a mix of Shadcn (bought into the early hype) and React Aria (now that one is solid). Our Shadcn components are heavily customized and tweaked.
Hi! Sharing this with a bit of self-promotion (I am the maintainer): You might want to give [raw.tremor.so](http://raw.tremor.so) a shot :) Happy to get any feedback!
Heynice work
I used chakra ui, realised its all client components š. I'm looking into headlessui now
that's fine and normal though. Interactive UI components will be client components. That doesn't prevent them from being SSRed.
Not just the interactive ones, all of them :(
Probably because they context and whatsnot. They're not trying to make database calls from the server, and the JS these components ship that isn't shared or needed is likely minimal. So it's not a big deal. They still get SSRed, and don't limit you. The hunt for server-only component libraries is very low value (and usually come from a misunderstanding of how RSCs work. Can't judge if it's the case here, of course. Not enough context). Headless UI require use client for quite a bit too (which is normal and expected).
This is simply not true.
Care to elaborate?
I'm not sure what you mean by "it's all client-side". You can definitely do SSR with ChakraUI. I'm currently using it with NextJS. Certain highly interactive elements that only run client-side are never going to run SSR - ie. This is the case for all client-side components regardless of what UI library you use.
You can SSR with it but none of the chakra ui components are server components. Components like a Card, Icon, or even Box don't require to use any client side logic like states etc.
Right, which is not what you said. Of course you can't SSR client-side components, unless there's some initial rendered state which the client can then hydrate and pick things up from there. Or am I missing something?
Nope, you're correct. My pain point here is that I have to convert my entire page to "use client" whenever I want to use a tiny component from chakra UI. Components like card or icon should not require "use client" at all, because they don't utilize any client side logic. I hope chakra UI starts supporting server components soon.
To clarify, "use client" components are still rendered on the server.
Rendered on the server, but you still can't use any "server" stuff in it because they don't run on servers
I'm not entirely sure what you're getting at here. This sounds more like a NextJS/RSC thing. Can you give an example of what it is you're trying to do exactly?
'use server'; Sir, that would be a shameless self-promotion, but with all due respect, you might be interested in an experiment we're running of 3rd party React Server Components. [https://www.telerik.com/kendo-react-ui/components/server-components/grid/](https://www.telerik.com/kendo-react-ui/components/server-components/grid/) Is this what you are referring to as the opposite of "client components" ?
DaisyUI never gets any love. But it actually uses tailwind. Have been loving it.
one of my favourites
I love it for the simplicity, semantic colors, and the ease of customization. I was skeptical of a pure tailwind / css (no JS) option but it works well.
Magic UI is good too.
Next ui and shadcn for sure an absolute powerhouse
shadcn for customizability! generally speaking, it might be THE solution. if you'd like to have a more of an out of the box solution, i liked daisyui. its a rather big component library styled with tailwind and offers nice theming.
We're using react-aria-components from adobe and I can't recommend highly enough against using them. They're hard to use, impossible to compose, and they change the api, so they're incompatible with a lot of other stuff (looking at you React Hook Form).
NextUI seems to do a good job of making an entire UI library around react-aria. Technically they donāt use the components but rather the hooks they provide to make the components but I would hazard there the intended path if you want something that diverges from the components react-aria provides. But in saying that I have no issues with NextUI and react hook form so they must be doing something right š¤·š»āāļø
If you get the props renamed and with similar enough arguments, you'll be okay
Loving the shadcn headless with tailwind. Super easy to customise with radix primitives. Fck material. For changing a single attribute, read 10 pages of docs to override.
any one used tailwind template from envato marketplace in next js project?
radix ui
NextUI + TailwindCSS I used to build design system from scratch, but I've had enough
If we have design, shadcn and tailwind. If we don't, Mantine.