Material Design colors for React.
It injects --mcu-* CSS variables into the page.
react-mcu.mp4
m3 references:
| builder | roles |
|---|---|
 |
 |
import { Mcu } from "react-mcu";
<Mcu
source="#0e1216"
scheme="vibrant"
contrast={0.5}
customColors={[
{ name: "myCustomColor1", hex: "#6C8A0C", blend: true },
{ name: "myCustomColor2", hex: "#E126C6", blend: true },
{ name: "myCustomColor3", hex: "#E126C6", blend: false },
]}
>
<p style={{
backgroundColor: "var(--mcu-surface)",
color: "var(--mcu-on-surface)",
}}>
Hello, MCU <span style={{
backgroundColor: "var(--mcu-my-custom-color-1)",
color: "var(--mcu-on-my-custom-color-1)",
}}>colors<span>!
</p>
</Mcu>Tip
Typically wrapping {children} in a
layout.
Note
CSS varnames are always kebab-cased, myCustomColor1 →
--mcu-my-custom-color-1
A hook is also provided:
import { useMcu } from "react-mcu";
const { initials, setMcuConfig, getMcuColor } = useMcu();
return (
<button onClick={() => setMcuConfig({ ...initials, source: "#FF5722" })}>
Change to {getMcuColor("primary", "light")}
</button>
);Compatible through theme variables:
Lines 3 to 186 in 688c789
Or simply:
@import "react-mcu/tailwind.css";Pre-requisites:
- You should use
tailwind.cssVariables
Simply override/remap shadcn's CSS variables:
:root {
/* ... */
}
.dark {
/* ... */
}
:root,
.dark {
--background: var(--mcu-surface);
--foreground: var(--mcu-on-surface);
--card: var(--mcu-surface-container-low);
--card-foreground: var(--mcu-on-surface);
--popover: var(--mcu-surface-container-high);
--popover-foreground: var(--mcu-on-surface);
--primary: var(--mcu-primary);
--primary-foreground: var(--mcu-on-primary);
--secondary: var(--mcu-secondary-container);
--secondary-foreground: var(--mcu-on-secondary-container);
--muted: var(--mcu-surface-container-highest);
--muted-foreground: var(--mcu-on-surface-variant);
--accent: var(--mcu-secondary-container);
--accent-foreground: var(--mcu-on-secondary-container);
--destructive: var(--mcu-error);
--border: var(--mcu-outline-variant);
--input: var(--mcu-outline);
--ring: var(--mcu-primary);
--chart-1: var(--mcu-primary-fixed);
--chart-2: var(--mcu-secondary-fixed);
--chart-3: var(--mcu-tertiary-fixed);
--chart-4: var(--mcu-primary-fixed-dim);
--chart-5: var(--mcu-secondary-fixed-dim);
--sidebar: var(--mcu-surface-container-low);
--sidebar-foreground: var(--mcu-on-surface);
--sidebar-primary: var(--mcu-primary);
--sidebar-primary-foreground: var(--mcu-on-primary);
--sidebar-accent: var(--mcu-secondary-container);
--sidebar-accent-foreground: var(--mcu-on-secondary-container);
--sidebar-border: var(--mcu-outline-variant);
--sidebar-ring: var(--mcu-primary);
}mapping details
see:- https://chatgpt.com/share/6899f20a-422c-8011-a072-62fb649589a0
- https://gemini.google.com/share/51e072b6f1d2
Important
Make sure :root, .dark { ... } comes AFTER .root { ... } .dark { ... } to
take precedence.
Pre-requisites:
- Install nvm, then:
nb: if you want this node version to be your default nvm's one:
$ nvm install $ nvm use $ node -v # make sure your version satisfies package.json#engines.nodenvm alias default node - Install pnpm, with:
$ corepack enable $ corepack prepare --activate # it reads "packageManager" $ pnpm -v # make sure your version satisfies package.json#engines.pnpm
$ pnpm iWhen submitting a pull request, please include a changeset to document your changes:
pnpm exec changesetThis helps us maintain the changelog and version the package appropriately.