Create CLI npx create-mui-app

[oliviertassinari]

Summary 💡

Today, to create a new project, you have to go with one of those:

1. start from our example folder in GitHub
2. follow a step-by-step flow (well not just yet, but a WIP [material-ui][docs] Redo integration docs pages #40062)

There is a space to create a CLI specific to MUI (the whole suite of products) that

• A. would allow developers to quickly pick the stack they want:

  • TypeScript vs. JavaScript
  • Next.js vs. Vite
  • which abstraction level do you want, Base UI (you own the styles) vs. Material UI (you don't own the styles).
  • which theme do you want, Material Design or Joy Design
  • do you want Tailwind CSS, or raw CSS or MUI System
  • do you want Toolpad?

• B. would allow to easily import a template/block to an existing project.

Examples 🌈

• Next.js npx create-next-app@latest

• Vite npm create vite@latest

Motivation 🔦

Achieving this with examples would lead to an explosion of possible combinations, it would be a LOT more examples to maintain.

Related

#39587, #41173

[DerTimonius]

create-t3-app could also be an inspiration: instead of providing all possible combinations, they only write the necessary files.

If this is "greenlit" and if you don't mind that a non-member would work on this, I would most certainly want to try this! Sounds like a great learning experience!

[mbrookes]

@DerTimonius Sound's good. We'd love to see what you come up with!

[DerTimonius]

I started with the project today and wanted to share the first version of the TUI. (the video cut off the left elements bit...)

The command currently saves the input, I'm writing the installers for the different packages atm.

Just wanted to check in if this prototype is similar to what you had in mind @mbrookes @oliviertassinari

[oliviertassinari]

@DerTimonius It's getting closer, yes. Thanks for spending time on this.

Quick feedback:

• I would place MUI System (name to change) as the same level as Tailwind CSS, I think it's about which styling solution do you want to use. I wouldn't expect developers to want to mix them.
• "MUI Icons" in our case are "Material Design icons" (probably best since we plan to make them work with Joy UI as well) or "Material UI icons", but "MUI icons" for me doesn't mean anything.
• TypeScript
• Today, having Base UI in the list of options feels strange. We haven't built the product infra for developers to really use it as a starting point yet.

[DerTimonius]

@oliviertassinari thanks for the feedback 🙌
as I said, this was the first draft so I was certain that things should change 😄

I opened a draft PR today with an updated video here: #39865
there are still things missing, especially the templates should be updated, but I'd be glad to hear more feedback 🙂

[DerTimonius]

Just wanted to let you know that I'm kind of stuck with the templates. Any help would be much appreciated!

[oliviertassinari]

Shadcn UI effectively solved this issue last week https://x.com/shadcn/status/1829646528149143992. See @t3dotgg's wish in https://youtu.be/c5OPn_dyNcc?si=c5w4FPZkmN8_HwcP&t=616 for the overall ecosystem:

This isn't just like Shadcn UI being easier to adopt to do UI things.
This is a step forward in how these init things work the classic docs page everyone's had to write at some point. All the steps to add this thing to your project could be replaced with a single command and then you can just read the diff…