Flowbite vs tailwind UI vs shacdn vs ??
I want to create an application UI in React with:
* Dark/Light mode support
* Charts
* Paginated, searchable, and sortable tables
* A large collection of reusable components
* Pre-built templates (e.g., with a side navigation menu)
Budget is not a constraint, I’m willing to pay for the best solution
Many online reviews comparing Tailwind UI and Flowbite are old.
What would you use today, and why? And more importantly, what wouldn't you use?
Solution:Jump to solution
Flowbite is not extensible like that, it comes with predefined class names alongside standard Tailwind classes, or actual Components if you use it with some framework (e.g. react)
However, you DO NOT own the code, you get the code bundled into your modules and can use it, but you CANT change it - the only way to change the style and behavior is through props. In that sense flowbite is a component library like MUI for example.
ShadCn works completely different from that, when you run the command to install a component, they put an actual .tsx file into your code that has exports that component (e.g. Button). ...
9 Replies
It's hard to go wrong with shadcn to be honest. I think they offer the most flexible approach (that's also free) whilst maintaining some sensible defaults.
For styling you would still want Tailwind, but Tailwind UI isn't necessarily worth it IMO.
Table-related stuff is always covered by @tanstack/react-table for me. The best primitives and sensible defaults that just kind of work out of the box. Anything Tanner does is usually gold. He also does a charting library I think although I've never tried it.
thanks a lot for your reply. Why are you saying the approach of shacdn is more flexible?
shadcn is much flexibale than other options for sure
yes, but why? 🙂
in Flowbite you customize components using props. In shacdn you customize code itself using tailwind
shacdn components are in ur /srs folder not in node modules
oO
From my understanding, flowbite is nothing more but components you copy paste in your code, and you can customize the classes of you need to
Am I missing something?
ohh ok, you mean the flowbite-react package.
Solution
Flowbite is not extensible like that, it comes with predefined class names alongside standard Tailwind classes, or actual Components if you use it with some framework (e.g. react)
However, you DO NOT own the code, you get the code bundled into your modules and can use it, but you CANT change it - the only way to change the style and behavior is through props. In that sense flowbite is a component library like MUI for example.
ShadCn works completely different from that, when you run the command to install a component, they put an actual .tsx file into your code that has exports that component (e.g. Button).
Now you can use that normally like any other component, but the magic is that YOU OWN the source code for the component. You can change any behaviour you want inside it, add variants etc. Also, it uses only tailwindcss classes for styling so you don't need to learn anything else. While flowbite allows you to copy-paste the code, (at least for the frameworks) it still requires you to install the actuall library with the components inside. Also, Shadcn uses RadixUI under the hood for better accessibility and usability... idk if flowbite does that for you. TLDR; shadcn is the most extensible UI library, it defined a whole new perspective on UI libraries and is quickly becoming the standard solution because of it's versatility. Some potential drawbacks are that most UI libraries have more styles, components etc. and flowbite can be used with multiple languages, while Shadcn is mostly for React, Solid and Vue. But for the first point, you can just find tailwind code for a button you like, paste it into the generated shad component and you are good to go 💪 My recommendation - go with shadcn
Now you can use that normally like any other component, but the magic is that YOU OWN the source code for the component. You can change any behaviour you want inside it, add variants etc. Also, it uses only tailwindcss classes for styling so you don't need to learn anything else. While flowbite allows you to copy-paste the code, (at least for the frameworks) it still requires you to install the actuall library with the components inside. Also, Shadcn uses RadixUI under the hood for better accessibility and usability... idk if flowbite does that for you. TLDR; shadcn is the most extensible UI library, it defined a whole new perspective on UI libraries and is quickly becoming the standard solution because of it's versatility. Some potential drawbacks are that most UI libraries have more styles, components etc. and flowbite can be used with multiple languages, while Shadcn is mostly for React, Solid and Vue. But for the first point, you can just find tailwind code for a button you like, paste it into the generated shad component and you are good to go 💪 My recommendation - go with shadcn
I think that flowbite uses only Tailwind classes not any of special ones, despite what I said before, but I'm not sure... Still everything else is on point ✅
Thank you so much for your detailed answer, I'll give a try to shacdn!