LumenProvider
Theme
Provide generated semantic colors, spacing, radii, typography, motion, and elevation to native components.
React Native reference
Native components
Explore all 103 components available for React Native. Each reference page includes real native usage, the public API, design guidance, and accessibility behavior.
103documented components7 categories
Component library
Browse the React Native catalog
No components match that search.
Foundations
2
View reference
LumenText
Text
Render native text with shared typography variants and semantic color tones.
Actions
7LumenIconButton
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.
LumenTooltip
Tooltip
Show native contextual help around an independently accessible anchor.
LumenCommand
Command
Named command search, enabled highlight navigation and a usable close path.
Forms
28LumenTextField
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.
LumenTimeField
Time field
Choose a local time with native clock or keyboard input and explicit confirmation.
LumenAutocomplete
Autocomplete
Select from application-provided search results with loading, empty, and retry feedback.
LumenNumberField
Number field
Edit localized numeric drafts with exact decimal steps and inclusive bounds.
LumenPasswordField
Password field
Enter passwords with transient visibility and native credential autofill hints.
LumenInputOTP
Input OTP
Enter numeric verification codes with native paste and autofill integration.
LumenMultiSelect
Multi select
Select multiple searchable options with controlled values and result states.
LumenRangeSlider
Range slider
Choose bounded numeric intervals with independently adjustable native endpoints.
LumenMentions
Mentions
Insert literal mention suggestions into controlled native multiline text.
LumenRating
Rating
Named whole-number rating options with controlled values and read-only support.
LumenTransfer
Transfer
Select controlled native transfer values with stable identities.
LumenTreeSelect
Tree select
Select controlled native tree select values with stable identities.
LumenColorPicker
Color picker
Edit controlled native colors with validated text, channels and optional alpha.
LumenCalendar
Calendar
Select bounded Gregorian civil dates in a controlled month grid.
LumenCascader
Cascader
Select a stable leaf path through native branch drill-down.
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
6LumenTabs
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.
LumenTour
Tour
Guide users through controlled steps around measured native targets.
LumenBreadcrumb
Breadcrumb
Named ancestor navigation with a noninteractive current destination.
Data display
39LumenSparkline
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.
LumenWaterfallChart
Waterfall chart
Explain a balance using signed changes and explicit totals.
LumenLollipopChart
Lollipop chart
Rank categories using a dot and a zero-based stem.
LumenDumbbellChart
Dumbbell chart
Compare two measurements per category with connected dots.
LumenCalendarHeatmap
Calendar heatmap
Shows daily activity with explicit missing dates and a numeric intensity legend.
LumenFunnelChart
Funnel chart
Compares ordered nonnegative conversion stages with exact measurements.
LumenBoxPlot
Box plot
Shows precomputed quartiles, whiskers and outliers on one numeric scale.
LumenBulletChart
Bullet chart
Compare an actual value with a target and labeled performance ranges.
LumenHistogram
Histogram
Show a distribution with explicit bins, accurate interval widths, and count or density.
LumenHeatmap
Heatmap
Encode a matrix with sequential or diverging color scales, labeled axes, and a numeric legend.
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.
LumenImageComparison
Image comparison
Compare two images with a controlled reveal and native adjustable slider.
LumenMediaViewport
Media viewport
Inspect media with controlled bounded zoom, pan and fit.
LumenMediaThumbnail
Media thumbnail
Select media with a named button, order and explicit loading/error state.
LumenMediaFilmstrip
Media filmstrip
Browse ordered media with host-formatted selected count and sibling move actions.
LumenTable
Table
Host-formatted stable records in phone-friendly labeled cells.
LumenDataTable
Data table
Controlled sorting and selection retain hidden IDs and respect disabled rows.
LumenTimeline
Timeline
Named chronological content retaining host controls and decorative connectors.
LumenTreeGrid
Tree grid
Named hierarchical disclosures and labeled cells with inherited disabled state.
LumenCarousel
Carousel
Page through controlled native slides with accessible navigation.
LumenSchedule
Schedule
Present timed native day columns with all-day bands and overlap lanes.
LumenAgenda
Agenda
Present chronological timed and all-day events under civil-day headings.
LumenKanbanBoard
Kanban board
Move controlled cards between capacity-limited native board columns.
LumenKanbanColumn
Kanban column
Reorder rich native cards within a controlled standalone column.
LumenQRCode
QR code
Render accessible offline QR codes from controlled Unicode values.
LumenTree
Tree
Browse hierarchical records with controlled disclosure and selection.
Feedback
13LumenSpinner
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.
LumenStepper
Stepper
Host-owned step progress with localized complete, current and upcoming 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
