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

[@adloltery]

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

[@firstprincipleslearning]

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

[@dc33333]

Wow!!! Production graphics are stunning!!!

[@thecodecatalyst]

A wild CSS library appears!

[@BenjaminSolum]

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

[@Technology_Forum]

What are the different notable vscode plugins you are using

[@xalidmalik5107]

Thank you for the introduction. Panda CSS already does this in a much better way

[@codernerd7076]

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

[@arrofirezasatria4835]

Yes me too, but i have to maintain website using mui, so there is no other choice.

[@carlosricardoziegler2650]

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

[@jucianocarvalho]

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

[@arzievsultan]

Thanks!

[@jherr]

Wowzers. Thank yoU!

[@wahabrehman6848]

Maybe im missing something but your package.json file still states your version is version 18. How are you using v19

[@jherr]

The NextJS package has React 19 bundled into it.

[@jeremytenjo]

MUI ❤

[@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

[@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.

[@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.

[@memine3405]

I got error from docker build, anyone can solve this ? Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@pigment-css/nextjs-plugin' imported from /usr/src/app/next.config.mjs