Skip to content

Conversation

@michaldudak
Copy link
Member

@michaldudak michaldudak commented May 7, 2025

Added the Vite + CSS modules example project.
This can serve as a starting point for exploring Base UI, and, more importantly, will be used to create a StackBlitz environment for every PR, so that PRs can be verified more conveniently.
See the next comment for the link to the created environment.

@michaldudak michaldudak added the examples Relating to /examples. label May 7, 2025
@pkg-pr-new
Copy link

pkg-pr-new bot commented May 7, 2025

vite-css-base-ui-example

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

commit: ced6d00

@netlify
Copy link

netlify bot commented May 7, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit ced6d00
🔍 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...

QR Code

Use your smartphone camera to open QR code link.

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

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label May 19, 2025
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jul 2, 2025
@mui-bot
Copy link

mui-bot commented Jul 2, 2025

Bundle size report

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

Details of bundle changes

Generated by 🚫 dangerJS against ced6d00

@michaldudak michaldudak requested review from atomiks and colmtuite July 2, 2025 12:21
@michaldudak michaldudak marked this pull request as ready for review July 2, 2025 12:21
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jul 2, 2025
@atomiks
Copy link
Contributor

atomiks commented Jul 3, 2025

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
Copy link
Member Author

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
Copy link
Contributor

atomiks commented Jul 7, 2025

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

This seems good

@michaldudak
Copy link
Member Author

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

@michaldudak michaldudak enabled auto-merge (squash) July 7, 2025 09:05
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jul 7, 2025
@michaldudak michaldudak merged commit 22dc143 into mui:master Jul 7, 2025
20 checks passed
@oliviertassinari oliviertassinari added the type: new feature Expand the scope of the product to solve a new problem. label Aug 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

examples Relating to /examples. type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants