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?
* 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
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
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
Similar Threads
Was this page helpful?
