Components

247 families — primitives through composed patterns — installed as source you own, with named design variants as their own items.

Install

npx @lumioui/cli add button
npx @lumioui/cli add pro/paywall-sheet   # pro items take the pro/ prefix

The CLI writes components/ui/<name>/<name>.tsx and installs the dependencies the component declares (react-native-svg, expo-haptics, …) — npx @lumioui/cli init sets up Reanimated + NativeWind first.

Variants

Design variants are separate registry items named <family>-<variant> — button-glass writes components/ui/button/variants/glass.tsx. From the family name, --design resolves the same item:

npx @lumioui/cli add button-glass        # direct
npx @lumioui/cli add button --design glass  # same item, resolved

Props

Every component ships a typed <Name>Props interface; the catalog's detail pages render it as a live table driven against the real preview. Handlers are optional — components mount complete with no wiring.

Behavior is wired

Haptics run through useHaptic(), motion uses the library's spring tokens only, touch targets keep ≥44pt, and every animation honors reduced-motion. Nothing to re-glue.

Theming

Components style through the semantic classes in Theming (bg-card, text-foreground, …) — light/dark follows your ThemeProvider; nothing is hard-coded to a scheme.

Expo Go

Most free components run inside Expo Go — the catalog marks compatibility per item (expoGoCompatible), so anything needing a dev-build says so up front.

Browsing + listing

npx @lumioui/cli list --type component   # grouped by category

The catalog filters by category and dependency (?dep=/?glyph=), and each family has a detail page — /components/button — with the live prop playground, variants, and install bar.

// ask an llm chatgpt ↗ · claude ↗