flowbite VS shadcn/ui

Tailwind CSS handles the styling in this project, which speeds up the development of clean and responsive UIs. This project also uses Flowbite for pre-built UI components like modals, tooltips, and buttons. Flowbite integrates well with Tailwind and helps you avoid reinventing the wheel for common UI elements.

// set up custom event listeners for the buttons document.getElementById('toggleLinkButton').addEventListener('click', () => { const url = window.prompt('Enter image URL:', 'https://flowbite.com'); editor.chain().focus().toggleLink({ href: url }).run(); });

4. Flowbite Tailwind-based components built for speed and flexibility, featuring UI elements that work across different devices and screen sizes. Flowbite:

Flowbite offers a wide range of ready-to-use components like buttons, modals, and navigation bars, all fully responsive and customizable to fit your design needs. Its extensive documentation ensures you can quickly integrate these components into your projects.

Flowbite

Flowbite Svelte is an open-source UI library built with Svelte components and Tailwind CSS. It provides over 58 UI components and interactive elements built with Svelte and Flowbite. It comes with well-organized documentation, where you can see the code sample and preview the components for responsive sizes: desktop, tablet and smartphone. You can also switch light/dark modes and RTL/LTR text direction. The code looks quite straightforward and the components are styled very neat.

TailwindCSS (with Flowbite)

Tailwind is great, but creating everything from scratch is annoying. A nice base of components which can be extended with tailwind would be great. There are a few tailwind frameworks like Flowbite, Daisy Ui, but I like Bulma, PicoCSS and Bootstrap.

Some of the examples are free and open-source under the MIT license and some of the others are part of the Flowbite Pro package.

In case anyone finds this who is also interested: I just stumbled upon an implementation of shadcn/ui components with css modules that looks pretty solid: https://github.com/qwalker8408/shadcn-css/tree/main

Hopefully something like this will be made official - at least there is some discussion going on in the shadcn/ui repo: https://github.com/shadcn-ui/ui/discussions/2832

shadcn/ui

For this project, I used PureScript + React + Tailwind css + shadcn/ui components. I assume you’ve heard of the first two (if not, see PureScript overview). The other two are blessings for the copy-paste-driven development.

The frontend of Zentrox is written using React. Of course I did not write this frontend without any frameworks. I use Next.JS by Vercel as a framework. Zentrox also uses a UI library called shadcn. Shadcn is an amazing library. It made devloping frontend a lot easier when you do not have to build everything from the ground up. I'd also like to give some credit to Radix UI, as this is what Shadcn uses for its components. :-)

I used Tailwind CSS for the styling because it's fast and easy to use, after a second thought I decided to use shadcn/ui so I did not have to build the components from scratch.

We started migrating some of our internal tools to https://ui.shadcn.com/ . We did not want to reinvent the wheel because it would take too effort (and we did try a couple times and failed).

If you're familiar with shadcn/ui (and if you're not, you should check it out!), you'll get what I'm going for here. asterisk/ui also follows the same core idea of providing open source, beautifully designed components that you can copy and paste into your apps, only in this case, the components are animations instead of styled primitives. It's all about making your life easier and your projects prettier.

Today, let's take a deeper look at two of the top contenders: Radix UI and ShadCN. Both these libraries have something different to bring to the table, and by the end of this post, you'll have a clearer idea of which might best be suited for your next project.

Living in the web development world, it may just feel like digging for treasure until you find your tools. If you're just starting now, well, you're in luck because Shadcn is packed full of awesome components that can make life so much easier.

Shadcn/ui