[DO NOT MERGE] Add Base UI marketing page

[siriwatknp]

Design: Figma Preview: https://deploy-preview-36622--material-ui.netlify.app/base-ui/

What's left

• [ ] Fix the Select (hero section) initial mount to always appear? (is it possible cc @michaldudak).
• [ ] Refine the gradient to match design
• [ ] Check all the links
• [ ] Revise the copywriting to match the design

---

• [ ] I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-36622--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad) No bundle size changes

Generated by :no_entry_sign: dangerJS against 9950524f7ed1eb53b3f0518e1aacada051f97986

[oliviertassinari]

Great to have this page making progress.

A quick review, not sure if it's relevant at this point:

1. The gradient feels noticeably too light

2. The transition on the border is off. When we switch tab, we both get a layout shift and no animation on the border.

https://github.com/mui/material-ui/assets/3165635/8842e36b-17ef-4a27-b2bc-46d5636e0cc7

3. Double scrollbar

4. We miss the image dimension (width & height attributes)

But also something is off with the dimension of the image. I think that the issue is that we render with width of 510px but the image is 1140px wide: 1140/510 = 2.23529411765, Chrome needs to do a tricky resize, which makes the text looks blurry.

We also miss the alt="" attribute on this image as it's a decorative image.

5. The reference is a bit confusing. We say "Nhost's new dashboard, powered by Base UI" but what we link says "We chose Material UI, which may seem surprising at first glance, considering that many fancy UI libraries have been released in recent years. Instead of always being on the top of the hype train, we use battle-tested solutions. Using MUI’s unstyled components and low-level hooks let us bypass the outdated Material Design." Maybe we could ask them to make a small edit.

6. "View the blog post" Maybe it should be a target="_blank"

7. The text field demos feels broken (label color too light, input text not balanced):

I mean, https://mui.com/material-ui/react-text-field/#using-the-styled-api looks more coherent:

8. The menu opens above but we almost always display it below in a real application. How about we reverse it?

9. The select doesn't close once an option is selected, I would have loved to see a smooth close animation & experience the whole UX.

10. "Nhost's dashboard" is a <h4> this doesn't make a lot of sense in the heading hierarchy of the page, it skips h3. Maybe a h2 instead?

[danilo-leal]

Ah, cool! Appreciate the review ⎯ lots of details you pointed out! We'll tackle them all before release. The only that I have some consideration about are:

(5) I have a thread opened with the post's author ⎯ I'll reach out and ask him to change to "Base UI" instead! (9) That select isn't really supposed to close, otherwise, the hero section would be empty! I see where you're coming from but that's there mostly for illustration purposes.

[mnajdova]

The updates look great! 🤩 The only thing I could notice not mention is the usage of docs related variables, for e.g.

I noticed it on the "Endless possibilities with a lightweight API" section

[siriwatknp]

@danilo-leal these are the latest fixes

• missing company logos on the homepage
• fix X data grid demo (the toolbar height was cut)
• Base UI component demos are ready.

[danilo-leal]

@siriwatknp Sweet! I'm trying to keep an updated list of to-dos on the PR's description ⎯ I think all of them are there! The company logos thing seems to be a bug (also happening with other sections on the home page)?!

[siriwatknp]

@siriwatknp Sweet! I'm trying to keep an updated list of to-dos on the PR's description ⎯ I think all of them are there! The company logos thing seems to be a bug (also happening with other sections on the home page)?!

Can you try the deploy preview again? I think the one that you saw was not updated.

[mbrookes]

What's the intention behind the border (keyboard focus ring) when you click on a tab?

[mbrookes]

Apologies, but I don't understand the intention with the first demo:

I tried to click on the select, but nothing happened. I click on one of the listed components/utilities, and it updated the select with the component name, but the select doesn't do anything...

[zanivan]

Apologies, but I don't understand the intention with the first demo:

I tried to click on the select, but nothing happened. I click on one of the listed components/utilities, and it updated the select with the component name, but the select doesn't do anything...

I believe the idea is to illustrate a custom component, and allow users to toggle the styles from styled and no CSS whatsoever.

However, I must admit that I also got a bit confused at the first time that I was navigating through it, expecting something else to happen when choosing an option on the select. Should we put more emphasis on the changing styles there?

[mbrookes]

expecting something else to happen when choosing an option on the select. Should we put more emphasis on the changing styles there?

For me there were no options when clicking on the select, so it seemed broken; and I wasn't sure what it's relation was to the list below.

Yes, I think if turning on and off the styles is the purpose of the demo emphasising that would be a good idea.

[mbrookes]

Nitpick: should there be some space between adjacent components in the list?

[mbrookes]

I'm not sure why this was hidden, perhaps because I suggested it was a little off-topic (now edited to remove that, and to form a question), as in hindsight it isn't off-topic. Even in skinning the un-styled components, I think we should follow accessibility best practices.

My understanding is that the keyboard focus ring should be reserved for keyboard focus. Correct me if I'm wrong here, but I found it confusing regardless.

[mbrookes]

The new demo is great!

I did notice a small problem with the Slider in the Retro and Playful versions, in that the marks aren't correctly vertically aligned:

[mbrookes]

Should the Avatar have an image, even if it's just a generic one?

[danilo-leal]

@mbrookes thanks, glad you enjoyed it! And thanks for spotting these details ⎯ we'll push fixes for it. I'm still playing with some refinements to the hero demo, which includes beefing up the select list and the menu dropdown a bit + adding an image to the avatar there. Also, hopefully the other things you pointed out are already fixed 🤙

[mbrookes]

Should MUI Core here be a link to the core page? (Although I notice that that page doesn't currently currently mention Base, or link back to this one.)

[samuelsycamore]

I love the "All components" page! Just noticed that. 🫶

[danilo-leal]

@brijeshb42 nope, they're there just as a demonstration! They shouldn't trigger any action 🤙

[samuelsycamore]

Content/copy all looks good to me! I'm just wondering if this is the final word on this button here:

We already have a "Get started" button at the top of the page that goes to the same place. Is there a different call to action/place we could direct users that would make more sense? (Should we add the Discord link here?)

[danilo-leal]

@samuelsycamore I'm up to using this section to call attention to the Discord channel! Is that something we're ready to do?

[samuelsycamore]

@samuelsycamore I'm up to using this section to call attention to the Discord channel! Is that something we're ready to do?

What do you think @richbustos—are we ready to link to the Discord server at the bottom of this marketing page? (It's ok if the answer is no! We can always add it later.)

[richbustos]

What do you think @richbustos—are we ready to link to the Discord server at the bottom of this marketing page? (It's ok if the answer is no! We can always add it later.)

I think it's fine. It's not fully polished but no discord on launch ever is. The community will give us feedback on the Discord itself and we modify accordingly.

[danilo-leal]

Alright, I'll make the change! Feel free to throw in some copy we can use for the title, description, and button text. Also, note that this section is also present on the Material UI page 🤙

[mnajdova]

Few ideas for improvement:

• The Accessibility card points to a section that does not cover anything related to accessibility
• We should link to a page or explain a bit how it is different
• The shadow on the inputs for Base UI looks a bit too much

[danilo-leal]

Sweet, these are all good points!

• re A11y page: yeah, there isn't a specific section in the docs covering the specifics of accessibility on Base. We should definitely write it and come back to the landing page to link it!
• re Competitor difference: uhm, that's interesting! I wonder if it should live on the landing page, though... but either way, it's a good point to call out specific differentiators from the competition. Would love to get your & Michal's help to dig in further on that.
• re Input shadow: that's on the docs intro demo rather than in the landing page, right? We can definitely polish it!

Just reiterating that given the merge of this PR and the marketing/promotion of the page are separate things, don't think these points are blockers! We should for sure iterate/work on them following the merge 🤙

And for the sake of alignment, we agreed on merging this PR as it houses a bunch of general style updates to the website/documentation and to hold on to the actual Base UI page promotion until possibly the end of the northern hemisphere summer to potentially bundle it up with the Joy UI stable.

@mnajdova let me know if all of this makes sense and if you think it's ready to go! 😄

[oliviertassinari]

It's awesome to have this page 🎉

---

A review on the page: https://mui.com/base-ui/. Opportunities we could use to improve it. I'm adding @zanivan to the loop as this can often be applied to the core in general. Here is what I think would move us to state-of-the-art. I think that fixing these is part of what it takes to standout for Twitter, our exigeant users, they will notice them all IMHO:

• [x] 1 Use of cursor: pointer. We ruled toward using this style for any interactive elements, this is missed on the page. I added a few in mui/material-ui#38050.

• [x] 5 The Modal animation is buggy. It behaves correctly on https://mui.com/base-ui/react-modal/#transitions but not on this product page. See the scrollbar layout shift that shouldn't happen:

https://github.com/mui/material-ui/assets/3165635/bcc6404c-3912-4225-8fef-5692a5315c21

• [x] 9 The focus visible style on the lower demo is soo much better:

Eww

Great

• [x] 12. We are missing a clean focus visible style on all the elements:

In the doubt, I think using the same one as Joy UI would make sense.

• [x] 6 The label isn't wired to the select, also clicking on it should focus the select

• [ ] 2 Slider animation. This feels super nice on my end:

https://github.com/mui/material-ui/assets/3165635/90a6afd4-2a3f-4e9f-8d2b-ab90f942e97b

I haven't seen any other libraries do this, but it's so smooth (click jump https://m2.material.io/components/sliders#discrete-sliders)

• [x] 3 I think that white could feel a great step forward:

• [ ] 4 The Modal Escape interaction doesn't work when opening it. It behaves correctly on https://mui.com/base-ui/react-modal/. The focus should be moved to the modal:

• [ ] 7 Changing the color for each style could help reinforce the difference

• [ ] 8 I feel like the dropdown misses an open and close animation

• [ ] 10 Pressing Space doesn't trigger the focus visible style https://github.com/mui/base-ui/issues/19

https://github.com/mui/material-ui/assets/3165635/ccfb8585-37ed-4b74-a336-ae9813d69203

This is a bug with Joy UI and Material UI as well.

• [x] 11. The reference to the switch looks wrong to me, it should be a label, see https://ui.shadcn.com/docs/components/switch

• [ ] 13. Something I noticed while behind surprised I could select the text in the button. This looks correct here. However, there is a bug in Material UI cc @DiegoAndai and Joy UI cc @siriwatknp, both get it wrong, but in a different way 😆

• [ ] 15. Background color

Correct

Wrong

• [ ] 16. Select label click toggle issue https://github.com/mui/material-ui/issues/38477.

• [ ] 17. Joy UI, I would argue we should disable text selection

https://github.com/mui/material-ui/assets/3165635/ba09880c-263f-4392-ad24-6dd66fb99ba5

Material UI, I would argue that when the button is a <button> we should be able to select text, relying on the default browser behavior.

https://github.com/mui/material-ui/assets/3165635/c23e8521-d66a-4b29-ba01-e2fd9a9a96b5

Related to https://github.com/whatwg/html/issues/8228

---

Enjoy 😁

[danilo-leal]

@oliviertassinari sweet, appreciate the thorough & detailed feedback! 😬 Two clarifying questions, though:

• Bullet 3 wasn't clear, what do you mean by "white could feel a great step forward"?
• I'm feeling like bullet 13 is sort of unrelated to this PR/page and it's something that would deserve an issue for both Material & Joy? Parting from "This looks correct here" I'm assuming that there's no change to be made on any page-related file, right? 🤔

[oliviertassinari]

• 3 In dark mode, it feels OK on my end. But in light mode, I don't find that the button with the #000000 black background color has enough contrast with the text to be read easily. #0000ff blue -> #ffffff white could solve this.
• 13 Agree, I noticed this while I could select the text of the button, at first I was surprised / thought it was wrong, but diving deeper, it actually looks like it's my expectation that is wrong: Base UI got it right. So Material UI & Joy UI that gets it wrong.

[oliviertassinari]

Actually on 13. it directly connects to a UX pain on the page. In the beginning of the video, I have no idea of the copy click feature, I just want to copy the text, I can't. Then, in the second part of the video, I remove the user-select: none CSS.

https://github.com/mui/material-ui/assets/3165635/4f7348fb-504d-4c6e-a988-71e28400ee65

I think they do it right:

https://github.com/mui/material-ui/assets/3165635/73727821-d32c-4669-8efe-4b205d0e1017