[base-ui][docs] Create more examples for Base UI

[mapache-salvaje]

Problem

The MUI docs currently contain many scaffold examples and template projects for Material UI, but we're lacking in comparable examples for Base UI. Developers shouldn't have to deal with any initial setup steps to start building with each of our libraries using any framework.

Solution

This is an umbrella issue to keep track of the progress in expanding our collection of Base UI examples.

As a first step, I've created #36112 to establish naming conventions in the examples folder to keep things organized.

From there, I'd like to reach parity with the Material UI examples, so we should plug Base into Create React App, Next.js, Vite, etc., both in JS and TS.

Scope

The scope of this issue is limited to bare-bones scaffold projects. I also want to build more templates and fully functional starter apps, but that will be for a separate issue.

I think it makes sense to add JS and TS examples together in one PR for each framework.

Tasks

• Create Example Projects doc for Base UI

Base UI

• base-ui-nextjs-tailwind - [base-ui][examples] Add Base UI + Next.js + Tailwind CSS example in JavaScript #40236
• base-ui-nextjs-tailwind-ts - [core] Prepend "use-client" directive + add docs and examples for using MUI libraries with Next.js App Router #37656
• base-ui-vite-tailwind
• base-ui-vite-tailwind-ts - [examples][base-ui] Add Base UI + Vite + Tailwind CSS example in TypeScript #37595
• base-ui-vite-system
• base-ui-vite-system-ts
• base-ui-cra - [docs] Add and revise Base UI + Create React App examples #36825
• base-ui-cra-ts - [docs] Add and revise Base UI + Create React App examples #36825

Naming conventions

library-framework(-ts)

Library prefixes:

• base-ui
• joy-ui
• material-ui

TypeScript examples get a -ts suffix.

✅ base-ui-nextjs-ts
❌ base-ui-nextjs-js // omit the "-js" flag since this is the default

✅ base-ui-remix
❌ mui-base-remix // needs to start with lib prefix "base-ui"

[mj12albert]

There could actually be more combinations between the CSS framework (e.g. Tailwind) + Base + the "application" framework (e.g. Vite) like this:

• base-vite-sass
• base-vite-tailwind
• base-vite-system

What do you think @samuelsycamore ?

[mapache-salvaje]

Absolutely @mj12albert ! The list here is just meant as a starting point for us to reach parity with the existing Material UI examples. Definitely open to creating more as we see fit.

[oliviertassinari]

1. I think that we could remove all the Gatsby examples, not worth the opportunity cost: https://npm-stat.com/charts.html?package=gatsby&from=2021-08-03&to=2023-08-03. It will be more time we can use to polish the other examples.
2. Examples for Base UI don't make a lot of sense for me. I think having one for developers to provide bug reproduction would be fair, one for us internally to test different styling solutions would also be fair. But beyond??
   For the Joy Design version of Base UI, installation steps could be enough, https://ui.shadcn.com/docs/installation/remix. I'm afraid of how much time it could take to maintaine the 3-tuple of (TypeScript/JavaScript, Framework, Styling library).
3. We need to revamp the CDN examples, they should use ESM now, not UMD.
4. For the Joy UI examples, I think that having Next.js App Router is enough for the bulk of the need. I don't think that it would be a major hurdle if we didn't have other at the point of the stable release. However, a big 💯 to add analytics on the Material UI examples to know the actually need for each example. I'm guessing when I say only App Router.

[mapache-salvaje]

@oliviertassinari all of that makes sense. I do think we should provide examples for Base + Tailwind + major frameworks, because there's enough of a demand for "MUI + Tailwind" that it's worth maintaining those. I'll pare down the lists here, and we can keep an eye on the Material UI analytics to see what else to prioritize (if anything).

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.