5 ms·

HyperUI: Free Open Source Tailwind CSS Components

115 points by DerekBickerton 3y ago

chenxi9649 3y ago
Looks pretty good!Though there seems to be a new tailwind ui libraries that looks good every month. What's the differentiating factor between this and shadcn/nextui/daisyui/tailwindui/flowbite just to list a few on the top of my mind?
- sureglymop 3y ago
  Exactly.. And perhaps the more important question. Will this still be around, supported and maintained in say.. 8 years? What if Tailwind itself fades away?
ilrwbwrkhv 3y ago
After the launch of https://www.radix-ui.com/ https://www.radix-ui.com/ nothing comes close anymore. Maybe https://ui.shadcn.com/docs/ https://ui.shadcn.com/docs/
- coder543 3y ago
  Glancing through the examples, Radix reminds me a lot of MUI. This is not a bad thing, I’m just not sure how “nothing comes close” to Radix. Radix doesn’t seem obviously better? (Maybe it is, I have no experience with it.)
  - mierz00 3y ago
    I’d say the biggest difference with Radix is that it isn’t opinionated on how you style a component. I work in a design agency and I’ve always struggled with component libraries because they weren’t flexible enough. Radix has been a godsend and such a pleasure to use.
- mrd3v0 3y ago
  The live example in the Radix link is exteremly laggy on Firefox for Android but works smoothly on Chrome. Hmph.
- rmuratov 3y ago
  https://daisyui.com/ https://daisyui.com/ looks decent too.
- newusertoday 3y ago
  it doesn't have multiselect neither does shadcn which is based on it. Basic command is buggy, if you delete a character while searching it would stop showing the options. Documentation also assumes that you already know radix and other libraries not as clear as other sites. Yet somehow it has captured the attention of everyone.
  - ilrwbwrkhv 3y ago
    You are right but do you have an alternative which looks as good?
    - ndunas 3y ago
      What about Rewind-UI: https://rewind-ui.dev/ https://rewind-ui.dev/ I am the author of the library and I have really put huge effort on the Combobox component and the documentation. Please take a look if you want and let me know what you think!
- jonwinstanley 3y ago
  Radix, looks great but seems to be JS only. HyperUI is useful for server-side sites too e.g. Rails, Laravel etc
- mstade 3y ago
  Radix has some great ideas that challenge the way components are usually built. I'd love to use it, but am somewhat burned by how Stitches stopped being maintained due to the changes in React 18. Context: https://github.com/stitchesjs/stitches/discussions/1149#discussioncomment-6223090 https://github.com/stitchesjs/stitches/discussions/1149#disc... To be clear, it's not so much that they decided to not spend time, energy and money into maintaining it, but that there's seemingly been very little (if any) interest in letting others maintain it despite several people expressing interest. I'm sure it's scare handing over commit access, but if you're giving it up anyway then why not just do it, see what happens? Instead it's just dead in the water. I'd happily pay license fees to use Radix and/or Stitches, if that guarantees maintenance. Sadly that's not an option it seems.
  - agos 3y ago
    is Radix so tied with Stitches? that would be a bummer. I'd rather not tie myself to (another) CSS-in-js solution, both because RSC are looming and because I don't want to pay a runtime cost to apply CSS classes
    - mstade 3y ago
      It's maintained by the same people, and the problem isn't so much whether there's a hard dependency on Stitches, but the way they've essentiellt swept the rug under the feet from anyone using Stitches leaves a bad taste in my mouth and makes me hesitant to use Radix.
- crummy 3y ago
  Wow, clicking through "Live Examples" made my jaw drop. How do they do that transition?
- danaw 3y ago
  Both of those are coupled to React/JSX unless I'm mistaken. The reason we've chosen DaisyUI (which seems similar to Hyper) is that its framework independent and just uses CSS (no JS) as our team uses Svelte/SvelteKit. In my experience this gives you more flexibility while still giving you a lot of the common UI boilerplate you need to scaffold apps quickly. Being able to use a single component library across UI frameworks is a huge advantage.
  - SebastianKra 3y ago
    If you're implementing a reasonably complex ui, the insane edge-cases that component-libraries must manage cannot be accomplished with CSS alone. Accessibility, Keyboard-Navigation, spec-conformance... The feature summaries from react-aria [1] illustrate this. For example, did you know that it's not trivial to have a button inside an interactive list item, because none of the default html-interactive components can be nested? As another example, DaisyUI recommends relying on the <dialog> element for a simple modal, which, as I recall, has flawed accessibility and excludes 7% of browsers. [1]: https://react-spectrum.adobe.com/react-aria/useGridList.html https://react-spectrum.adobe.com/react-aria/useGridList.html
rzzzt 3y ago
Are there monitors wide enough to contain the occasional CSS class hurricane that I keep seeing when visiting the markup section of a component? pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs
- andrei_says_ 3y ago
  Every time I see tailwindcss I feel relief that I’m not forced to use it. I absolutely love the elegance and power of well structured css code. I get that it works for people forcing their designs through a shredder and don’t want to think about the whole or to name things. I just can’t.
  - mekster 3y ago
    Hate going back and forth HTML and CSS just to give it a different margin that ends up making the CSS hundreds of lines long, making it hard to go through without searching in the editor. And you have no visual understanding in the HTML of what CSS is applied with custom naming convention even with your elegant well structured CSS. Besides, declaring "mx-auto" in CSS makes you type quite a lot more.
    - skydhash 3y ago
      I just edit things in the web inspector and then paste the values in the css file when I’m satisfied.
  - monooso 3y ago
    This is very well-trodden ground at this point, but the reasons people use and like Tailwind have nothing to do with an unwillingness to think or name things. You're welcome to use whatever works for you, but don't assume that anyone who prefers an alternative approach is mentally lazy.
    - agos 3y ago
butz 3y ago
Any decent CSS Components for mobile apps? Preferably something a bit different than material design.
- jarlab 3y ago
  I have heard good things about https://tamagui.dev/ https://tamagui.dev/ . Haven't used it myself though, going to use it in my next project
  - pzo 3y ago
    I have recently was on the journey to learn react-native. And was starting to compare few rn ui kits. I haven't test tamagui so don't know how good it is regarding tech but some small things that turn me off: - the landing page of tamagui is just throwing me off. Too much noise and pollution: too much colorful, too much gradients, colors changes when scrolling, too much animation, not consistent choice of fonts (good mixed with retro style). overall it feels like a big advertising banner screaming for my attention or old web 1.0 websites that abused animations and styles. - they recently released paid one starter kit that I was about to buy. It's good that they provided many screenshots but please (message to anyone making such 'developer elevator pitch'/'test drive experience') provide both: a) some online gallery app / kitchen sink that shows your product b) the same app that I can just install with no fuss on mobile using expo go so that I can see how smooth it behaves on native devices (even better if there is demo app in appstore) This is just maybe my OCD but (again message to some creators reading this and selling some dev tools). We developers even if we like your product still have to onboard other team members or even worse our supervisors who are design leaders. Make my work of 'selling' your product to supervisors smooth. If my eyes hurt even though I'm trying to be still understanding - my design lead supervisor eyes' will bleed and potentially kill any respect when sharing your product demo.
  - uxcolumbo 3y ago
    Homepage has slow scrolling performance in Firefox (desktop) and fans spinning up.
pikdum 3y ago
Nice, I like that there isn't a plugin or anything else needed. Will be useful as a reference when building some components later.
onmyway133 3y ago
What do you think about nextui?

Looks pretty good!Though there seems to be a new tailwind ui libraries that looks good every month. What's the differentiating factor between this and shadcn/nextui/daisyui/tailwindui/flowbite just to list a few on the top of my mind?

sureglymop 3y ago
Exactly.. And perhaps the more important question. Will this still be around, supported and maintained in say.. 8 years? What if Tailwind itself fades away?

ilrwbwrkhv 3y ago

After the launch of https://www.radix-ui.com/ https://www.radix-ui.com/ nothing comes close anymore. Maybe https://ui.shadcn.com/docs/ https://ui.shadcn.com/docs/

coder543 3y ago
Glancing through the examples, Radix reminds me a lot of MUI. This is not a bad thing, I’m just not sure how “nothing comes close” to Radix. Radix doesn’t seem obviously better? (Maybe it is, I have no experience with it.)
- mierz00 3y ago
  I’d say the biggest difference with Radix is that it isn’t opinionated on how you style a component. I work in a design agency and I’ve always struggled with component libraries because they weren’t flexible enough. Radix has been a godsend and such a pleasure to use.
mrd3v0 3y ago
The live example in the Radix link is exteremly laggy on Firefox for Android but works smoothly on Chrome. Hmph.
rmuratov 3y ago
https://daisyui.com/ https://daisyui.com/ looks decent too.
newusertoday 3y ago
it doesn't have multiselect neither does shadcn which is based on it. Basic command is buggy, if you delete a character while searching it would stop showing the options. Documentation also assumes that you already know radix and other libraries not as clear as other sites. Yet somehow it has captured the attention of everyone.
- ilrwbwrkhv 3y ago
  You are right but do you have an alternative which looks as good?
  - ndunas 3y ago
    What about Rewind-UI: https://rewind-ui.dev/ https://rewind-ui.dev/ I am the author of the library and I have really put huge effort on the Combobox component and the documentation. Please take a look if you want and let me know what you think!
jonwinstanley 3y ago
Radix, looks great but seems to be JS only. HyperUI is useful for server-side sites too e.g. Rails, Laravel etc
mstade 3y ago
Radix has some great ideas that challenge the way components are usually built. I'd love to use it, but am somewhat burned by how Stitches stopped being maintained due to the changes in React 18. Context: https://github.com/stitchesjs/stitches/discussions/1149#discussioncomment-6223090 https://github.com/stitchesjs/stitches/discussions/1149#disc... To be clear, it's not so much that they decided to not spend time, energy and money into maintaining it, but that there's seemingly been very little (if any) interest in letting others maintain it despite several people expressing interest. I'm sure it's scare handing over commit access, but if you're giving it up anyway then why not just do it, see what happens? Instead it's just dead in the water. I'd happily pay license fees to use Radix and/or Stitches, if that guarantees maintenance. Sadly that's not an option it seems.
- agos 3y ago
  is Radix so tied with Stitches? that would be a bummer. I'd rather not tie myself to (another) CSS-in-js solution, both because RSC are looming and because I don't want to pay a runtime cost to apply CSS classes
  - mstade 3y ago
    It's maintained by the same people, and the problem isn't so much whether there's a hard dependency on Stitches, but the way they've essentiellt swept the rug under the feet from anyone using Stitches leaves a bad taste in my mouth and makes me hesitant to use Radix.
crummy 3y ago
Wow, clicking through "Live Examples" made my jaw drop. How do they do that transition?
danaw 3y ago
Both of those are coupled to React/JSX unless I'm mistaken. The reason we've chosen DaisyUI (which seems similar to Hyper) is that its framework independent and just uses CSS (no JS) as our team uses Svelte/SvelteKit. In my experience this gives you more flexibility while still giving you a lot of the common UI boilerplate you need to scaffold apps quickly. Being able to use a single component library across UI frameworks is a huge advantage.
- SebastianKra 3y ago
  If you're implementing a reasonably complex ui, the insane edge-cases that component-libraries must manage cannot be accomplished with CSS alone. Accessibility, Keyboard-Navigation, spec-conformance... The feature summaries from react-aria [1] illustrate this. For example, did you know that it's not trivial to have a button inside an interactive list item, because none of the default html-interactive components can be nested? As another example, DaisyUI recommends relying on the <dialog> element for a simple modal, which, as I recall, has flawed accessibility and excludes 7% of browsers. [1]: https://react-spectrum.adobe.com/react-aria/useGridList.html https://react-spectrum.adobe.com/react-aria/useGridList.html

rzzzt 3y ago

Are there monitors wide enough to contain the occasional CSS class hurricane that I keep seeing when visiting the markup section of a component? pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs

andrei_says_ 3y ago
Every time I see tailwindcss I feel relief that I’m not forced to use it. I absolutely love the elegance and power of well structured css code. I get that it works for people forcing their designs through a shredder and don’t want to think about the whole or to name things. I just can’t.
- mekster 3y ago
  Hate going back and forth HTML and CSS just to give it a different margin that ends up making the CSS hundreds of lines long, making it hard to go through without searching in the editor. And you have no visual understanding in the HTML of what CSS is applied with custom naming convention even with your elegant well structured CSS. Besides, declaring "mx-auto" in CSS makes you type quite a lot more.
  - skydhash 3y ago
    I just edit things in the web inspector and then paste the values in the css file when I’m satisfied.
- monooso 3y ago
  This is very well-trodden ground at this point, but the reasons people use and like Tailwind have nothing to do with an unwillingness to think or name things. You're welcome to use whatever works for you, but don't assume that anyone who prefers an alternative approach is mentally lazy.
  - agos 3y ago

butz 3y ago

Any decent CSS Components for mobile apps? Preferably something a bit different than material design.

jarlab 3y ago
I have heard good things about https://tamagui.dev/ https://tamagui.dev/ . Haven't used it myself though, going to use it in my next project
- pzo 3y ago
  I have recently was on the journey to learn react-native. And was starting to compare few rn ui kits. I haven't test tamagui so don't know how good it is regarding tech but some small things that turn me off: - the landing page of tamagui is just throwing me off. Too much noise and pollution: too much colorful, too much gradients, colors changes when scrolling, too much animation, not consistent choice of fonts (good mixed with retro style). overall it feels like a big advertising banner screaming for my attention or old web 1.0 websites that abused animations and styles. - they recently released paid one starter kit that I was about to buy. It's good that they provided many screenshots but please (message to anyone making such 'developer elevator pitch'/'test drive experience') provide both: a) some online gallery app / kitchen sink that shows your product b) the same app that I can just install with no fuss on mobile using expo go so that I can see how smooth it behaves on native devices (even better if there is demo app in appstore) This is just maybe my OCD but (again message to some creators reading this and selling some dev tools). We developers even if we like your product still have to onboard other team members or even worse our supervisors who are design leaders. Make my work of 'selling' your product to supervisors smooth. If my eyes hurt even though I'm trying to be still understanding - my design lead supervisor eyes' will bleed and potentially kill any respect when sharing your product demo.
- uxcolumbo 3y ago
  Homepage has slow scrolling performance in Firefox (desktop) and fans spinning up.

pikdum 3y ago

Nice, I like that there isn't a plugin or anything else needed. Will be useful as a reference when building some components later.

onmyway133 3y ago

What do you think about nextui?