Material Web Components for React (MUI Alternative) (opens in new tab)

(github.com)

5 pointsbazaz1y ago5 comments

5 comments

bazazOP1y ago

Hey hn, I've built a performant, compact and composable Material library for React. It's based off of @material/web's official Web Components implementation.

I am to use Tailwind as a styling engine, and I want to make it installable in-project, like shadcn. Kind of like a lightweight alternative to MUI.

btw I'm already using this in a production project. Looking forward to your thoughts.

andrico1y ago

This is cool.

Quick question, how are you implementing the Tailwind styles? I'm assuming that the material/web use the shadow DOM to encapsulate styles, and therefore allow customised using CSS variables.

So I'm a little confused why the global tailwind CSS seems to work

bazazOP1y ago

This is a WIP I'm trying to figure out.

I want to be able to load those CSS variables as Tailwind directives.

e.g.

|_ button

  |_ index.tsx

  |_ tailwind.ext.js // <-- this contains the design tokens of this component as Tailwind directives. Now simply extend your Tailwind config with this file to add the relevant design tokens

I would love any ideas or feedback on this mechanism.

Akash_deshmukh1y ago

Thnaks for sharing!

bazazOP1y ago

Pleasure! Drop it a star on GitHub to support further. Would appreciate any PRs or dev support.

j / k navigate · click thread line to collapse

5 comments

bazazOP1y ago

Hey hn, I've built a performant, compact and composable Material library for React. It's based off of @material/web's official Web Components implementation.

I am to use Tailwind as a styling engine, and I want to make it installable in-project, like shadcn. Kind of like a lightweight alternative to MUI.

btw I'm already using this in a production project. Looking forward to your thoughts.

andrico1y ago

This is cool.

Quick question, how are you implementing the Tailwind styles? I'm assuming that the material/web use the shadow DOM to encapsulate styles, and therefore allow customised using CSS variables.

So I'm a little confused why the global tailwind CSS seems to work

bazazOP1y ago

This is a WIP I'm trying to figure out.

I want to be able to load those CSS variables as Tailwind directives.

e.g.

|_ button

  |_ index.tsx

  |_ tailwind.ext.js // <-- this contains the design tokens of this component as Tailwind directives. Now simply extend your Tailwind config with this file to add the relevant design tokens

I would love any ideas or feedback on this mechanism.

Akash_deshmukh1y ago

Thnaks for sharing!

bazazOP1y ago

Pleasure! Drop it a star on GitHub to support further. Would appreciate any PRs or dev support.

j / k navigate · click thread line to collapse