.lumenTheme
Theme
Provide generated semantic colors, spacing, radii, typography, motion, and elevation to native components.
iPhoneiPadMacApple TVApple VisionApple Watch
Apple reference
Native components
Explore all 72 components available for Apple / SwiftUI. Each reference page includes real native usage, the public API, design guidance, and accessibility behavior.
72documented components9 categories
Apple ecosystem
Availability follows the native target
Component badges show the Apple operating systems each API supports. Add theLumenUI product to app targets; widget extensions use the focusedLumenWidgetUI product instead.
iOS 16+iPadOS 16+macOS 13+tvOS 16+visionOS 1+watchOS 9+
Component library
Browse the Apple catalog
No components match that search.
Foundations
2View reference
LumenText
Text
Render native text with shared typography variants and semantic color tones.
iPhoneiPadMacApple TVApple VisionApple Watch
Actions
7LumenIconButton
Icon button
Trigger a native action with a required accessible label and platform icon.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenButton
Button
Run native actions with shared intent, size, loading, and disabled contracts.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenChip
Chip
Represent compact selected, actionable, or removable values with native interaction semantics.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenLink
Link
Open an Apple URL using native SwiftUI behavior and Lumen semantic styling.
iPhoneiPadMacApple Vision
LumenMenu
Menu
Present a native anchored action menu with shared item-state semantics.
iPhoneiPadMacApple VisionApple TV
LumenShareButton
Share button
Open the operating system share surface from a token-aware native action.
iPhoneiPadMacApple VisionApple Watch
LumenWatchActionButton
Forms
14LumenTextField
Text field
Collect a single line of text using each platform’s native input and focus behavior.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenTextarea
Textarea
Capture multiline native text with shared labeling, supporting copy, and error treatment.
iPhoneiPadMacApple Vision
LumenFieldGroup
Field group
Compose related native controls under one label, description, required state, and validation message.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenToggle
LumenSettingsRow
Settings row
Align a setting title and explanation with an optional graphic and trailing native control.
iPhoneiPadMacApple Vision
LumenPicker
Picker
Choose one controlled value through native or accessible menu presentation.
iPhoneiPadMacApple Vision
LumenSlider
Slider
Adjust a continuous or stepped numeric value with a visible formatted label.
iPhoneiPadMacApple Vision
LumenSearchField
Search field
Filter native content with a density-aware search field and clear action.
iPhoneiPadMacApple Vision
LumenPhoneInput
Phone input
Enter an international phone number with searchable countries, calling codes, formatting, validation, and E.164 output.
iPhoneiPadMacApple Vision
LumenCheckbox
Checkbox
Capture a controlled Boolean choice with a generous native target and supporting text.
iPhoneiPadMacApple Vision
LumenRadioGroup
Radio group
Choose one value from a visible, labeled group of native radio options.
iPhoneiPadMacApple Vision
LumenSegmentedControl
Segmented control
Choose one value from a compact row of short peer options.
iPhoneiPadMacApple Vision
LumenDateField
LumenDateRangeField
Date range field
Select an inclusive native date range with coordinated bounds and validation context.
iPhoneiPadMacApple Vision
Layout
9LumenSurface
Surface
Compose content on semantic native backgrounds with shared padding and radius roles.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenDivider
Divider
Separate related native content with the shared semantic line role.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenCard
Card
Group related native content on a bordered semantic surface with optional card-level action.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenDisclosure
Disclosure
Reveal optional native content through a controlled, accessible disclosure trigger.
iPhoneiPadMacApple Vision
LumenButtonGroup
Button group
Lay out a small set of related native actions horizontally or vertically.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenListRow
List row
Compose a flexible native row with leading identity, content, and trailing actions.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenSectionHeader
Section header
Identify a native section with optional supporting copy, count, and trailing actions.
iPhoneiPadMacApple TVApple VisionApple Watch
lumenSheet
Sheet
Present supplemental application content in a controlled native sheet.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenWatchListRow
Navigation
4LumenTabs
LumenNavigationBar
Navigation bar
Select among peer application destinations with native visuals and controlled state.
iPhoneiPadMacApple TVApple VisionApple Watch
lumenTabBarMinimizeBehavior
Tab bar minimization
Let an iPhone native tab bar minimize and expand in response to scrolling.
iPhoneiPad
LumenTabAccessory
Tab accessory
Adapt application-owned accessory content to expanded and inline tab-bar placement.
iPhoneiPad
Data display
18LumenSparkline
Sparkline
Render a compact tokenized trend line with optional area fill.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenLineChart
Line chart
Compare one or more categorical, numeric, or temporal line series.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenBarChart
Bar chart
Compare grouped or stacked categorical magnitudes.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenPieChart
Pie chart
Show a small positive part-to-whole breakdown as a pie or donut.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenScatterChart
Scatter chart
Plot numeric scatter and bubble relationships with semantic series tones.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenHeatmap
Heatmap
Encode a two-dimensional matrix with the canonical sequential scale.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenRangeChart
Range chart
Render ordered low-to-high intervals as a tokenized range band.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenComboChart
Combo chart
Combine bar, line, and area series on one shared value domain.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenIcon
Icon
Display the complete shared interface and brand catalog, with platform-native escape hatches.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenBadge
Badge
Display compact native status and classification labels using semantic tones.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenAvatar
Avatar
Display a native image or fallback identity at shared avatar sizes.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenStat
Stat
Display a compact product metric with semantic tone and optional supporting context.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenGauge
Gauge
Show a normalized circular native metric with a formatted accessible value.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenGraphic
Graphic
Frame application-provided artwork with token-aware glow, grid, or orbit decoration.
iPhoneiPadMacApple Vision
LumenBackdrop
Backdrop
Place a token-aware ambient pattern behind native application content.
iPhoneiPadMacApple Vision
LumenImage
Image
Present native images with shared fit, ratio, radius, and accessibility behavior.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenWatchProgressRing
LumenWatchMetric
Feedback
12LumenSpinner
Spinner
Communicate an indeterminate native loading state with a semantic brand treatment.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenAlert
Alert
Present inline native feedback using shared neutral, destructive, success, and warning treatments.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenProgress
Progress
Show normalized determinate progress with native accessibility semantics.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenSkeleton
Skeleton
Represent loading text, rectangles, and circles with quiet semantic placeholders.
iPhoneiPadMacApple Vision
LumenToast
Toast
Present app-controlled transient native feedback with semantic tone and optional actions.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenEmptyState
Empty state
Explain missing content with supporting copy, an optional graphic, and a recovery action.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenErrorState
Error state
Explain an unavailable region or page and offer application-owned recovery.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenBanner
Banner
Present a structured semantic notice with optional actions and dismissal.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenStatusBar
Status bar
Present compact textual application status with optional trailing content.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenIllustration
Illustration
Render a built-in empty, success, error, or offline semantic scene.
iPhoneiPadMacApple Vision
lumenAlertDialog
Alert dialog
Request a controlled native confirmation with explicit cancel and confirm states.
iPhoneiPadMacApple TVApple VisionApple Watch
LumenWatchStatus
WidgetKit
4LumenWidgetText
Widget text
Render focused WidgetKit text with native scaling and semantic rendering-mode color.
iPhoneiPadMacApple Watch
LumenWidgetIcon
Widget icon
Render a labeled or decorative WidgetKit SF Symbol with semantic tone.
iPhoneiPadMacApple Watch
LumenWidgetBadge
LumenWidgetCompactStat
Widget compact stat
Compose a compact WidgetKit label and value with optional semantic icon.
iPhoneiPadMacApple Watch
macOS utilities
2LumenShortcutRecorder
LumenSymbolPicker / LumenSymbolPickerButton
Real platform output
Rendered by Apple / SwiftUI
This verified capture comes from the native preview host using the package in this repository. The controls are rendered by Apple, not by HTML.
