Free Open Source Tailwind CSS Components(hyperui.dev)
hyperui.dev
Free Open Source Tailwind CSS Components
https://www.hyperui.dev/
76 comments
From what I gather from the docs is that tailwind and atomic css is designed for you to colocate the styling in the html so you can avoid having to create a CSS version of a component along with an HTML version of a component.
For example, in CSS you could create a class for a card called “.card”, but this by itself does not create a card component as you may need card-title within it and card-wrapper on the outside, and various other styles that may seem like they are reusable subcomponents but are not. And it’s a misnomer because it may require a more complicated HTML structure and you cannot just create a div and apply a class “card” and get back the component.
Instead in a real app your component has an HTML structure, a css structure, and the reusable package you put it in may be the react component, and not style called “card” that you can use.
Tailwind advocates for making your components reusable on this framework level (whether vue or react), rather than at the CSS level. Because even if your make your CSS reusable you still have to recreate the HTML structure. And if you put your HTML in a reusable component and also have a set of reusable styles then you have a Card component concept and a Card style concept that becomes redundant.
To address your specific problem, if your code is unreadable due to inline tailwind styles then it’s a sign you should be breaking the HTML into reusable sub components instead.
For example, in CSS you could create a class for a card called “.card”, but this by itself does not create a card component as you may need card-title within it and card-wrapper on the outside, and various other styles that may seem like they are reusable subcomponents but are not. And it’s a misnomer because it may require a more complicated HTML structure and you cannot just create a div and apply a class “card” and get back the component.
Instead in a real app your component has an HTML structure, a css structure, and the reusable package you put it in may be the react component, and not style called “card” that you can use.
Tailwind advocates for making your components reusable on this framework level (whether vue or react), rather than at the CSS level. Because even if your make your CSS reusable you still have to recreate the HTML structure. And if you put your HTML in a reusable component and also have a set of reusable styles then you have a Card component concept and a Card style concept that becomes redundant.
To address your specific problem, if your code is unreadable due to inline tailwind styles then it’s a sign you should be breaking the HTML into reusable sub components instead.
But it's still unreadable, whatever someone's definition may be.
I have my Tailwind css in a global.css file. That's my solution for making it readable.
I have my Tailwind css in a global.css file. That's my solution for making it readable.
I've been using twin.macro on a side-project of mine, and have really enjoyed it: https://github.com/ben-rogerson/twin.macro
I especially like how easy it is to fall back onto ordinary Styled Components if I'm trying to implement things more specific than what tailwind can handle.
Here's a sample of what I've implemented with twin.macro: https://grueplan.com
I especially like how easy it is to fall back onto ordinary Styled Components if I'm trying to implement things more specific than what tailwind can handle.
Here's a sample of what I've implemented with twin.macro: https://grueplan.com
hmm, maybe HN related problems? Application error: a client-side exception has occurred (see the browser console for more information), some nextJS issue, so maybe server side?
Curious what counts as unmaintainable for you. The HTML is certainly uglier, but cost-of-copy-paste is very low compared to cost of maintaining abstractions. That for me is the primary value add for Tailwind.
With styled components my react might look like this:
``` <Question> {...} <Footer> < button> { ... } </button> <QuestionBadge> </QuestionBadge> </Footer> </Question> ```
That's easier than
``` <div className = " ... "> { ...} <div> <div> </div> ```
``` <Question> {...} <Footer> < button> { ... } </button> <QuestionBadge> </QuestionBadge> </Footer> </Question> ```
That's easier than
``` <div className = " ... "> { ...} <div> <div> </div> ```
Tailwind specifically recommends creating components with a JS framework that look like the former.
Adding on: I'm still trying to grasp Tailwind myself, and I've found this video by one of Tailwind's creators to be quite useful in explaining the above comment.
https://www.youtube.com/watch?v=ab8RePo5ZYU
https://www.youtube.com/watch?v=ab8RePo5ZYU
Can you point the right direction? Because I didn't read this from me the documents. Maybe it's in the beta docs?
Here's in v3, but it was added in the v1 docs: https://tailwindcss.com/docs/reusing-styles#extracting-compo...
You can always create static components that render a bunch of divs - for a badge, or a footer, as shown in your example.
A side project I've been trying to find time to work on - a Tailwind/Styled components fusion. So imagine just being able to do this:
<Question
mt0
textCenter
p8={extraPadding}
p2={!extraPadding}
/>
<Question
mt={0}
text="center"
p={extraPadding ? 8 : 2}
/>So https://windicss.org/posts/attributify.html ?
<button
bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
text="sm white"
font="mono light"
p="y-2 x-4"
border="2 rounded blue-200"
>I made my own library to handle Tailwind, and it works pretty well with React: https://github.com/mcntsh/use-utility-classes
I find attributify mode helps a lot with readability:
https://windicss.org/posts/attributify.html
https://windicss.org/posts/attributify.html
I was trying to not add much Tailwind css classes for my Navigation bar and keep the semantics, but its kinda difficult for a beginner like me.
Nice collection. The site is annoying to navigate with the back button on mobile, I have to hit back multiple times to get to the component categories page. I guess it's using pushState so you can easily link directly to a particular component by copying the URL, which is a neat feature, but I think it should use replaceState instead to not mess with the back button.
Yeah, the back button is broken on desktop as well.
You would think web developers writing a CSS library would know how much web devs hate things like this.
It's not just web developers. The back button is the single, most-used, UI element in the browser.
Maybe it's a bad idea, but I wonder if tightening up the API would be a good idea.
Something like a throttle or disabling js redirects if it's breaking the history buttons.
Something like a throttle or disabling js redirects if it's breaking the history buttons.
I'm thinking about Google SEO, if you can't go back, it doesn't tell SEO if the informattion you are looking for is "bad".
I just read this somewhere else (probably on HN) take my comment with salt, sinnce I have no clue of this is real or not.
I just read this somewhere else (probably on HN) take my comment with salt, sinnce I have no clue of this is real or not.
Hello, creator of HyperUI here. Thanks for your feedback, however this is not something I have added or can replicate. Could it be an extension you're using that's causing it?
Looks great! Another Tailwind based component library I love is DaisyUI: https://daisyui.com/
They've gone full circle: this is bootstrap implemented in tailwind. How funny.
EDIT: It is funny because I've been looking for something opinionated like Bootstrap, but that can be tree-shaken to a smaller package, like Tailwind, but I don't want have to redesign every dang component.
EDIT: It is funny because I've been looking for something opinionated like Bootstrap, but that can be tree-shaken to a smaller package, like Tailwind, but I don't want have to redesign every dang component.
Agreed. Still a big fan of Bootstrap, but take a look at DaisyUI, it's built on Tailwind.
Shuffle.dev is a collection of premium UI based on many UI framework too.
Thanks! I went to shuffle.dev and saw "Start a new project with one million layouts!" That's a big number, but hoo boy, I gotta search through all these? Well, I've got a project for lunch it seems!
Daisy/Tailwind + Vue3 is my favorite front end toolset to date.
Similar for me, Next.js / Daisy + Tailwind / Firebase means I can whip out a MVP or prototype in weeks instead of months. Love the increase in productivity first tooling in web development ecosystem.
interesting...in what ways do each of those boost your productivity? And what is the amount of effort to take that MVP to a production state?
I guess the only missing piece there is a backend API.
I bought Chakra and now kind of regretting, seeing all the free stuff, Daisy for instance is something that I never heard of until I saw the comments here.
I guess the only missing piece there is a backend API.
I bought Chakra and now kind of regretting, seeing all the free stuff, Daisy for instance is something that I never heard of until I saw the comments here.
Next.js creates a good setup to create a React frontend application with server side rendering support out of the box. Pair that with Vercel and you get an amazing deployment environment with CDN, cloud functions, edge functions (middleware) server side rendering and more without much hassle.
Tailwind let me quickly create any UI I want, and Daisy helps me reduce the amount of time needed to style basic elements like inputs and all.
Firebase lets me get a low latency real time data source for my application, that can scale infinitely. It also handles some other parts of building an application that normally take a lot of time: authentication, storage management etc. And the pricing is really really cheap once you consider how much it costs to create an infrastructure that scales as well as firebase does, unless you model your data wrong and end up using a lot of db read/write cycles unnecessarily.
The backend API piece is not missing, you can use either Next.js API or firebase functions for backend piece, I use those for things like stripe billing backend etc.
This stack is enough for most projects out there, and when its not enough its flexible enough that you can integrate it with other things. And that timeline I mentioned was for a production ready MVP.
Tailwind let me quickly create any UI I want, and Daisy helps me reduce the amount of time needed to style basic elements like inputs and all.
Firebase lets me get a low latency real time data source for my application, that can scale infinitely. It also handles some other parts of building an application that normally take a lot of time: authentication, storage management etc. And the pricing is really really cheap once you consider how much it costs to create an infrastructure that scales as well as firebase does, unless you model your data wrong and end up using a lot of db read/write cycles unnecessarily.
The backend API piece is not missing, you can use either Next.js API or firebase functions for backend piece, I use those for things like stripe billing backend etc.
This stack is enough for most projects out there, and when its not enough its flexible enough that you can integrate it with other things. And that timeline I mentioned was for a production ready MVP.
Where is Vercel's cloud functions running? How do they compare to AWS Lambda/Edge?
The documentation on https://nextjs.org/learn/basics/api-routes/api-routes-detail... seems quite sparse. I see basic routing and middleware but seems nowhere near as many features as other frameworks.
I see it's great for building an MVP but may not be a good fit outside of startups. Nevertheless, its the front-end and server side rendering is quite interesting to me.
What are some problems with this setup? Might have a go just for the frontend portion but seems to good to be true in some aspects.
The documentation on https://nextjs.org/learn/basics/api-routes/api-routes-detail... seems quite sparse. I see basic routing and middleware but seems nowhere near as many features as other frameworks.
I see it's great for building an MVP but may not be a good fit outside of startups. Nevertheless, its the front-end and server side rendering is quite interesting to me.
What are some problems with this setup? Might have a go just for the frontend portion but seems to good to be true in some aspects.
That could be true for me too, do you ever concern yourself about convincing recruiters/employers of your skillset though?
Of the SPAs, companies want React and people to “hit the ground running”
They dont recognize Vue as that
Of the SPAs, companies want React and people to “hit the ground running”
They dont recognize Vue as that
Hah, I'm a bad person to ask because I'm managing now. I've used much more React professionally, but I still find myself much more productive in the Vue ecosystem.
I don't often collide with company cultures that require specific language/tool experience in my network these days, though I realize they exist out there. I haven't ever hit an issue launching into a job in unfamiliar languages, and I've made that leap with all of Ruby/Java/Golang/PHP/Python – minimal pre-exposure in every case (school was C++).
I don't often collide with company cultures that require specific language/tool experience in my network these days, though I realize they exist out there. I haven't ever hit an issue launching into a job in unfamiliar languages, and I've made that leap with all of Ruby/Java/Golang/PHP/Python – minimal pre-exposure in every case (school was C++).
Right, yeah a new programming language is like driving a new car, you check for how it does all the primary concepts and learn about the one or two new concepts
Lots of recruiters and hiring managers dont see it that way
Lots of recruiters and hiring managers dont see it that way
Wow! I don’t know how I missed this (not a front end dev).
Excited to see more re-usable components based on tailwind, but have also really come to appreciate the tailwind ui model for helping support open source. The core of tailwind is still there and free to use, but tailwind ui gives a premium option for a lot of off the shelf components that I have issue at all paying for.
I know some have pointed out in other threads they wish tailwind ui components were more of a complete working example with Alpine examples included, it's a fair complaint and area of improvement. But overall I don't have any issue with the model for tailwind ui.
I know some have pointed out in other threads they wish tailwind ui components were more of a complete working example with Alpine examples included, it's a fair complaint and area of improvement. But overall I don't have any issue with the model for tailwind ui.
[deleted]
this is pretty comprehensive and i like the responsive displays. upvoted!!
i keep a list of these libraries here https://github.com/sw-yx/spark-joy/blob/master/README.md#tai... and just gave it a little star to demonstrate quality
i keep a list of these libraries here https://github.com/sw-yx/spark-joy/blob/master/README.md#tai... and just gave it a little star to demonstrate quality
Informal poll: is bootstrap over?
Nope. Some people don't want fuss over UI to the extent that tailwind forces you. Some of us want an opinionated Sass-based framework out of the box. The only advantage I've found using Tailwind is anal-level control over details when bootstrap already has a uniform ecosystem with far, far fewer classes. The former requires way more upfront cost to get running, where the latter is done at day one. Only downside is the tree-shaking in bootstrap, it would be nice if it could be made smaller during a Next/Nuxt/webpack build.
These tailwind component libraries make little sense if you compare them directly to bootstrap without wanting to work with tailwind.
Tailwind is in every way superior when you are implementing a bespoke design, you develop faster, your CSS is small and less complex, the output is performant, you have a uniform mini-language, if you apply some up front analysis of a design/-system you can generate 90% of your CSS from a normalized configuration.
Now compare that to fighting default styles and complected component styles, applying overrides, extending via SCSS variables and generating your own CSS utilities with SCSS. It's pretty night and day for this use-case.
Component libs for tailwind that compress the classes are a bit funny and IMO you don't get much benefit from them other than playing nice with tailwind. You might have a reason to use tailwind but want predefined component classes? But then you get the same disadvantage that component based libraries like bootstrap have, so the choice is arbitrary here.
What makes _much_ more sense is what tailwindui does, they give you the raw source, so you get to write out of the box components quickly but can pull them apart without friction.
Tailwind is in every way superior when you are implementing a bespoke design, you develop faster, your CSS is small and less complex, the output is performant, you have a uniform mini-language, if you apply some up front analysis of a design/-system you can generate 90% of your CSS from a normalized configuration.
Now compare that to fighting default styles and complected component styles, applying overrides, extending via SCSS variables and generating your own CSS utilities with SCSS. It's pretty night and day for this use-case.
Component libs for tailwind that compress the classes are a bit funny and IMO you don't get much benefit from them other than playing nice with tailwind. You might have a reason to use tailwind but want predefined component classes? But then you get the same disadvantage that component based libraries like bootstrap have, so the choice is arbitrary here.
What makes _much_ more sense is what tailwindui does, they give you the raw source, so you get to write out of the box components quickly but can pull them apart without friction.
I don't think you listened to me, because you said this:
> Now compare that to fighting default styles and complected component styles
As I said, I am NOT fighting default styles. I want them.
I don't WANT to write my own components, just change colors with Sass (and maybe some affordances).
I'm an engineer, not a UX designer, and I don't have budget to hire a UX designer (nor do I pretend to be good at UX like most programmers). Bootstrap is ideal for my situation, and many others in my position.
Also, what are you talking about? Tailwind absolutely does NOT give you out of the box components. Only third-parties, like DaisyUI and OP's link are fully formed components (or the links off of the tailwind page), which are at best like bootstrap and at worse an inconsistent mess.
> Now compare that to fighting default styles and complected component styles
As I said, I am NOT fighting default styles. I want them.
I don't WANT to write my own components, just change colors with Sass (and maybe some affordances).
I'm an engineer, not a UX designer, and I don't have budget to hire a UX designer (nor do I pretend to be good at UX like most programmers). Bootstrap is ideal for my situation, and many others in my position.
Also, what are you talking about? Tailwind absolutely does NOT give you out of the box components. Only third-parties, like DaisyUI and OP's link are fully formed components (or the links off of the tailwind page), which are at best like bootstrap and at worse an inconsistent mess.
> Also, what are you talking about? Tailwind absolutely does NOT give you out of the box components.
Well, no. And that's by design. Should you want components, there's an official Tailwind UI[0] that the dgb23 also mentioned. Not to mention the uncountable amount of open-source component libraries.
[0]: https://tailwindui.com/
Well, no. And that's by design. Should you want components, there's an official Tailwind UI[0] that the dgb23 also mentioned. Not to mention the uncountable amount of open-source component libraries.
[0]: https://tailwindui.com/
Yes I get that, I wanted to illustrate the use case for tailwind (bespoke design) and why it makes sense there and how component libs can still be useful if delivered in raw form. I didn’t want to imply that your use case isn’t valid.
I expect Bootstrap will live on for a long time, but the era of it being either the trendy or obvious choice is over.
When Bootstrap debuted, its big strength was that it gave you a decent UI for little effort, at a time when the popular alternative was `vim styles.css`.
Needs and tools have shifted. Fewer projects get their UI from a programmer with no design sense. More projects need more widgets that aren't available off-the-shelf. Component-based web frameworks make it easier to build reusable widgets in-house.
(I think in didn't help that it took Bootstrap forever to stop depending on jQuery, and SPAs got popular and didn't need jQuery but did need to reduce page weight)
When Bootstrap debuted, its big strength was that it gave you a decent UI for little effort, at a time when the popular alternative was `vim styles.css`.
Needs and tools have shifted. Fewer projects get their UI from a programmer with no design sense. More projects need more widgets that aren't available off-the-shelf. Component-based web frameworks make it easier to build reusable widgets in-house.
(I think in didn't help that it took Bootstrap forever to stop depending on jQuery, and SPAs got popular and didn't need jQuery but did need to reduce page weight)
Not for me. Bootstrap is very mature, has sane UX, is adaptable, has a good balance between general styles and utility classes. I find that Tailwind clutters your HTML and I fail to see the benefit over writing pure CSS in isolated components in a framework like e.g. Svelte. The reason I would use a CSS framework in the first place is to avoid having to write everything from scratch myself. All (the free parts of) Tailwind affords is an indirect way of writing styles using classes. In that case you might as well bite the bullet and learn CSS properly.
Think about it this way, most developers should have been familiar with CSS, utility classes is a shorthand that make its easy to remember and find user defined class if you have tried Tailwind 3, I found it solve all of my checklists.
Like Bootstrap way, you can still define that with Tailwind classes either in input.css with @apply directive (abstract out utility classes from HTML) or Tailwind configuration. It’s a way to speed up our development.
Like Bootstrap way, you can still define that with Tailwind classes either in input.css with @apply directive (abstract out utility classes from HTML) or Tailwind configuration. It’s a way to speed up our development.
I use it and still like it...
Except 5.1 that broke my homemade dark theme implementation with their use of css variables ;)
Except 5.1 that broke my homemade dark theme implementation with their use of css variables ;)
[deleted]
Looks great, thanks for sharing this for free!
Quick feedback on the website: The left side of the components preview pages falls off the left side of my screen (Chrome, 13'' Mac).
Quick feedback on the website: The left side of the components preview pages falls off the left side of my screen (Chrome, 13'' Mac).
Hey, creator of HyperUI here! Thanks for your feedback, this should be addressed in the latest update.
There's also this: https://tailblocks.cc
[deleted]
Pretty cool!
How does it compare to TailwindUI?
How does it compare to TailwindUI?
For me, more important than it being free of cost, is that it is Free and Open Source. I want to support the Tailwind Devs and Tailwind UI is nice and a fair price and all, but I don't want the headache of dealing with licensing. I don't want to have to think about if my license covers a particular new project or use case. I don't want to worry if I open source my project having closed source CSS in it and having to take it out. I don't want to worry about investing time learning Tailwind UI to have them make major licensing changes down the road or get bought out and abandoning it or whatever.
So I can't use Tailwind UI, I can use this.
(If one of my Tailwind-using side projects gets popular enough and starts making me money, I will probably buy a Tailwind UI license just to support Tailwind, though! Even though I won't use it. Or maybe I'll find another way to support them.)
So I can't use Tailwind UI, I can use this.
(If one of my Tailwind-using side projects gets popular enough and starts making me money, I will probably buy a Tailwind UI license just to support Tailwind, though! Even though I won't use it. Or maybe I'll find another way to support them.)
I don’t think the licensing is very complicated, myself.
https://tailwindui.com/license
https://tailwindui.com/license
More complicated than what I want to deal with, and more restrictive than I want to invest the time into.
[deleted]
I'm a paying customer of TailwindUI. TailwindUI is more advanced in my opinion:
- There are more components.
- One thing I love are the fully styled landing pages. They are made up of components as well, but I like seeing them put together in a coherent fashion.
- You get not only pure HTML code, but also Vue and React code to copy/paste.
- IMHO it's nicer looking and feels more polished.
However, all of this comes at a price, I think I paid $250 for it. I also find the designs to be nicer, but sometimes they are a pain to change because somewhere in the nested `div`'s there's some magic happening that I'm not dealing with properly.
I do think there is a place for such free, simpler and clean component libraries and I appreciate their creator for making it available.
- There are more components.
- One thing I love are the fully styled landing pages. They are made up of components as well, but I like seeing them put together in a coherent fashion.
- You get not only pure HTML code, but also Vue and React code to copy/paste.
- IMHO it's nicer looking and feels more polished.
However, all of this comes at a price, I think I paid $250 for it. I also find the designs to be nicer, but sometimes they are a pain to change because somewhere in the nested `div`'s there's some magic happening that I'm not dealing with properly.
I do think there is a place for such free, simpler and clean component libraries and I appreciate their creator for making it available.
I have a TailwindUI license but there's no vanilla javascript or alpine support. So the open source options are better on a couple levels!
[deleted]
It is free
Forgive me if this is a dumb question: why would I use Tailwind over say ant design when the latter is free and has hundreds of components?
Not a dumb question!
They cover different needs - Tailwind is a low-level CSS library that provides a different (and some claim better) way of styling HTML. It doesn't provide markup, interactivity, etc.
AntD is a high-level component library that provides components with pre-built markup, JS interactivity, accessibility, etc. Any of the component libraries in this thread are a good point of comparison.
You might use Tailwind if you're building out your own components, or styling a page that doesn't need much interactivity. It is fast, lightweight, and easy to integrate. You can compare it to any CSS-in-JS tool, SASS, and other styling solutions.
You'd typically turn towards a component library (like MaterialUI, Ant Design, or Tailwind UI) if you're looking to quickly build a webapp that needs a lot of interactivity out of the gate. These solutions are larger and heavier, but provide a lot more functionality (interactivity, accessibility).
They cover different needs - Tailwind is a low-level CSS library that provides a different (and some claim better) way of styling HTML. It doesn't provide markup, interactivity, etc.
AntD is a high-level component library that provides components with pre-built markup, JS interactivity, accessibility, etc. Any of the component libraries in this thread are a good point of comparison.
You might use Tailwind if you're building out your own components, or styling a page that doesn't need much interactivity. It is fast, lightweight, and easy to integrate. You can compare it to any CSS-in-JS tool, SASS, and other styling solutions.
You'd typically turn towards a component library (like MaterialUI, Ant Design, or Tailwind UI) if you're looking to quickly build a webapp that needs a lot of interactivity out of the gate. These solutions are larger and heavier, but provide a lot more functionality (interactivity, accessibility).
Thank you, this is really helpful.
If you want to change the style of antd it becomes real mess unless you are already familiar with "less". I found it very hard to change styles of antd(it is my own shortcoming) but despite knowing what to do in css and framework getting in your way to do it is really frustrating.
Didn't get to that point yet, so far their styling is fine for my needs. I have some experience with less but it's been a while.
If you can spare the $200 or something and you need a solid base to work from, Tailwind UI is the best money can buy.
[deleted]
Alpine support! Woohoo!!!
Love this so much - good job
Love this so much - good job
Great work.
Has anyone used something like Tailwind-Styled-Component [1] and found it worthwhile?
https://www.npmjs.com/package/tailwind-styled-components