Installation

Works with Expo (SDK 54+) and bare React Native 0.74+.

1. Set up your project

npx @lumioui/cli init

Run it in your project root. It detects expo vs bare and installs nativewind, react-native-reanimated, react-native-safe-area-context, react-native-svg, clsx and tailwind-merge (through npx expo install on Expo, so versions match your SDK). It copies the shared theme, tokens and hooks into lib/lumioui, and writes global.css (the theme colours), tailwind.config.js, babel.config.js, metro.config.js and nativewind-env.d.ts — only the ones you don't already have. If you keep your own, it lists what to add.

2. Load the theme

In your root layout (app/_layout.tsx with Expo Router, or App.tsx):

import "./global.css";
import { ThemeProvider } from "./lib/lumioui";

export default function RootLayout() {
  return <ThemeProvider>{/* your app */}</ThemeProvider>;
}

Adjust the paths to where your layout lives. Restart the bundler with a clear cache once: npx expo start -c.

3. Add components

npx @lumioui/cli add button card input

npx @lumioui/cli add --all --dry-run

Files land in components/ui/<name> and are yours to edit. Anything a component builds on comes with it.

4. Pro components

export LUMIO_LICENSE_KEY=lumio_…   # create one at /account
npx @lumioui/cli add pro/paywall-sheet

Pro items that need native code warn when expoGoCompatible: false — use a dev build, not Expo Go.

5. Verify

npx @lumioui/cli doctor
npx @lumioui/cli list --pro

// ask an llm chatgpt ↗ · claude ↗