ManpowerHub theme
Install the ManpowerHub v3 design tokens and shadcn theme for emerald brand and dark surfaces.
The ManpowerHub v3 theme adds product tokens (--brand, --surface-*, status colors) and maps them to shadcn semantic variables (--primary, --background, etc.). Install it once per app before adding WoxCN components.
CLI install
Section titled “CLI install”Or use the full registry URL:
Register the namespace
Section titled “Register the namespace”In your app’s components.json:
{ "registries": { "@woxcn": "https://YOUR_REGISTRY_HOST/r/{name}.json" }}After install
Section titled “After install”- Import the theme CSS in your global stylesheet (if the CLI did not merge automatically):
@import "./styles/manpowerhub-tokens.css";@import "./styles/manpowerhub-shadcn.css";- Install Geist (included as a theme dependency):
pnpm add @fontsource/geist-sans- In
index.css, import the font and theme files alongside Tailwind:
@import "tailwindcss";@import "@fontsource/geist-sans";@import "./styles/manpowerhub-tokens.css";@import "./styles/manpowerhub-shadcn.css";Dark and light mode
Section titled “Dark and light mode”- Dark (default): matches ManpowerHub
:root— useclass="dark"on<html>or Starlightdata-theme="dark". - Light: add
data-theme="light"or classlmon a parent element.
Manpower microfrontends
Section titled “Manpower microfrontends”Each feature app under apps/manpower/* must install the theme separately. The MFE shell in services/microfrontend/manpower uses its own CSS; align shell variables with --brand and --surface-1 for a unified look.
See instruction.md in the repo for the full MFE + registry architecture guide.