Show HN: Base UI v1.0 Unstyled UI Components from the Creators of Radix and MUI(github.com)
github.com
Show HN: Base UI v1.0 Unstyled UI Components from the Creators of Radix and MUI
https://github.com/mui/base-ui
14 comments
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.
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.
Great to see this finally become stable. Congrats to the Base UI team!
I've been watching this project for months; now that it's been released, I'm thrilled to incorporate it into my projects.
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
"Unstyled UI" styles text inputs to be invisible on the page
FWIW, I tried the Input example from the docs in StackBlitz and removed the default styling, and it renders just fine...
If you remove styling, then if course it will render just fine. It will probably fall back to the default browser styling.
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.
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.
> 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
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
> 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.)
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.)
> I imagine that the CSS in the examples are intentionally lightweight exactly because they're unstyled components.
An unstyled text input doesn't look like a nearly invisible thin light gray rectangle.
> It isn't a design system, so is being as unopinionated as possible
Then their examples are opinionated with the same hate towards text inputs as every other "accessible unopinionated CSS"
> 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.)
Vague ad hominem attacks. See, I don't use the "V", "H" and two "A" words lightly either.
An unstyled text input doesn't look like a nearly invisible thin light gray rectangle.
> It isn't a design system, so is being as unopinionated as possible
Then their examples are opinionated with the same hate towards text inputs as every other "accessible unopinionated CSS"
> 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.)
Vague ad hominem attacks. See, I don't use the "V", "H" and two "A" words lightly either.
> An unstyled text input doesn't look like a nearly invisible thin light gray rectangle.
Correct – it doesn't. It would bode you well to actually try the thing you're commenting on.
> Vague ad hominem attacks
Then let me be explicit – it's pretty clear that you only came here to troll, because nothing you've said has any basis in fact. Please don't do that here.
Correct – it doesn't. It would bode you well to actually try the thing you're commenting on.
> Vague ad hominem attacks
Then let me be explicit – it's pretty clear that you only came here to troll, because nothing you've said has any basis in fact. Please don't do that here.
this is great news, i'm so excited to try it. have only heard good things
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