stratum-uikit

CLI for Stratum — an AI-first atomic design system for React Native (Expo).

Copy components into your project. You own the code.

Requirements

• Node.js 18+
• Expo SDK 52+ with New Architecture enabled
• A dev client build (not Expo Go — Unistyles requires native modules)

Quick start

# 1. Scaffold tokens, providers, and hooks into your project
npx stratum-uikit init

# 2. Install peer dependencies
npx expo install react-native-unistyles react-native-nitro-modules phosphor-react-native

# 3. Add components
npx stratum-uikit add atom/Button
npx stratum-uikit add molecule/FormField
npx stratum-uikit add organism/AuthForm

Commands

stratum-uikit init

Scaffolds Stratum into your Expo project:

• Writes stratum.config.json to your project root
• Copies all token files (src/tokens/) including the Slate theme
• Copies ThemeProvider and Unistyles config (src/providers/)
• Copies useTheme and useThemeToggle hooks (src/hooks/)

npx stratum-uikit init

Does not auto-install npm dependencies or modify tsconfig.json — follow the printed next steps.

stratum-uikit add <component>

Copies a component and all its dependencies into your project:

npx stratum-uikit add atom/Button
npx stratum-uikit add atom/Input
npx stratum-uikit add molecule/FormField
npx stratum-uikit add molecule/SettingsRow
npx stratum-uikit add organism/AuthForm
npx stratum-uikit add organism/SettingsGroup
npx stratum-uikit add template/AuthLayout
npx stratum-uikit add template/SettingsLayout

Layer prefixes: atom/, molecule/, organism/, template/

Dependencies are resolved automatically. Adding organism/AuthForm also adds molecule/FormField, atom/Button, atom/Input, and atom/Text.

Options:

| Flag | Description | |---|---| | --overwrite | Replace files that already exist |

stratum-uikit theme list

Lists all available themes with descriptions:

npx stratum-uikit theme list

Slate is installed by default. To add Obsidian or Quartz, copy the theme file from docs-mauve-nine.vercel.app/themes.

Available components

Atoms (15)

atom/Badge atom/Button atom/Card atom/Checkbox atom/Chip atom/Heading atom/Icon atom/IconButton atom/Input atom/Radio atom/Slider atom/Surface atom/Switch atom/Text atom/TextArea

Molecules (6)

molecule/FormField molecule/ListItem molecule/SearchBar molecule/SettingsRow molecule/TagInput molecule/ToggleRow

Organisms (4)

organism/AuthForm organism/ListSection organism/SettingsGroup organism/TopNavBar

Templates (2)

template/AuthLayout template/SettingsLayout

After init — required setup

1. Install peer dependencies:

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

2. Configure path aliases in tsconfig.json:

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

3. Wrap your app root:

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

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

4. Build with a dev client:

npx expo run:ios
# or
npx expo run:android

How it works

Stratum uses the shadcn model — components are copied into your project as source files, not installed as a package dependency. You own the code and can modify it freely.

The CLI reads from a component manifest that encodes dependency chains. When you add organism/AuthForm, it resolves the full tree and copies only the files you're missing.

Docs

Full documentation at docs-mauve-nine.vercel.app

License

MIT