ManpowerHub theme (Universal)

The native ManpowerHub v3 theme adds product tokens (--brand, --surface-*, status colors) and maps them to shadcn/RNR semantic variables (--primary, --background, etc.) for universal apps.

CLI install

pnpmnpmyarnbun

pnpm dlx @react-native-reusables/cli@latest add http://localhost:4321/r/native-manpowerhub-theme.json

Register the namespace

In your Expo app’s components.json:

{
  "registries": {
    "@woxcn": {
      "url": "https://woxcn-registry.woxware.io/r/{name}.json"
    }
  }
}

After install

1. Import theme CSS in global.css:

@import "./styles/native-manpowerhub-tokens.css";
@import "./styles/native-manpowerhub-shadcn.css";

2. Install and load Geist (included as a theme dependency):

pnpm add @expo-google-fonts/geist expo-font

import { useFonts, Geist_400Regular } from "@expo-google-fonts/geist";
import * as SplashScreen from "expo-splash-screen";

// In root layout — load before rendering UI
const [loaded] = useFonts({ Geist_400Regular });

3. Add className="dark" on your root view for the default ManpowerHub dark surfaces, or data-theme="light" / class lm for light mode.

Related components

After the theme, install native ManpowerHub components:

• KPI Card (Universal)

Web theme

For Vite microfrontends, use the web ManpowerHub theme (manpowerhub-theme) with the shadcn CLI instead.