Production-ready Next.js templates, fully styled with MD3. Each template is a complete standalone app.
npm install md3-next @mui/material @emotion/react @emotion/styledPass a single hex value and get the full MD3 token set — primary, secondary, tertiary, surface hierarchy, error states, and more.
Both schemes are generated up-front. The provider follows system preference or lets users toggle manually.
Buttons, cards, dialogs, switches, chips, navigation — all restyled to the Material Design 3 specification out of the box.
import { createMD3Theme } from "md3-next";
const theme = createMD3Theme({
seed: "#6750A4",
mode: "system",
});import { MD3Provider } from "md3-next";
export function Providers({ children }) {
return <MD3Provider theme={theme}>{children}</MD3Provider>;
}import { useMD3 } from "md3-next";
function MyComponent() {
const { tokens, mode, toggleMode } = useMD3();
return <div style={{ color: tokens.primary }}>Hello MD3</div>;
}6 production-ready templates. Dashboard, SaaS landing, auth kit, e-commerce, blog, and portfolio — all styled with MD3.