diff --git a/README.md b/README.md index 94d2602..ba7f9a1 100644 --- a/README.md +++ b/README.md @@ -5,12 +5,15 @@ This demo shows how native Material Web Components can be used in NextJS/React, ## Roadmap 🚀 - [ ] Make sure all native Web Components are properly working - [x] Demo all components - - [ ] Add all missing events + - [x] Add all missing events - [ ] Add theming (design tokens) through Tailwind (i.e. remove all ts-ignores) - [ ] Resolve SSR issues, make compatible with NextJS (i.e. remove all dynamic imports) - [ ] Separate the demo from the actual UI code - [ ] Make installable as a package. Preferably keep the code in-project, like shadcn/ui, so developers have more control - [ ] Sync with upstream (i.e. https://github.com/material-components/material-web/blob/main/docs/intro.md) through webhooks and automations + - [ ] Use [Copybara](https://github.com/google/copybara) (or good ol' GitHub webhooks) to automate syncing with upstream + - [ ] 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. + - [ ] Create a PR with the new Component code. - [ ] Mix this library with Tailwind and BaseUI in order to complete missing Components which may prove useful for building production applications # NextJS Boilerplate diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a3b6aa8..7c9892e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -16,9 +16,10 @@ export default function RootLayout({ }>) { return ( - - - +
+ + + {/* From BaseUI: https://mui.com/base-ui/getting-started/usage/#responsive-meta-tag */} {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index 09c9275..4b53f58 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -69,6 +69,7 @@ import GitHubButton from "react-github-btn"; import Elevation from "@/components/ui/elevation"; import Ripple from "@/components/ui/ripple"; import FocusRing from "@/components/ui/focus-ring"; +import Progress from "@/components/ui/progress"; const Column = ({ children, ...props }: { children: any; id: string }) => { return ( @@ -285,8 +286,8 @@ export default function Home() { {isPlayingProgressIndicators ? 'pause' : 'play_arrow'} -