3 ms·

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

16 points by colmtuite 10mo ago

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 https://base-ui.com

troupo 10mo ago
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 10mo ago
  FWIW, I tried the Input example from the docs in StackBlitz and removed the default styling, and it renders just fine...
  - troupo 10mo ago
    If you remove styling, then if course it will render just fine. It will probably fall back to the default browser styling.
    - scoot 10mo ago
      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 10mo ago
        > 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 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 https://base-ui.com/react/components/field
        scoot 10mo ago
        > 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.)
        troupo 10mo ago
        > 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.
myjumpingsocks 10mo ago
this is great news, i'm so excited to try it. have only heard good things
scoot 10mo ago
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 10mo ago
  Thanks! Glad you're liking it
belchiorb 10mo ago
Great to see this finally become stable. Congrats to the Base UI team!
jasonthorsness 10mo ago
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/ https://headlessui.com/) and it's great, I'll take a look at this one too for future stuff.
MortyDev 10mo ago
I've been watching this project for months; now that it's been released, I'm thrilled to incorporate it into my projects.

16 points by colmtuite 10mo ago

troupo 10mo ago

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 10mo ago
FWIW, I tried the Input example from the docs in StackBlitz and removed the default styling, and it renders just fine...
- troupo 10mo ago
  If you remove styling, then if course it will render just fine. It will probably fall back to the default browser styling.
  - scoot 10mo ago
    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 10mo ago
      > 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 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 https://base-ui.com/react/components/field
      - scoot 10mo ago
        > 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.)
        troupo 10mo ago
        > 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.

myjumpingsocks 10mo ago

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

scoot 10mo ago

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 10mo ago
Thanks! Glad you're liking it

belchiorb 10mo ago

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

jasonthorsness 10mo ago

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/ https://headlessui.com/) and it's great, I'll take a look at this one too for future stuff.

MortyDev 10mo ago

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