[examples] Create the example to be used on StackBlitz previews

[michaldudak]

[pkg-pr-new[bot]]

vite-css-base-ui-example

npm i https://pkg.pr.new/@base-ui-components/react@1885

commit: ced6d00

[netlify[bot]]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	ced6d0004748971fcbd50f600783605b102b2f46
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/686b9209b775870008e07eb0
😎 Deploy Preview	https://deploy-preview-1885--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.

[mui-bot]

Bundle size report

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

Details of bundle changes

Generated by :no_entry_sign: dangerJS against ced6d0004748971fcbd50f600783605b102b2f46

[atomiks]

I'm curious how this is better than navigating to a demo and using the CodeSandbox link (or at least linking to that automatically without needing to browse)? For instance, it doesn't set up the relevant component as a starting point. It also takes a while to install the deps and boot it up 🤔

[michaldudak]

A couple of reasons:

• The link in the pkg.pr.new comment currently points to a project that's essentially unusable - it has Base UI installed but no React.
• StackBlitz, while being slower to boot, sets up a more robust environment (as it's basically Node running in the browser). Dependency resolution works better (it uses actual npm, not a custom resolver like CodeSandbox) and TypeScript support in the editor seems to be more reliable. Because of this, we'd like to move away from CodeSandbox at all (across all projects)
• We can set up multiple examples, with Next.js, Vite, Remix, etc. They can serve as both starting points for setting up projects and be be run on StackBlitz.

The startup time is indeed much worse, but for now we're not removing sandboxes from demos. We might consider including all components in an example so it's easier to edit them.

[atomiks]

We might consider including all components in an example so it's easier to edit them.

This seems good

[michaldudak]

I'll work on it in a follow-up PR.