DEV Community

Cover image for Float UI: The Tailwind UI Alternative for Building Beautiful Web Interfaces

Float UI: The Tailwind UI Alternative for Building Beautiful Web Interfaces

Sidi Jeddou on June 16, 2023

In the world of web development, creating visually appealing and user-friendly interfaces is paramount. While there are many frameworks and tools a...
Collapse
 
shriji profile image
Shriji

Good but why only JSX, you could add a plain old HTML.

Collapse
 
sididev profile image
Sidi Jeddou

The problem with HTML is that nobody these days use it plain, they always use a JS framework to build frontend.

Collapse
 
joshuaamaju profile image
Joshua Amaju

You sure about that?

Thread Thread
 
sididev profile image
Sidi Jeddou

Yea, especially if the components is interactive, people want to save time, if you miss it people will go to something like MUI or NextUI that support it by default, because if you think about making every HTML you copy interactive will take you time, this is my point.

Thread Thread
 
shriji profile image
Shriji

This limits your userbase to just react, preact, solid... anything with just JSX.

The problem with HTML is that nobody these days use it plain, they always use a JS framework to build frontend.

What about Svelte, Vue or even Angular?

Thread Thread
 
sididev profile image
Sidi Jeddou

Yea you’re right, basically we’re thinking to support them, thanks for your reply :)

Thread Thread
 
joshuaamaju profile image
Joshua Amaju

FloatUI is just a repository of pre-written tailwindcss tokens, and looking at the components there's nothing specific to React use case. So you'll just be creating examples that are basically the same for React, Vue etc. when you can just creating one HTML example for all your components and then add examples for the interactive components for different frameworks.

At the end of the day, a React, Vue etc developer is a HTML developer. So everybody benefits, and you do less work, right?

Thread Thread
 
sididev profile image
Sidi Jeddou

Yes, you’re right and I agree with you.

Collapse
 
jpkeisala profile image
Jukka-Pekka Keisala

No, that is not true at all. Most of the sites are still built with serverside rendered with PHP/Ruby/.net/java etc...

Thread Thread
 
sididev profile image
Sidi Jeddou

Oops, didn’t know that, thanks for clarifying.

Collapse
 
brianh profile image
Brian

You can use DivMagic to convert all of these components into HTML with one click

Collapse
 
shriji profile image
Shriji

Is it free/open source?

Thread Thread
 
brianh profile image
Brian

It is a commercial tool

Collapse
 
sididev profile image
Sidi Jeddou

Great, didn’t know about it before, thanks!

Collapse
 
dyloneus profile image
Dave A

Sounds cool but what does float ui do that Tailwind doesn't? And how is it better than Tailwind? Genuine question.

Collapse
 
sididev profile image
Sidi Jeddou

Thank you David! Answering to your question, Float UI isn’t a CSS framework it’s a UI library built on top of Tailwind CSS, includes ready to use components to speed up your work in building UIs.

Collapse
 
dyloneus profile image
Dave A

Thanks. The article implies it can be a replacement for Tailwind rather than an extension of it. Thanks for sharing and clarifying.

Thread Thread
 
emi2k01 profile image
Emilio González

I think you're mixing up tailwindcss with Tailwind UI

Collapse
 
manueltarga profile image
Manuel Targa

Interesting.

Collapse
 
anuragvohraec profile image
Anurag Vohra • Edited

when i click on floar ui link, it gave me unsecure link warning to me in Android chrome

Attackers might be trying to steal your information from floatui.com (for example, passwords, messages, or credit cards)

Collapse
 
sididev profile image
Sidi Jeddou

Thank you for reporting, will fix it ASAP.

Collapse
 
riccardo10 profile image
Riccardo • Edited

And don't forget Blazor too.
Not every developer is into JS frameworks like React, Angular, Vue, etc.
I am a C# developer using the ASP. Net Core stack and I prefer to use Blazor for writing SPA apps.
Just putting it out there 😀

Collapse
 
sididev profile image
Sidi Jeddou

That's sounds interesting, how do you deal with the interactive components, do you use pure JavaScript?

Collapse
 
nsnyder profile image
Nathan Snyder

Looks really nice! I do think it would benefit significantly from the components being made accessible. Things like appropriate attributes for modals and alerts, and appropriate labels for close buttons that are an "X" SVG would make it easier to get up and running and help users of accessibility technology that interact with these components.

Collapse
 
sididev profile image
Sidi Jeddou

Hey, thank you so much for this great point.

Collapse
 
daslaw profile image
Dauda Lawal

Thanks for this insightful article.

Collapse
 
sididev profile image
Sidi Jeddou

Glad you liked it, Dauda :)

Collapse
 
michaelsynan profile image
Michael Synan

Looks amazing, can't wait to try it out.

Collapse
 
sididev profile image
Sidi Jeddou

Thanks Michael, looking forward to see you using it 🙌

Collapse
 
bays profile image
Bayu Saputra

nice

Collapse
 
johnrushx profile image
John Rush

love this lib

Collapse
 
louislow profile image
Louis Low

You should try out WEAVV doesn't build on top of Tailwind. Fit in HTML or JS as you like. No design limits.

Collapse
 
devluc profile image
Devluc

Float UI is awesome. Great work on creating it Sidi

Collapse
 
sididev profile image
Sidi Jeddou

Thank you so much mate 🙏

Collapse
 
ejikeejike profile image
Ejike Aneke

i love this float ui

Collapse
 
sididev profile image
Sidi Jeddou

Thank you so much, appreciate it, Ejikr 🙏