LumenProvider
Theme
Provide generated semantic colors, spacing, radii, typography, motion, and elevation to native components.
React Native reference
Native components
Explore all 61 components available for React Native. Each reference page includes real native usage, the public API, design guidance, and accessibility behavior.
61documented components7 categories
Component library
Browse the React Native catalog
No components match that search.
Foundations
2View reference
LumenText
Text
Render native text with shared typography variants and semantic color tones.
Actions
5LumenIconButton
Icon button
Trigger a native action with a required accessible label and platform icon.
LumenButton
Button
Run native actions with shared intent, size, loading, and disabled contracts.
LumenChip
Chip
Represent compact selected, actionable, or removable values with native interaction semantics.
LumenMenu
Menu
Present a native anchored action menu with shared item-state semantics.
LumenShareButton
Share button
Open the operating system share surface from a token-aware native action.
Forms
14LumenTextField
Text field
Collect a single line of text using each platform’s native input and focus behavior.
LumenTextarea
Textarea
Capture multiline native text with shared labeling, supporting copy, and error treatment.
LumenFieldGroup
Field group
Compose related native controls under one label, description, required state, and validation message.
LumenToggle
Toggle
Present a labeled native switch with Lumen brand tint.
LumenSettingsRow
Settings row
Align a setting title and explanation with an optional graphic and trailing native control.
LumenPicker
Picker
Choose one controlled value through native or accessible menu presentation.
LumenSlider
Slider
Adjust a continuous or stepped numeric value with a visible formatted label.
LumenSearchField
Search field
Filter native content with a density-aware search field and clear action.
LumenPhoneInput
Phone input
Enter an international phone number with searchable countries, calling codes, formatting, validation, and E.164 output.
LumenCheckbox
Checkbox
Capture a controlled Boolean choice with a generous native target and supporting text.
LumenRadioGroup
Radio group
Choose one value from a visible, labeled group of native radio options.
LumenSegmentedControl
Segmented control
Choose one value from a compact row of short peer options.
LumenDateField
Date field
Select a native date with bounds and validation context.
LumenDateRangeField
Date range field
Select an inclusive native date range with coordinated bounds and validation context.
Layout
8LumenSurface
Surface
Compose content on semantic native backgrounds with shared padding and radius roles.
LumenDivider
Divider
Separate related native content with the shared semantic line role.
LumenCard
Card
Group related native content on a bordered semantic surface with optional card-level action.
LumenDisclosure
Disclosure
Reveal optional native content through a controlled, accessible disclosure trigger.
LumenButtonGroup
Button group
Lay out a small set of related native actions horizontally or vertically.
LumenListRow
List row
Compose a flexible native row with leading identity, content, and trailing actions.
LumenSectionHeader
Section header
Identify a native section with optional supporting copy, count, and trailing actions.
LumenSheet
Sheet
Present supplemental application content in a controlled native sheet.
Navigation
4LumenTabs
Tabs
Switch a controlled native content panel from an accessible tab list.
LumenNavigationBar
Navigation bar
Select among peer application destinations with native visuals and controlled state.
LumenCollapsibleNavigationBar
Collapsible navigation bar
Animate a React Native destination bar in response to native vertical scroll travel.
LumenNavigationAccessory
Navigation accessory
Place compact application status or actions above React Native bottom navigation.
Data display
16LumenSparkline
Sparkline
Render a compact tokenized trend line with optional area fill.
LumenLineChart
Line chart
Compare one or more categorical, numeric, or temporal line series.
LumenBarChart
Bar chart
Compare grouped or stacked categorical magnitudes.
LumenPieChart
Pie chart
Show a small positive part-to-whole breakdown as a pie or donut.
LumenScatterChart
Scatter chart
Plot numeric scatter and bubble relationships with semantic series tones.
LumenHeatmap
Heatmap
Encode a two-dimensional matrix with the canonical sequential scale.
LumenRangeChart
Range chart
Render ordered low-to-high intervals as a tokenized range band.
LumenComboChart
Combo chart
Combine bar, line, and area series on one shared value domain.
LumenIcon
Icon
Display the complete shared interface and brand catalog, with platform-native escape hatches.
LumenBadge
Badge
Display compact native status and classification labels using semantic tones.
LumenAvatar
Avatar
Display a native image or fallback identity at shared avatar sizes.
LumenStat
Stat
Display a compact product metric with semantic tone and optional supporting context.
LumenGauge
Gauge
Show a normalized circular native metric with a formatted accessible value.
LumenGraphic
Graphic
Frame application-provided artwork with token-aware glow, grid, or orbit decoration.
LumenBackdrop
Backdrop
Place a token-aware ambient pattern behind native application content.
LumenImage
Image
Present native images with shared fit, ratio, radius, and accessibility behavior.
Feedback
12LumenSpinner
Spinner
Communicate an indeterminate native loading state with a semantic brand treatment.
LumenAlert
Alert
Present inline native feedback using shared neutral, destructive, success, and warning treatments.
LumenProgress
Progress
Show normalized determinate progress with native accessibility semantics.
LumenSkeleton
Skeleton
Represent loading text, rectangles, and circles with quiet semantic placeholders.
LumenToast
Toast
Present app-controlled transient native feedback with semantic tone and optional actions.
LumenEmptyState
Empty state
Explain missing content with supporting copy, an optional graphic, and a recovery action.
LumenErrorState
Error state
Explain an unavailable region or page and offer application-owned recovery.
LumenBanner
Banner
Present a structured semantic notice with optional actions and dismissal.
LumenStatusBar
Status bar
Present compact textual application status with optional trailing content.
LumenRefreshControl
Refresh control
Apply Lumen semantic colors to React Native pull-to-refresh behavior.
LumenIllustration
Illustration
Render a built-in empty, success, error, or offline semantic scene.
LumenAlertDialog
Alert dialog
Request a controlled native confirmation with explicit cancel and confirm states.
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
