@zaide6137/m3-web-components
v0.1.7
Published
Material 3 React Web Components
Readme
Material 3 Components - Web
A modern React component library based on the Material 3 (M3) Design System. This library provides a powerful, dynamic theming engine that generates full color palettes from a single seed color and supports seamless light, dark, and auto mode switching.
Installation
npm install @zaide6137/m3-components-webGet Started
This Library is designed to be easy to use. The setup involves only 1 step to make everything work.
The first and only step required to setup the library is to wrap your root component with the ThemeProvider component.
import { ThemeProvider } from '@zaide6137/m3-components-web';
export default function RootLayout({ children }) {
return (
<html>
<body>
<ThemeProvider
seedColor="#6750A4"
defaultColorScheme="auto"
>
{children}
</ThemeProvider>
</body>
</html>
);
}For NextJS Users, wrap your layout.tsx with the ThemeProvider.
To customize the initial color of the entire components, modify the seedColor props of the ThemeProvider with the HEX Color Code you want. The seed color will be the basis of all the color pallete ThemeProvider will generate. It will automatically generate the appropriate Color Pallete based on the Material 3 Tokens. Check this out to learn more about how Material 3 Color Roles & Tokens work.
To set the initial color scheme of the entire components, modify the defaultColorScheme prop of ThemeProvider. You can set it to Light, Dark and Automatic
How It Works
The library works by auto generating the Material 3 Color Tokens based on the provided seed color. Then your app will utilize the themeColors object from the useGlobalTheme() hook to style your UI based on the Material 3 Design.
Built in components like Button, Calendar, BigCalendar, EditText from this library is already using the styles of themeColors automatically.
Usage
Accessing Theme Colors
Use the useGlobalTheme hook to access generated tokens. These colors reactively update when the theme or mode changes.
To style your custom UI like the background for your page, you can use the inline style method on the root div to set the background color of your page.
Example:
"use client"
import { useGlobalTheme } from '@zaide6137/m3-components-web';
export default function MyHomePage(){
const { themeColors } = useGlobalTheme();
return (
<div
style={{
backgroundColor: themeColors.background
}}
>
<h1 style={{
color: themeColors.onSurface
}}
>
Hello World!
</h1>
</div>
)
}Change the Theme Colors
To change the entire brand color of your application, use the setThemeColors function. This takes a single hex color (the "seed") and automatically regenerates all Material 3 color tokens for your app instantly.
"use client"
import { useGlobalTheme } from '@zaide6137/m3-components-web';
export default function BrandSwitcher() {
const { setThemeColors } = useGlobalTheme();
return (
<div>
{/* Updates the entire app palette to Teal tones */}
<button onClick={() => setThemeColors("#006A6A")}>
Set Brand to Teal
</button>
{/* Updates the entire app palette to Purple tones */}
<button onClick={() => setThemeColors("#6750A4")}>
Set Brand to Purple
</button>
</div>
);
}Theme Mode Switching
To switch between visual modes (Light, Dark, or System), use the setColorScheme function. This maintains your current brand color while shifting the background and surface tones to match the selected mode.
"use client"
import { useGlobalTheme } from '@zaide6137/m3-components-web';
export default function AppearanceSwitcher() {
const { setColorScheme } = useGlobalTheme();
return (
<div>
{/* Forces Light Mode */}
<button onClick={() => setColorScheme("light")}>
Light Mode
</button>
{/* Forces Dark Mode */}
<button onClick={() => setColorScheme("dark")}>
Dark Mode
</button>
{/* Automatically syncs with the user's OS settings */}
<button onClick={() => setColorScheme("auto")}>
System Preference
</button>
</div>
);
}License
MIT © Zaide LLC 2026