Show HN: Base UI v1.0 Unstyled UI Components from the Creators of Radix and MUI

[colmtuite]

After two years of development (and endless bikeshedding), we’ve finally pushed Base UI v1 out the door.

Base UI is an unstyled UI library for building accessible component libraries and user interfaces with React. 35 accessible, configurable, composable, customizable components with a focus on a11y.

Base UI is already in production at startups like Paper, Zed, and Unsplash, and being trialled by larger companies like GitHub and Vercel. There is a growing community of open-source libs built on top of it, such as Coss UI, Basecn, 9UI, and Pure UI.

Since Base UI doesn’t bundle any styles, it plays nice with Tailwind, CSS Modules, CSS-in-JS, plain CSS, or whatever styling solution you prefer. It also works with JavaScript animation libraries like Motion, or just plain CSS transitions.

The project is backed by MUI (who are profitable and UI-focused), and maintained by a full-time team of 7 engineers, designers, and managers.

https://base-ui.com

[jasonthorsness]

I love unstyled UI components since you get complete visual control but accessibility still works and that's so easy to screw up and not notice it's broken.

I've used Tailwind headless UI (https://headlessui.com/) and it's great, I'll take a look at this one too for future stuff.

[belchiorb]

Great to see this finally become stable. Congrats to the Base UI team!

[scoot]

Spotted this yesterday on X and already upgraded to v1 from beta.6 without issue (admittedly I'm only using a subset of the components, so YMMV).

Congrats to the team!

[colmtuite]

Thanks! Glad you're liking it

[MortyDev]

I've been watching this project for months; now that it's been released, I'm thrilled to incorporate it into my projects.

[troupo]

Someone should study why all UI/design system creators hate text fields so much.

"Unstyled UI" styles text inputs to be invisible on the page

[scoot]

FWIW, I tried the Input example from the docs in StackBlitz and removed the default styling, and it renders just fine...

[troupo]

If you remove styling, then if course it will render just fine. It will probably fall back to the default browser styling.

[scoot]

The point is that it works out of the box (i.e. with no additional styling). It isn't invisible.

And yes, obviously with default browser styling – what else would it use in the absence of any default styling or the example css?

I don't understand your argument.

[troupo]

> The point is that it works out of the box (i.e. with no additional styling)

Then you wouldn't have to remove default styling for it to "work out of the box".

> I don't understand your argument.

The default styling that you have to remove for the input to stop being invisible is just yet another example in a long, long, long line of CSS design systems that absolutely hate text input and their users: https://base-ui.com/react/components/input

Barely visible thin light gray lines where the input is supposed to be are endemic. The example in Field is even more egregious: https://base-ui.com/react/components/field

[scoot]

> Then you wouldn't have to remove default styling for it to "work out of the box"

I didn't. I removed the CSS styling provided in the example to test that it works perfectly without it.

As OP said in his post description "Base UI doesn’t bundle any styles"

> Barely visible thin light gray lines where the input is supposed to be are endemic

That's a very different complaint, and if as you say "endemic", contradicts your original one that in general they don't render at all.

I imagine that the CSS in the examples are intentionally lightweight exactly because they're unstyled components. It isn't a design system, so is being as unopinionated as possible while demonstrating how to style them.

I don't use the "T" word lightly, but it really does look like you're intentionally being one. (That or poorly informed – you chose which side of Hanlon's razor you sit.)

[myjumpingsocks]

this is great news, i'm so excited to try it. have only heard good things