HyperUI: Free Open Source Tailwind CSS Components | Hacker News Reader

HyperUI: Free Open Source Tailwind CSS Components

hyperui.dev

115 pointsDerekBickerton34 comments

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

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.)

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.

The live example in the Radix link is exteremly laggy on Firefox for Android but works smoothly on Chrome. Hmph.

https://daisyui.com/ looks decent too.

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.

You are right but do you have an alternative which looks as good?

What about Rewind-UI: 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!

Radix, looks great but seems to be JS only.

HyperUI is useful for server-side sites too e.g. Rails, Laravel etc

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#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.

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

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.

Wow, clicking through "Live Examples" made my jaw drop. How do they do that transition?

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.

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

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

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.

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.

I just edit things in the web inspector and then paste the values in the css file when I’m satisfied.

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.

not having to name things is one of the main selling points for Tailwind, and frequently repeated in discussions about Tailwind

I agree that dev-shaming is a reality of our industry that must be abandoned. Use Tailwind if it works for your use case. That said, I am amazed at the sheer industrial levels of effort that devs go through in order not to learn and use CSS. It's a pretty nifty solution to the problem of programming layout and interfaces.

I spent over 20 years writing CSS, trying countless naming conventions and organisational techniques in an attempt to keep everything clear and maintainable.

I don't miss it, but to each their own.

CSS can be complicated because the problem it solves is complicated, not because it is a bad solution. Using a more constrained CSS is completely valid if it works for your project.

tailwind css is "write-only" css. Quick to develop and throw away. Good for contract coders to write, prototype and delivery quickly while maliciously chortling at the poor sucker who has to maintain what you delivered.

That’s always brought up by people who didn’t even try it out for real.

CSS never really fulfilled its promises about being well-maintained - tailwind on the other hand for components is quite good.

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?

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?

Nice, I like that there isn't a plugin or anything else needed.

Will be useful as a reference when building some components later.

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

I have heard good things about https://tamagui.dev/ . Haven't used it myself though, going to use it in my next project

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.

Homepage has slow scrolling performance in Firefox (desktop) and fans spinning up.

What do you think about nextui?

Reply on news.ycombinator.com