Pigment-CSS: Material-UI Fixed on NextJS and React 19

Material-UI has come out with a new CSS in JS build-time ilbrary that supports CSS any way you want to specify it. It's also themeable! Is this the best CSS library for NextJS and React 19? Let's find out!
💻 Code: arc.net/l/quote/lazrkxqd
Pigment CSS: github.com/jherr/material-ui/...
👉 Upcoming NextJS course: pronextjs.dev
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF
0:00 Introduction
1:11 Example App Setup
3:46 Creating CSS Classes
6:20 Styled Components Support
11:56 Theming
15:15 Outroduction

[@thecodecatalyst]

A wild CSS library appears!

[@firstprincipleslearning]

Great content as always, I am waiting with my ccard in my hand for your course :D

[@dc33333]

Wow!!! Production graphics are stunning!!!

[@codernerd7076]

Sticking to Shadcn, used Material UI before but had so many issues updating, Next.js that I will not use it again.

[@carlosricardoziegler2650]

Really nice ! I lke schadcn but miss my styled components :)

[@BenjaminSolum]

I really like where this library is headed. Hopefully we'll see an Atomic output option like Linaria!

[@adloltery]

Hello Jack, I was wondering if you could please share what React extensions you use in VScode

[@arzievsultan]

Thanks!

[@jherr]

Wowzers. Thank yoU!

[@jeremytenjo]

MUI ❤

[@jucianocarvalho]

Rsbuild has a plugin that do the exactly same thing with styled components

[@Technology_Forum]

What are the different notable vscode plugins you are using

[@julianklumpers]

can you use this in MUI v5? as a replacement or something?

[@LuisVazquez-ky7yb]

I don't understand the title either. I thought they fixed it but he didn't show anything on mui

[@olivtassinari]

Material UI v5 works with Next.js App Router, and also with suspend streaming.
We are working on Pigment CSS because we want to drastically improve the runtime performance of Material UI but without forcing a costly migration. The goal is to have this as backward-compatible as possible with Emotion. None of the existing solutions we could test or were aware of would deliver this, so we had to create this library.
As a side win, this allows us to support RSC for layout components. To be fair, it looks like we could contribute RSC to Emotion (using React.cache()) but not sure if it's worth the opportunity cost yet.

[@tharindurajarathna]

​@@olivtassinarican you update the material ui documentation with some examples?

[@olivtassinari]

​@@tharindurajarathnawe will document it, we are still very much dogfooding it right now. It's in the early preview stage.

[@xxXAsuraXxx]

Coming from styled components, I am trying to achieve same thing with just Tailwind css. So far its going good :)

[@FeFeronkaMetallica]

But this is not out yet?

[@olivtassinari]

It's in an early preview phase, v0.0.1. We will share more updates as it gets closer to production. We want this to be at least opt-in in Material UI v6 😄

[@FeFeronkaMetallica]

@@olivtassinari I will definitelly switch once it is production ready. I have been keeping an eyy on updates from MUI

[@rrAzz]

It's just another css-in-js library, nothing to compare with MUI 👎

[@jherr]

It's from MUI. It probably what the next version of MUI will be built on so that it will be compatible with both RSC and non-RSC frameworks.

[@mui-jose]

Exactly,@@jherr!

[@coherentpanda7115]

It's basically a replacement for Styled Components and (Emotion underneath) since those devs don't seem intent on a version 7 that is app router ready anytime soon. It looks straightforward and light, which is great.