React NativeNative primitives

Lumen for React Native

Use Lumen foundations and native primitives in React Native without depending on CSS, DOM behavior, or the web runtime.

Package@santi020k/lumen-react-native

Install Lumen with its required react-native-svg peer, then mount one LumenProvider near the application root. Add the optional datetime picker only when importing from the /datetime subpath.

Interactive component gallery

Try Lumen on React Native

Explore the React Native components and their interactive states directly in the browser.

View verified React Native runtime capture

Lumen component gallery running in a native React Native Android application

Component library

Start with the building blocks

These primitives share semantic intent with Web, SwiftUI, and Compose while retaining React Native props, refs, and accessibility behavior.

Line chartCompare one or more categorical, numeric, or temporal line series.Calendar heatmapShows daily activity with explicit missing dates and a numeric intensity legend.ButtonRun native actions with shared intent, size, loading, and disabled contracts.Text fieldCollect a single line of text using each platform’s native input and focus behavior.CardGroup related native content on a bordered semantic surface with optional card-level action.AlertPresent inline native feedback using shared neutral, destructive, success, and warning treatments.

Explore all 103 components

Platform contract

Designed for React Native

Native foundations

Numeric dimensions and hexadecimal colors are generated directly from the canonical token source.

Native semantics

Components use native accessibility roles, states, touch targets, and refs without a DOM runtime.

Theme context

The provider follows the system color scheme or an explicit light or dark selection.

Move between platform guidance without losing the shared Lumen design language.