[docs] Revamp demos

[aarongarciah]

Preview: https://deploy-preview-4676--base-ui.netlify.app/react/handbook/forms

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@4676
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@4676
  

commit: 6f41f59

[code-infra-dashboard]

Bundle size

Bundle	Parsed size	Gzip size
@base-ui/react	0B(0.00%)	0B(0.00%)

Details of bundle changes

Performance

Total duration: 1,129.85 ms ▼-316.06 ms^(-21.9%) | Renders: 50 ⁽⁺⁰⁾ | Paint: 1,714.95 ms ▼-473.90 ms^(-21.7%)

Test	Duration	Renders
Tabs mount (200 instances)	217.64 ms ▼-56.50 ms(-20.6%)	4 (+0)
Select mount (200 instances)	133.62 ms ▼-37.76 ms(-22.0%)	3 (+0)
Menu mount (300 instances)	118.54 ms ▼-37.69 ms(-24.1%)	2 (+0)
Scroll Area mount (300 instances)	85.84 ms ▼-35.71 ms(-29.4%)	3 (+0)
Checkbox mount (500 instances)	65.70 ms ▼-34.54 ms(-34.5%)	1 (+0)

…and 3 more (+4 within noise) — details

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	6de9050
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/69eb069e5308be0008bbfb22
😎 Deploy Preview	https://deploy-preview-4676--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	6f41f59
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6a075b917d4fc40007d77981
😎 Deploy Preview	https://deploy-preview-4676--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[aarongarciah]

@atomiks

Scale animation is broken for this -- no transition. opacity works though.

Fixed

Is it intentional the text isn't centered?

Yes

> Should the switch's background-color transition? It looks slightly odd that the thumb transitions but not the background-color.

Updated. I wasn’t sure about it.

This should have a black focus ring:

Updated all focus rings to be "black" on the docs shell.

The bottom padding of combobox lists seems to be smaller than the top padding:

I added overflow: clip to the .Popup part to avoid the scrollbar overflowing it, but then it made the bottom padding smaller. Turns out I didn’t realize it was a miscalculation on the max-height 😅. Should be fixed now on all popups.


The year text feels slightly hard to read:

Tweaked. There might be some more cases like this in dark mode. There will be plenty more PRs to tweak stuff.

The Grid layout example looks off center:

Fixed

There's too much space beneath the emoji list?:

Fixed

This example looks too small?:

Why is that? It’s a 32x32 avatar, same size as buttons, inputs, etc.

The Dialog demos' transition duration seems too slow compared to the hero demo.

Fixed

The Outside Scroll Dialog's translateY animation seems much too fast?

Fixed

Not sure how I feel about pure white borders in dark mode. Kind of feels too harsh. Maybe a light gray would work better?

We might change it in another PR to gray-50. Leaving as is in this PR.