Screens

334 production-shaped app surfaces — validation states, haptics, and mount choreography already wired. Source you own, not a preview.

Install

npx @lumioui/cli add pro/auth-login
npx @lumioui/cli add pro/chat-chat-thread pro/ecommerce-cart

Every screen is a Pro item — prefix the full flow-name with pro/. The CLI writes screens/auth/login.tsx plus the shared kit and installs every component the screen touches (button, input, glass, …) from registryDependencies.

What lands on disk

screens/
  auth/login.tsx     ← the screen
  shared.tsx         ← the kit: Mount, Press, World, ambient loops

shared.tsx ships inside every screen payload with identical content, so the second add dedupes it — mount animation (staggered fade-rise, reduced-motion gated), haptic press feedback, the per-flow World palette, and ambient loops (Drift, PulseRing, KenBurns) all live there once.

Props

<LoginScreen
  onLogin={(email, pw, remember) => auth.signIn(email, pw)}
  onSignUp={() => router.push("/signup")}
  onForgotPassword={() => router.push("/forgot")}
/>

Every handler is optional — a screen renders complete with zero wiring, so you can mount it first and wire routes later. Props named default* (e.g. defaultEmail) exist only to fill the demos and previews; production hosts omit them.

Theming

Screens style through the semantic classes in Theming only — World inside the file sets the flow's palette accents. Drop the component under your ThemeProvider and light/dark work; nothing is hard-coded to a scheme.

Browsing + listing

npx @lumioui/cli list --type screen   # grouped by flow

The catalog filters by flow (auth, chat, ecommerce, finance, food, health, media, misc, productivity, social, travel, core), and each screen has a detail page — /screens/auth-login — with its prop signature, component deps, and theme/platform shots.

// ask an llm chatgpt ↗ · claude ↗