8 ms·

Show HN: Open Source TailwindCSS UI Components

148 points by santush 2y ago

Free Tailwind html UI Components - built to create landing pages and websites. Easyfrontend UI components are free and open-source. Copy paste the components to update your existing site or create a new site from it.

canadiantim 2y ago
Does anyone else find GitHub’s mobile website to be poorly designed now? They used to be great but now it’s barely useable.
- microflash 2y ago
  Earlier GitHub UI was heavily reliant on web components. Now, they have been increasingly using React.
SillyUsername 2y ago
I'm looking for components to produce a desktop webapp frontend. I didn't see any examples in your project for things like this, do you have any?
- santush 2y ago
  This components only works on web.
  - SillyUsername 2y ago
    Yes I'm running a local web server with a totally client side app :)
- djbusby 2y ago
  https://sciter.com/ https://sciter.com/
J_Shelby_J 2y ago
Maybe I should use them on my easy Astro blog creator[0]. How much “easy” can we stack! [0] https://github.com/easy-astro-blog-creator/easy-astro-blog-creator https://github.com/easy-astro-blog-creator/easy-astro-blog-c...
victorbojica 2y ago
"Build your site in minutes or copy & paste your way to a professional website components!" - state of front-end right now
- tomschwiha 2y ago
  Isn't it a good thing the web became so accessible? It's super easy to find ressources free to use.
  - samuellevy 2y ago
    Funny that you mention "accessible"... Because most of these components are anything but. Modern HTML and CSS are awesome tools on their own, and are able to do so much without needing to rely on massive JavaScript bundles, but you still end up with component libraries that are <div><div><div><div> all the way down.
- W4ldi 2y ago
  We already had that with Dreamweaver
- kyahwill 2y ago
  I'm in this comment and I don't like it
- datascienced 2y ago
  So? If you like coding but hate design this sort of thing can help get something reasonable up and running without analysis paralysis.
- romanovcode 2y ago
  Not really. Now write the code in React/Angular/etc to make it all work together.
- code_biologist 2y ago
  Honestly the bloat and ergonomics of heavily customizable generic component libraries aren't great. Copy and pasting a simple component to make the specific customizations you want helps reduce JS ecosystem churn and dependency pain. Popularity of libraries like shadcn/ui [1] are good acknowledgements of that. [1] https://ui.shadcn.com/ https://ui.shadcn.com/
smallerfish 2y ago
EasyFrontend is cool - nice job. Do you have a long term pricing plan? You definitely need some copyediting on your home page. It'd be nice if you abstracted fonts (and colors?!) across components, so that users could pick their main combo and have those applied throughout. The editor sidebar should be wider, since that's the main place where somebody working on the frontend will be tweaking styles and editing text.
- santush 2y ago
  We are working on some premium components and themes as well. Some features will be available soon. We will introduce them shortly on our website for early bird registration. In the editor, you can choose theme colors and fonts, but the theme style is still in process. We will publish it soon.
jefc1111 2y ago
Hi, I had a quick look at website and have some feedback in case you want it. "Faq's" in the top menu does not need the apostrophe and "lets" on the frequently asked questions page needs an apostrophe. So all in all, you don't need to acquire any new apostrophes, you can just move the one you already have in "Faq's" to between the t and the s in the "lets". Result!
- nkko 2y ago
  This is the reason why I always get back to HN. 100% value delivered.
- efilife 2y ago
  https://youryoure.com/?apostrophe https://youryoure.com/?apostrophe A great website to learn the basics of the English language
  - KronisLV 2y ago
    The site lays out plenty of practical examples and I agree that it's useful! However, this feels a bit edgy or just unkind: > Getting it wrong makes you look stupid. And ugly. Oh well.
    - efilife 2y ago
      Yup, it's a bit edgy, but I kind of understand the author. Common mistakes listed on the site plague the whole internet and it's hard not to get emotionally invested once you start to notice how many people just write incorrectly. A very interesting thing from my observations: people that make these mistakes are usually native speakers, foreigners usually lack vocabulary but don't confuse words. May be related to how the language is learned
- santush 2y ago
  Thank you. made an update
threatofrain 2y ago
Huh... does anyone find these components to be remarkably bleh quality? As low quality as if they were generated by Vercel's AI service.
- Olphs 2y ago
  Yes, I'm very surprised that this is the top post on HN currently Still haven't seen an open-source UI kit that would get even close of the original one: https://tailwindui.com/ https://tailwindui.com/
  - RamblingCTO 2y ago
    Yeah, you have tons and tons of these. Shoestring, primeng, shadn/radix, etc. etc.
    - dimgl 2y ago
      shadcn/Radix is incredible though. Best component framework I’ve ever used.
      - RamblingCTO 2y ago
        Yeah, I've been using it quite a lot actually and it's so satisfying and fast to develop with.
    - dimgl 2y ago
      Btw I think you meant Shoelace
      - RamblingCTO 2y ago
        Oh, yeah you're right!
  - airstrike 2y ago
    shadcn is downright great and ergonomic
jwr 2y ago
Somewhat related: I'm still looking for a replacement for Semantic-UI. Specifically, similar breadth, no JavaScript (and no npm), just lots of components styled using CSS. Willing to pay a $250/month subscription fee. Most "frameworks" seem to follow the same patterns: NPM, lots of JavaScript, "revolutionary new approach to how you specify your layouts", few components, styling suitable for landing pages and startup home pages, not for data-dense applications, and nobody cares about tables. If you ask "so what's wrong with Semantic-UI?" — nothing, except it isn't really developed and maintained anymore. I wish it also relied less on JavaScript. But otherwise it's pretty good.
- santush 2y ago
  We are not using any package. To work with tailwind you can ignore npm. check this : https://tailwindcss.com/docs/installation/play-cdn https://tailwindcss.com/docs/installation/play-cdn
sprintfire 2y ago
I tried the editor on the website. When I try to add tailwind navigation components to an html project it results in SQL numeric value out of range error.
- santush 2y ago
  Hi sprintfire, sorry to hear that you faced that issue. Just solve that. Thank you
jprosevear 2y ago
Not affiliated: https://daisyui.com/ https://daisyui.com/
- blowski 2y ago
  Also https://flowbite.com/ https://flowbite.com/ (and I'm also not affiliated).
- lelandfe 2y ago
  There is something delightfully odd about a Tailwind project saying, "instead of writing 100 class names, use semantic class names" – which, yanno, is pretty much what everyone was doing already before Tailwind.
  - notresidenter 2y ago
    Yeah, I think the DaisyUI developers miss the point of Tailwind. You should almost never use "semantic class names" with Tailwind (and what even is a semantic class name, honestly? It's all context-, developer-dependent) and instead go for a component (using a js framework, a web component, or other) and write the component with utility classes.
    - FireInsight 2y ago
      I tried out DaisyUI and I think it had kind of best of both worlds and was pretty ergonomic. IMO the main issues with it were that it's just CSS (not much accessibility etc. thought out for me), but the design isn't that great (in practice writing custom components without DaisyUI could have gotten the same results).
  - Shrezzing 2y ago
    Wait, it's not satire?
naiv 2y ago
TailwindUI's 101% bet on React for the templates and catalyst is really sad. I would pay extra for TailwindUi vanilla js components. So it's good to see new component libraries being released supporting vanilla Javascript with Tailwind and gives developers who do not like React a choice.
- nicce 2y ago
  There are many sites with alpine.js components if that is better.
- heartbreak 2y ago
  TailwindUI has React, Vue, and a simplified HTML version of their interactive components. See: https://tailwindui.com/components/application-ui/data-display/calendars https://tailwindui.com/components/application-ui/data-displa...
  - naiv 2y ago
    I know, like I mentioned not in the templates or catalyst
  - BaculumMeumEst 2y ago
    He is saying they don't all have vanilla JS implementations of component functionality.
- deleted 2y ago
  [deleted]
- rjzzleep 2y ago
  Check out flowbite https://flowbite.com/docs/getting-started/introduction/ https://flowbite.com/docs/getting-started/introduction/
  - naiv 2y ago
    I bought the pro license for Flowbite as well. I like that is has a js library and I think the look and feel works well on admin dashboards, not so much for b2c cases
j45 2y ago
This reminds me of shuffle.dev l, of which I am a customer. Nice work!
015a 2y ago
I'm gonna be rough here. I think calling these things "components" feels wrong. Components are far more elemental than what these are; these are pages, or maybe modules. Nonetheless, some of these "components" are quite bad [1]; it smells like AI was used to generate these? They run the gamut between bad enough that I wouldn't use them, or simple enough [2] that I wouldn't use them, and I'm not seeing a ton occupy the middle. [1] https://easyfrontend.com/component-details/error-404-buttons-left-aligned-image?lang=html&frame=bootstrap&mode=sources&colorScheme=light https://easyfrontend.com/component-details/error-404-buttons... [2] https://easyfrontend.com/component-details/grid-style-number-cards?lang=html&frame=bootstrap&mode=sources&colorScheme=light https://easyfrontend.com/component-details/grid-style-number...
- adif_sgaid 2y ago
  I totally agree...
- FireInsight 2y ago
  If you want some "copy-paste tailwind components" you're really best of using shadcn/ui or whatever port exists for your favorite UI libraty. I've been using shadcn-svelte in a recent project and it's the best decisions I made. Having the source code there and modifying it to suit my needs really has helped me learn a lot of good practices.
  - mattgreenrocks 2y ago
    shadcn is fantastic. Bit of a learning curve vs component libraries (like Flowbite), but you can just go in and make the changes you need as necessary. It also helps that the New York style is very nice as well.
- deleted 2y ago
  [deleted]
- santush 2y ago
  hi, thank you for the comment. We didnot build any components using AI. The link you provided if you choose the language and framework you will see the actual code of the component. There is proper way we follow > design components > make it HTML Tailwind > React Tailwind And all are free to use.
hilti 2y ago
Great idea ... I would love to see a couple things 1) Another section "Dashboard" including components for responsive tables, date pickers, lists, maybe charts 2) A really pure, semantic and therefore light HTML/CSS3 version; no bloated code; I do love the approach of PicoCSS 2
- santush 2y ago
  We have planned to release dashboard components. In next phase we will release that. Thank you for suggestion.
pquki4 2y ago
This is one of those things that look great in demos but impossible to use for a professional website.
lovegrenoble 2y ago
Maybe someone can tell me what is better to use for a newbie: a framework or library of individual web components, like WebAwesome (former Shoelace), for example: https://shoelace.style https://shoelace.style
- SebastianKra 2y ago
  Depends on how good the Framework is. Radix-Themes has generalised components that compose well and exposes design tokens that I would consider best-best practices in any app. On the other end of that spectrum is Ant.Design. It feels like a constant fight against the framework, with a scattershot approach of poorly thought out and overly specific components that are hard to configure to your needs.
  - lovegrenoble 2y ago
    Thank you, Sir.
sigseg1v 2y ago
The website mentions they have 1400+ customers, yet at the same time it's a beta, and has 1 YouTube video with 8 views posted a year ago. Something just feels a little... off? Their Twitter posts seem to have retweeted a post by "Dorik AI" which is a website which has exactly the same theme and mentions "Dorik AI Website Generator can generate a complete website for you in a matter of seconds". I wonder if this is how these components* were initially built? They seem very mishmash and all over the place. *: I mention "components" because these feel more like auto-generated pages rather than the granular things you'd expect a component to have.
deleted 2y ago
[deleted]
_akhe 2y ago
Why should I not just use the official Tailwind UI? https://tailwindui.com/components https://tailwindui.com/components Are there more components in Easyfrontend? Better ones?
- santush 2y ago
  EasyFrontend is free
  - _akhe 2y ago
    Lol so is Tailwind
    - rijavecb 2y ago
      TailwindCSS is indeed free, but their UI components and themes (TailwindUI) are a paid product. They do offer some components for free though!
      - _akhe 2y ago
        Their UI components are free lol I use Tailwind UI (the React components) all the time in projects, never paid for anything. It's a great place to start for a design system and component library in a new project. After checking again I see you can pay (1-time) to unlock site templates and more components: https://tailwindui.com/templates https://tailwindui.com/templates Does Easyfrontend have site templates? That's what would compare it with Tailwind's paid product, which is a different product.
zipping1549 2y ago
How is it Tailwind component if it's half custom CSS?

148 points by santush 2y ago

canadiantim 2y ago

Does anyone else find GitHub’s mobile website to be poorly designed now? They used to be great but now it’s barely useable.

microflash 2y ago
Earlier GitHub UI was heavily reliant on web components. Now, they have been increasingly using React.

SillyUsername 2y ago

I'm looking for components to produce a desktop webapp frontend. I didn't see any examples in your project for things like this, do you have any?

santush 2y ago
This components only works on web.
- SillyUsername 2y ago
  Yes I'm running a local web server with a totally client side app :)
djbusby 2y ago
https://sciter.com/ https://sciter.com/

J_Shelby_J 2y ago

Maybe I should use them on my easy Astro blog creator[0]. How much “easy” can we stack! [0] https://github.com/easy-astro-blog-creator/easy-astro-blog-creator https://github.com/easy-astro-blog-creator/easy-astro-blog-c...

victorbojica 2y ago

"Build your site in minutes or copy & paste your way to a professional website components!" - state of front-end right now

tomschwiha 2y ago
Isn't it a good thing the web became so accessible? It's super easy to find ressources free to use.
- samuellevy 2y ago
  Funny that you mention "accessible"... Because most of these components are anything but. Modern HTML and CSS are awesome tools on their own, and are able to do so much without needing to rely on massive JavaScript bundles, but you still end up with component libraries that are <div><div><div><div> all the way down.
W4ldi 2y ago
We already had that with Dreamweaver
kyahwill 2y ago
I'm in this comment and I don't like it
datascienced 2y ago
So? If you like coding but hate design this sort of thing can help get something reasonable up and running without analysis paralysis.
romanovcode 2y ago
Not really. Now write the code in React/Angular/etc to make it all work together.
code_biologist 2y ago
Honestly the bloat and ergonomics of heavily customizable generic component libraries aren't great. Copy and pasting a simple component to make the specific customizations you want helps reduce JS ecosystem churn and dependency pain. Popularity of libraries like shadcn/ui [1] are good acknowledgements of that. [1] https://ui.shadcn.com/ https://ui.shadcn.com/

smallerfish 2y ago

EasyFrontend is cool - nice job. Do you have a long term pricing plan? You definitely need some copyediting on your home page. It'd be nice if you abstracted fonts (and colors?!) across components, so that users could pick their main combo and have those applied throughout. The editor sidebar should be wider, since that's the main place where somebody working on the frontend will be tweaking styles and editing text.

santush 2y ago
We are working on some premium components and themes as well. Some features will be available soon. We will introduce them shortly on our website for early bird registration. In the editor, you can choose theme colors and fonts, but the theme style is still in process. We will publish it soon.

jefc1111 2y ago

Hi, I had a quick look at website and have some feedback in case you want it. "Faq's" in the top menu does not need the apostrophe and "lets" on the frequently asked questions page needs an apostrophe. So all in all, you don't need to acquire any new apostrophes, you can just move the one you already have in "Faq's" to between the t and the s in the "lets". Result!

nkko 2y ago
This is the reason why I always get back to HN. 100% value delivered.
efilife 2y ago
https://youryoure.com/?apostrophe https://youryoure.com/?apostrophe A great website to learn the basics of the English language
- KronisLV 2y ago
  The site lays out plenty of practical examples and I agree that it's useful! However, this feels a bit edgy or just unkind: > Getting it wrong makes you look stupid. And ugly. Oh well.
  - efilife 2y ago
    Yup, it's a bit edgy, but I kind of understand the author. Common mistakes listed on the site plague the whole internet and it's hard not to get emotionally invested once you start to notice how many people just write incorrectly. A very interesting thing from my observations: people that make these mistakes are usually native speakers, foreigners usually lack vocabulary but don't confuse words. May be related to how the language is learned
santush 2y ago
Thank you. made an update

threatofrain 2y ago

Huh... does anyone find these components to be remarkably bleh quality? As low quality as if they were generated by Vercel's AI service.

Olphs 2y ago
Yes, I'm very surprised that this is the top post on HN currently Still haven't seen an open-source UI kit that would get even close of the original one: https://tailwindui.com/ https://tailwindui.com/
- RamblingCTO 2y ago
  Yeah, you have tons and tons of these. Shoestring, primeng, shadn/radix, etc. etc.
  - dimgl 2y ago
    shadcn/Radix is incredible though. Best component framework I’ve ever used.
    - RamblingCTO 2y ago
      Yeah, I've been using it quite a lot actually and it's so satisfying and fast to develop with.
  - dimgl 2y ago
    Btw I think you meant Shoelace
    - RamblingCTO 2y ago
      Oh, yeah you're right!
- airstrike 2y ago
  shadcn is downright great and ergonomic

jwr 2y ago

Somewhat related: I'm still looking for a replacement for Semantic-UI. Specifically, similar breadth, no JavaScript (and no npm), just lots of components styled using CSS. Willing to pay a $250/month subscription fee. Most "frameworks" seem to follow the same patterns: NPM, lots of JavaScript, "revolutionary new approach to how you specify your layouts", few components, styling suitable for landing pages and startup home pages, not for data-dense applications, and nobody cares about tables. If you ask "so what's wrong with Semantic-UI?" — nothing, except it isn't really developed and maintained anymore. I wish it also relied less on JavaScript. But otherwise it's pretty good.

santush 2y ago
We are not using any package. To work with tailwind you can ignore npm. check this : https://tailwindcss.com/docs/installation/play-cdn https://tailwindcss.com/docs/installation/play-cdn

sprintfire 2y ago

I tried the editor on the website. When I try to add tailwind navigation components to an html project it results in SQL numeric value out of range error.

santush 2y ago
Hi sprintfire, sorry to hear that you faced that issue. Just solve that. Thank you

jprosevear 2y ago

Not affiliated: https://daisyui.com/ https://daisyui.com/

blowski 2y ago
Also https://flowbite.com/ https://flowbite.com/ (and I'm also not affiliated).
lelandfe 2y ago
There is something delightfully odd about a Tailwind project saying, "instead of writing 100 class names, use semantic class names" – which, yanno, is pretty much what everyone was doing already before Tailwind.
- notresidenter 2y ago
  Yeah, I think the DaisyUI developers miss the point of Tailwind. You should almost never use "semantic class names" with Tailwind (and what even is a semantic class name, honestly? It's all context-, developer-dependent) and instead go for a component (using a js framework, a web component, or other) and write the component with utility classes.
  - FireInsight 2y ago
    I tried out DaisyUI and I think it had kind of best of both worlds and was pretty ergonomic. IMO the main issues with it were that it's just CSS (not much accessibility etc. thought out for me), but the design isn't that great (in practice writing custom components without DaisyUI could have gotten the same results).
- Shrezzing 2y ago
  Wait, it's not satire?

naiv 2y ago

TailwindUI's 101% bet on React for the templates and catalyst is really sad. I would pay extra for TailwindUi vanilla js components. So it's good to see new component libraries being released supporting vanilla Javascript with Tailwind and gives developers who do not like React a choice.

nicce 2y ago
There are many sites with alpine.js components if that is better.
heartbreak 2y ago
TailwindUI has React, Vue, and a simplified HTML version of their interactive components. See: https://tailwindui.com/components/application-ui/data-display/calendars https://tailwindui.com/components/application-ui/data-displa...
- naiv 2y ago
  I know, like I mentioned not in the templates or catalyst
- BaculumMeumEst 2y ago
  He is saying they don't all have vanilla JS implementations of component functionality.
deleted 2y ago
[deleted]
rjzzleep 2y ago
Check out flowbite https://flowbite.com/docs/getting-started/introduction/ https://flowbite.com/docs/getting-started/introduction/
- naiv 2y ago
  I bought the pro license for Flowbite as well. I like that is has a js library and I think the look and feel works well on admin dashboards, not so much for b2c cases

j45 2y ago

This reminds me of shuffle.dev l, of which I am a customer. Nice work!

015a 2y ago

I'm gonna be rough here. I think calling these things "components" feels wrong. Components are far more elemental than what these are; these are pages, or maybe modules. Nonetheless, some of these "components" are quite bad [1]; it smells like AI was used to generate these? They run the gamut between bad enough that I wouldn't use them, or simple enough [2] that I wouldn't use them, and I'm not seeing a ton occupy the middle. [1] https://easyfrontend.com/component-details/error-404-buttons-left-aligned-image?lang=html&frame=bootstrap&mode=sources&colorScheme=light https://easyfrontend.com/component-details/error-404-buttons... [2] https://easyfrontend.com/component-details/grid-style-number-cards?lang=html&frame=bootstrap&mode=sources&colorScheme=light https://easyfrontend.com/component-details/grid-style-number...

adif_sgaid 2y ago
I totally agree...
FireInsight 2y ago
If you want some "copy-paste tailwind components" you're really best of using shadcn/ui or whatever port exists for your favorite UI libraty. I've been using shadcn-svelte in a recent project and it's the best decisions I made. Having the source code there and modifying it to suit my needs really has helped me learn a lot of good practices.
- mattgreenrocks 2y ago
  shadcn is fantastic. Bit of a learning curve vs component libraries (like Flowbite), but you can just go in and make the changes you need as necessary. It also helps that the New York style is very nice as well.
deleted 2y ago
[deleted]
santush 2y ago
hi, thank you for the comment. We didnot build any components using AI. The link you provided if you choose the language and framework you will see the actual code of the component. There is proper way we follow > design components > make it HTML Tailwind > React Tailwind And all are free to use.

hilti 2y ago

Great idea ... I would love to see a couple things 1) Another section "Dashboard" including components for responsive tables, date pickers, lists, maybe charts 2) A really pure, semantic and therefore light HTML/CSS3 version; no bloated code; I do love the approach of PicoCSS 2

santush 2y ago
We have planned to release dashboard components. In next phase we will release that. Thank you for suggestion.

pquki4 2y ago

This is one of those things that look great in demos but impossible to use for a professional website.

lovegrenoble 2y ago

Maybe someone can tell me what is better to use for a newbie: a framework or library of individual web components, like WebAwesome (former Shoelace), for example: https://shoelace.style https://shoelace.style

SebastianKra 2y ago
Depends on how good the Framework is. Radix-Themes has generalised components that compose well and exposes design tokens that I would consider best-best practices in any app. On the other end of that spectrum is Ant.Design. It feels like a constant fight against the framework, with a scattershot approach of poorly thought out and overly specific components that are hard to configure to your needs.
- lovegrenoble 2y ago
  Thank you, Sir.

sigseg1v 2y ago

The website mentions they have 1400+ customers, yet at the same time it's a beta, and has 1 YouTube video with 8 views posted a year ago. Something just feels a little... off? Their Twitter posts seem to have retweeted a post by "Dorik AI" which is a website which has exactly the same theme and mentions "Dorik AI Website Generator can generate a complete website for you in a matter of seconds". I wonder if this is how these components* were initially built? They seem very mishmash and all over the place. *: I mention "components" because these feel more like auto-generated pages rather than the granular things you'd expect a component to have.

deleted 2y ago

[deleted]

_akhe 2y ago

Why should I not just use the official Tailwind UI? https://tailwindui.com/components https://tailwindui.com/components Are there more components in Easyfrontend? Better ones?

santush 2y ago
EasyFrontend is free
- _akhe 2y ago
  Lol so is Tailwind
  - rijavecb 2y ago
    TailwindCSS is indeed free, but their UI components and themes (TailwindUI) are a paid product. They do offer some components for free though!
    - _akhe 2y ago
      Their UI components are free lol I use Tailwind UI (the React components) all the time in projects, never paid for anything. It's a great place to start for a design system and component library in a new project. After checking again I see you can pay (1-time) to unlock site templates and more components: https://tailwindui.com/templates https://tailwindui.com/templates Does Easyfrontend have site templates? That's what would compare it with Tailwind's paid product, which is a different product.

zipping1549 2y ago

How is it Tailwind component if it's half custom CSS?