Universal UI (Expo)

WoxCN provides a native track for universal apps — Expo + React Native Web + React Native Reusables (RNR) + NativeWind. Use the RNR CLI instead of shadcn for these items.

Prerequisites

1. Bootstrap an Expo app with RNR:

pnpmnpmyarnbun

pnpm dlx @react-native-reusables/cli@latest init

2. Register the WoxCN registry in components.json:

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

3. Install upstream RNR primitives when a WoxCN item lists them as dependencies (e.g. text, button).

   In components.json, set "baseColor": "zinc" (or neutral, slate) — not emerald. The shadcn registry no longer hosts colors/emerald.json. ManpowerHub emerald comes from the WoxCN theme item.

Install a theme

Install the product theme before any components:

pnpmnpmyarnbun

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

Or by registry alias:

pnpmnpmyarnbun

pnpm dlx @react-native-reusables/cli@latest add @woxcn/native-manpowerhub-theme

Install a component

pnpmnpmyarnbun

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

After install

Merge the theme CSS into global.css (if the CLI did not do this automatically):

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

Load Geist in your root layout (theme dependency):

import { useFonts, Geist_400Regular, Geist_600SemiBold } from "@expo-google-fonts/geist";

Verify setup

pnpmnpmyarnbun

pnpm dlx @react-native-reusables/cli@latest doctor

Web vs native track

Track	CLI	Apps	Item prefix
Web (legacy MFE)	shadcn@latest add @woxcn/...	Vite + Radix microfrontends	manpowerhub-*
Universal (target)	@react-native-reusables/cli add @woxcn/native-...	Expo iOS / Android / web	native-*

Both tracks are served from the same registry host: https://woxcn-registry.woxware.io.

:::caution Do not run RNR CLI in packages/woxcn-registry This package is the registry host (Astro docs + shadcn build), not an Expo app. Run RNR CLI from your Expo app under apps/{product}/mobile. :::

Troubleshooting colors/emerald.json was not found

The upstream shadcn registry no longer publishes emerald as a base color. In your Expo app’s components.json, use a supported baseColor:

"tailwind": {
  "baseColor": "zinc"
}

Supported values include zinc, neutral, slate, stone, and gray. ManpowerHub emerald branding comes from native-manpowerhub-theme, not from baseColor.

If RNR CLI still fails, install the RNR primitive directly:

pnpm dlx shadcn@latest add https://reactnativereusables.com/r/nativewind/text.json
pnpm dlx @react-native-reusables/cli@latest add button

See Native ManpowerHub theme for token details.