Skip to content
Stratum

stratum-uikit init

stratum-uikit init scaffolds all Stratum infrastructure into an existing Expo project — design tokens, theme files, ThemeProvider, and hooks.

Usage

Section titled “Usage”
Terminal window
npx stratum-uikit init

Run this from your project root (the directory containing package.json).

What it does

Section titled “What it does”
  1. Checks that package.json exists in the current directory (bails if not)
  2. Detects Expo in your dependencies — warns if not found but continues
  3. Writes stratum.config.json to your project root with default directory paths
  4. Copies token files into src/tokens/:
    • colors.ts, spacing.ts, typography.ts, radii.ts, shadows.ts, borders.ts
    • theme-protocol.ts — the AppTheme interface all themes implement
    • index.ts — barrel export
    • themes/registry.ts, themes/createTheme.ts, themes/slate.ts
  5. Copies providers into src/providers/:
    • ThemeProvider.tsx — wrap your app root in this
    • unistyles.ts — Unistyles config (auto-derived from THEME_REGISTRY)
  6. Copies hooks into src/hooks/:
    • useTheme.ts — const theme = useTheme()
    • useThemeToggle.ts — const { setTheme, toggleColorScheme } = useThemeToggle()
  7. Prints next steps

What it does NOT do

Section titled “What it does NOT do”
  • Does not run npm install or expo install (package managers vary — follow the printed instructions)
  • Does not modify tsconfig.json (add the @/ alias yourself — see below)
  • Does not modify your root layout (follow the printed ThemeProvider instructions)
  • Does not copy components (use stratum-uikit add for that)
  • Only installs the Slate theme — for Obsidian or Quartz see Custom Themes

After running init

Section titled “After running init”

1. Install peer dependencies:

Terminal window
npx expo install react-native-unistyles react-native-nitro-modules phosphor-react-native

2. Add the @/ path alias to tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] }
  }
}

3. Wrap your app root:

// app/_layout.tsx (or App.tsx)
import '@/providers/unistyles'; // must be imported before ThemeProvider
import { ThemeProvider } from '@/providers/ThemeProvider';


export default function RootLayout() {
  return (
    <ThemeProvider initialTheme="slate" initialColorScheme="light">
      {/* your navigator */}
    </ThemeProvider>
  );
}

4. Build with a dev client — Expo Go will not work:

Terminal window
npx expo run:ios
npx expo run:android

stratum.config.json

Section titled “stratum.config.json”

init writes this file to your project root. stratum-uikit add reads it to know where to copy components.

{
  "componentDir": "src/components",
  "tokenDir": "src/tokens",
  "providerDir": "src/providers",
  "hookDir": "src/hooks",
  "defaultTheme": "slate"
}

You can edit these paths if your project uses a different structure.

Section titled “Related”