You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To use Material Web Components for React as a **library** in your project, run:
15
+
13
16
```sh
14
17
npm install material-web-components-react
15
18
```
@@ -23,36 +26,40 @@ Under the hood, this library simply uses the official [@material/web](https://gi
23
26
We're looking for maintainers and contributors!
24
27
25
28
### Roadmap 🚀
29
+
26
30
-[ ] Make sure all native Web Components are properly working
27
-
-[x] Demo all components
28
-
-[x] Add all missing events
29
-
-[ ] Add theming (design tokens) through Tailwind (i.e. remove all ts-ignores)
31
+
-[x] Demo all components
32
+
-[x] Add all missing events
33
+
-[ ] Add theming (design tokens) through Tailwind (i.e. remove all ts-ignores)
30
34
-[x] Resolve SSR/SSG issues, make compatible with NextJS (i.e. remove all dynamic imports)
31
35
-[x] Separate the demo from the actual UI code
32
36
-[x] Make installable as a package.
33
37
-[ ] Make installable as code-in-project, like shadcn/ui, so developers have more control
34
38
-[ ] Add better TypeScript support
35
39
-[ ] Sync with upstream (i.e. https://github.com/material-components/material-web/blob/main/docs/intro.md) through webhooks and automations
36
-
-[ ] Use [Copybara](https://github.com/google/copybara) (or good ol' GitHub webhooks) to automate syncing with upstream
37
-
-[ ] Use [lit-analyzer](https://www.npmjs.com/package/lit-analyzer) to see which Web Components changed. Perhaps mix with an LLM to compare existing and newly autogenerated code.
38
-
-[ ] Create a PR with the new Component code.
40
+
-[ ] Use [Copybara](https://github.com/google/copybara) (or good ol' GitHub webhooks) to automate syncing with upstream
41
+
-[ ] Use [lit-analyzer](https://www.npmjs.com/package/lit-analyzer) to see which Web Components changed. Perhaps mix with an LLM to compare existing and newly autogenerated code.
42
+
-[ ] Create a PR with the new Component code.
39
43
-[ ] Mix this library with Tailwind and BaseUI in order to complete missing Components which may prove useful for building production applications
40
-
-[x] App Bars
41
-
- [x] Top App Bar
42
-
- [x] Bottom App Bar
43
-
-[x] Stack
44
-
-[x] Box
45
-
-[x] Navigation Rail
46
-
-[ ] Container
47
-
-[ ] Typography
44
+
-[x] App Bars
45
+
-[x] Top App Bar
46
+
-[x] Bottom App Bar
47
+
-[x] Stack
48
+
-[x] Box
49
+
-[x] Navigation Rail
50
+
-[ ] Container
51
+
-[ ] Typography
48
52
49
53
### Credits
54
+
50
55
Huge shout out to Elizabeth Mitchell ([asyncLiz](https://github.com/asyncliz/)) and the rest of the Material Design team for their awesome Web Components implementation.
51
56
52
57
Thank you [Travis Reeder](https://github.com/treeder) for your Web Component implementation of Navigation Rail. I had to copy it to this project. I couldn't use yours directly because it would import `@material/web` again and bring conflicts.
Copy file name to clipboardexpand all lines: WHY.md
+5-1
Original file line number
Diff line number
Diff line change
@@ -3,6 +3,7 @@
3
3
Let's evaluate our options.
4
4
5
5
## Libraries which implement Material 2
6
+
6
7
These are libraries which were built upon an older specification of Google's official Material Web Components, but those followed the Material 2 specification. Such libraries are either discontinued, or slowly dying out. Those include, but are not limited to:
7
8
8
9
- material-tailwind (currently looks like the best!): https://github.com/creativetimofficial/material-tailwind
@@ -13,6 +14,7 @@ These are libraries which were built upon an older specification of Google's off
13
14
Check out more libraries listed at https://m2.material.io/develop/web/guides/framework-wrappers .
14
15
15
16
## Libraries which implement Material 3
17
+
16
18
These are libraries which implement Material 3, the latest specification (so far) from the Material Design team. Some look great, others... not really. These include, but are not limited to:
17
19
18
20
- beercss (insane work, totally framework independent. I should consider using this): https://www.beercss.com/
@@ -21,11 +23,13 @@ These are libraries which implement Material 3, the latest specification (so far
21
23
I'd love to add more. Send in a Pull Request if you'd like to contribute more.
22
24
23
25
## Popular, but slow
26
+
24
27
[MUI](https://mui.com/) is the library which fits this category. While I love their work, [they are slow](https://github.com/mui/material-ui/issues/29345) at keeping up with latest design philosophies and practices (And rightly so! A lot of software depends on their stability). MUI has announced better Material 3 support in Q4 of 2024. Too far away, at least for when this project started!
25
28
26
29
For MUI, and similar libraries, I recommend using them alongside this library to "fill in" the missing parts.
27
30
28
31
## The future: Web Components!
32
+
29
33
The library we use under the hood, [@material/web](https://github.com/material-components/material-web) fits here. Web Components are the future, we must accept it. But while we build towards that future, it's obvious that current applications must be maintained. Hence the existence of this library. Our aim would be to keep this library synced with this underlying new technology as much as possible, so when we transition, it's seamless!
30
34
31
-
Another great library to plug in here would be: https://www.mdui.org/en/docs/2/
35
+
Another great library to plug in here would be: https://www.mdui.org/en/docs/2/
0 commit comments