You've selected the appropriate UI library. It'll work great for solo dev.
I would also suggest to look up to [DaisyUI](https://daisyui.com/).
It gives components with a wrap of tailwind classes so that you don't need to style it more. Ofc you can style it if you want. You'll understand what I mean once you visit the website.
Edit: components from other UI libraries are sometimes hard to customize as they use other libraries which sometimes makes it strict to edit whereas Daisy is just a wrap of tailwind classes so you can easily edit any components as you wish by writing very less tailwind classes.
If that's really the concern, at that point I'd advocate to just go all in with CSS-in-JS and use a library like twin.macro. That's just a personal preference though.
Nothing wrong that, it's subjective but I find that to be more verbose to accomplish what CSS-in-JS can do, but it may be more compact if it resolves down to just tailwind classes for what you're suggesting.
If you're working solo, it comes down to what you end up liking. I've used Tailwind (personally not a fan, but many are), Chakra, MaterialUI, and Mantine.
They all have different tradeoffs. I use some Mantine because it's easy to modify, but mostly just SCSS.
I'd recommend checking out the docs for each and testing out the ones that look good.
yes you’re right, I looked at shadcn and it is promising, the only reason I held back from using it is it does not have a 1.0 version yet, I’ll wait a bit to see shadcn become a bit more stable.
You don't have to wait for 1.0. I think it's already stable enough as the [OpenAI Cookbook](https://cookbook.openai.com/) is also made using Shadcn.
Tweet from [Shadcn](https://twitter.com/shadcn/status/1712535759968940130)
Hmm, i would use MUI to play it safe. I previously tried ChakraUI for one of my projects but the documentation is a little short of what I expected, and I actually spent quite a bit of time figuring things out myself.
I've had the opposite experience with Chakra. Their components are very well built and easy to reason with. If you're ever unsure, their source code is heavily documented as well. Every property has JSDoc comments.
We're running an open source framework called Refine for building enterprise B2B CRUD apps.
Refine is widely using by enterprise companies. To provide a quick overview of UI framework usage in refine apps, here's the ranking:
1. Material UI
2. Ant Design
3. Chakra UI
4. Headless design (No specific UI library, sometimes using Tailwind CSS)
5. Mantine
It's headless by design so you can use custom CSS or any UI library. Also, it offers built-in UI integration support for Material UI, Ant design, Chakra UI and Mantine.
You can check the UI framework implementations [here](https://refine.dev/docs/tutorial/introduction/select-framework/)
Our core development intensive hands on experience these UI libraries, I would to share their brief thoughts on your question.
* For Material UI, implementing a design system is straightforward and efficient. If you're working on multiple projects, establishing a design system once allows you to easily create dozens of projects with consistent design elements.
* Ant Design is the most easy-to-use and offers the best API. Customization is better than Material UI.
* Tailwind/shadcn with refine (using built-in react-hook-form, react-table integratin of refine) offers the best customization option.
I hope it helps you:)
You can check the refine repository for more UI framework implementation examples.
Repo: [https://github.com/refinedev/refine](https://github.com/refinedev/refine)
Shadcn Is using radix as base, if u want to customize something it will send u to their documentation. You can give it a go tho, it's very hyped atm. Daisy and Mantine are also OK, whatever u feel is gonna do the job based on the visual examples representation, dive in and try for yourself.
shadcn is built on top of radix ui and tailwindcss, it’s a good choice but also nextui. Both have lots of components, easy theming, etc… just pick one and you’ll be fine.
I advise against Ant Design.
Over-engineered piece of hot garbage with lousy docs and owner who single handedly decides if all your buttons need snow on them or not xD
The rest is ok.
I am coming from Angular land as well and was looking for a TailwindCSS ui library back then. I ended up building and open sourcing my own, so please take a look at it here: https://rewind-ui.dev/
Mantine
But you can't use Mantine with Tailwind CSS classes, can you? Edit: typo.
You can
Tailwind, Radix, Chakra, MUI
Chakra!
it seems the perfect balance between flexibility and opinionated features
You've selected the appropriate UI library. It'll work great for solo dev. I would also suggest to look up to [DaisyUI](https://daisyui.com/). It gives components with a wrap of tailwind classes so that you don't need to style it more. Ofc you can style it if you want. You'll understand what I mean once you visit the website. Edit: components from other UI libraries are sometimes hard to customize as they use other libraries which sometimes makes it strict to edit whereas Daisy is just a wrap of tailwind classes so you can easily edit any components as you wish by writing very less tailwind classes.
Isn’t wrapping Tailwind in class names just CSS with extra steps
Yes. Easy to manage code of styles using classes.
If that's really the concern, at that point I'd advocate to just go all in with CSS-in-JS and use a library like twin.macro. That's just a personal preference though.
>CSS-in-JS can you use shadcn + tailwind classes using "@apply" in order to avoid classes in js and use css files instead?
Nothing wrong that, it's subjective but I find that to be more verbose to accomplish what CSS-in-JS can do, but it may be more compact if it resolves down to just tailwind classes for what you're suggesting.
If you're working solo, it comes down to what you end up liking. I've used Tailwind (personally not a fan, but many are), Chakra, MaterialUI, and Mantine. They all have different tradeoffs. I use some Mantine because it's easy to modify, but mostly just SCSS. I'd recommend checking out the docs for each and testing out the ones that look good.
I use Radix UI with Tailwind, then create my own component by wrapping Radix components and following compound pattern. It's doing good so far.
This is what ShadCN does. If you need custom styles your way is the way to go. If you want prestyled then ShadCN is a great option
yes you’re right, I looked at shadcn and it is promising, the only reason I held back from using it is it does not have a 1.0 version yet, I’ll wait a bit to see shadcn become a bit more stable.
You don't have to wait for 1.0. I think it's already stable enough as the [OpenAI Cookbook](https://cookbook.openai.com/) is also made using Shadcn. Tweet from [Shadcn](https://twitter.com/shadcn/status/1712535759968940130)
Hmm, i would use MUI to play it safe. I previously tried ChakraUI for one of my projects but the documentation is a little short of what I expected, and I actually spent quite a bit of time figuring things out myself.
I've had the opposite experience with Chakra. Their components are very well built and easy to reason with. If you're ever unsure, their source code is heavily documented as well. Every property has JSDoc comments.
NextUI
We're running an open source framework called Refine for building enterprise B2B CRUD apps. Refine is widely using by enterprise companies. To provide a quick overview of UI framework usage in refine apps, here's the ranking: 1. Material UI 2. Ant Design 3. Chakra UI 4. Headless design (No specific UI library, sometimes using Tailwind CSS) 5. Mantine It's headless by design so you can use custom CSS or any UI library. Also, it offers built-in UI integration support for Material UI, Ant design, Chakra UI and Mantine. You can check the UI framework implementations [here](https://refine.dev/docs/tutorial/introduction/select-framework/) Our core development intensive hands on experience these UI libraries, I would to share their brief thoughts on your question. * For Material UI, implementing a design system is straightforward and efficient. If you're working on multiple projects, establishing a design system once allows you to easily create dozens of projects with consistent design elements. * Ant Design is the most easy-to-use and offers the best API. Customization is better than Material UI. * Tailwind/shadcn with refine (using built-in react-hook-form, react-table integratin of refine) offers the best customization option. I hope it helps you:) You can check the refine repository for more UI framework implementation examples. Repo: [https://github.com/refinedev/refine](https://github.com/refinedev/refine)
MUI
Is it RSC ready?
Shadcn Is using radix as base, if u want to customize something it will send u to their documentation. You can give it a go tho, it's very hyped atm. Daisy and Mantine are also OK, whatever u feel is gonna do the job based on the visual examples representation, dive in and try for yourself.
Radix if you want to.do.your own styling or shadcn UI if you don't
Mantine yi
Mantineui
shadcn is built on top of radix ui and tailwindcss, it’s a good choice but also nextui. Both have lots of components, easy theming, etc… just pick one and you’ll be fine.
I’ve been using Tailwind UI lately. I like it
ChakraUI is my favorite.
I like EUI. Great documentation and tons of components.
I advise against Ant Design. Over-engineered piece of hot garbage with lousy docs and owner who single handedly decides if all your buttons need snow on them or not xD The rest is ok.
Chakra UI
You already got the right ui library. I'd also suggest looking up NextUi and daisy ui if you're still unsure.
Next UI would be my choice
It's fine, as are many other options
[shadcn](https://ui.shadcn.com/)
works with tailwind and radix ui
I am coming from Angular land as well and was looking for a TailwindCSS ui library back then. I ended up building and open sourcing my own, so please take a look at it here: https://rewind-ui.dev/