[mmckelvy]

I've been searching for a basic React UI component system for awhile now. There are a lot of systems available, but each one has significant drawbacks to the point I end up just rolling my own.

I think an ideal system would have a core set of "unstyled" components with the necessary functionality baked in. That way the overall aesthetic is up to you, but a lot of the painstaking UI work (e.g. showing, hiding, and highlighting elements in a dropdown menu or making sure a layout element breaks properly on mobile) is already done.

From there you could build UI "kits" that use the core functionality but each have a distinctive look and feel.

[tomelders]

For the past few years, i’ve been building “reusable component libraries” and I can say with confidence that they’re a massive waste of time.

When you get into it, the UI usually the least difficult problem to solve in an app. The real challenge is state management, control flow, and wrangling sode effects.

Alas, people are still wedded to the idea that UI is where all the time is wasted.

The truth is, it’s always been easy to put a button on a screen. But making that button do something? That is a much bigger problem. I’d argue that 99% of the effort of putting a button on a screen goes into implementing whatever that button does. But stakeholders don’t understand that. They think buttons just do the thing they do, so when it takes six weeks to put a button on screen, they naturally assume that a reusable component library that includes a button will somehow shave days and weeks off a project.

Which is why they gravitate towards UI libraries. And then they introduce a new problem that wasn’t there before. They want us to use Material UI, but they want us to make it look different. And they want a bunch of extra UI elements to boot. So not only do we still have all the original problems of creating an app, we’re now on the hook for turning some implementation of Material UI into something that fits with with our architecture, but is also completely different.

So while I hate UI libraries, I recognise that they’re something inflicted on a team. So I’ve started work on a UI library designed specifically to address this problem. It’s a UI library that’s meant to be changed and easily customised by it’s consumers. It’s minimal functionality and minimal styling. I’ll announce it here on HN when I think it’s ready. It may never be ready because not only is it a difficult problem to solve, I’m also very lazy.

But anyway, I say all this because I hear what you’re saying, and I’m working on it.

[VoiceOfWisdom]

FYI, Material UI is working on the issue as well [0].

[0] https://twitter.com/olivtassinari/status/1120818781058686979

[manigandham]

If you have a github repo then please post it. It'll get some attention as this is a much more common sentiment than it seems.

[thex10]

I'd be interested in this.

[slig]

I've been using reactstrap and since it relies on a external bootstrap CSS for styling (i.e, manually included `<link type="text/css" ...`) you have plenty of freedom on how to style it.

[davidbarker]

Reach UI (https://ui.reach.tech), made by Ryan Florence, might be a good start. It has the functionality (and accessibility) for modals, dropdowns, etc., but without heavy styling. I'd been looking for something like it for a long time.

[rymohr]

There’s some work being done around renderless ui components but I’ve yet to see a complete framework.

[TomMarius]

Renderless? What are these good for?

[rymohr]

They're like higher-order components on steroids that handle all the heavy lifting of the logic for the component (including what _should_ be rendered) but leave the actual rendering up to you (DOM structure, style, etc).

Here's a Vue example: https://banshee-ui.github.io/docs/guide/#why-banshee

[hemantv]

You can use ant design without any css and roll up your own styles.