Components

Start with Button, TextField, VStack, or Sheet. Each reference includes a live example, code, requirements and the complete API.

Use search to find a component by name. Check the capability matrix for web adaptations and experimental features.

All components

• ActivityIndicator: Show that an asynchronous task is in progress.
• Alert: Present a short message that requires attention or a decision.
• AllowsHitTesting: AllowsHitTesting adapts SwiftUI's allowsHitTesting(_:) modifier into an explicit interaction wrapper for web overlays and disabled hit regions.
• AngularGradient: AngularGradient sweeps color stops around a center point.
• AspectRatio: Constrains content to a target ratio, aligned with SwiftUI's aspectRatio modifier.
• AsyncImage: AsyncImage loads remote images and exposes simple loading and failure phases, aligned with SwiftUI's AsyncImage mental model.
• Badge: Display a short count or status beside related content.
• Button: A native HTML button with SwiftUI-inspired styling. Pass ordinary button props and an onClick handler; use type="submit" inside a form.
• Canvas: Canvas exposes the browser's drawing surface with a SwiftUI-style dedicated component wrapper.
• Card: Visually group related content in an elevated container.
• Chart: Chart presents numeric series as either bar or line marks.
• Color: Render a CSS color swatch or background.
• ColorPicker: ColorPicker wraps the native color input while keeping SwiftUI-style label and value semantics.
• ConfirmationDialog: ConfirmationDialog presents a stack of actions that asks the user to confirm an intent. It aligns with SwiftUI's confirmationDialog mental model while using web-native dialog semantics.
• ContainerBackground: ContainerBackground adapts SwiftUI's containerBackground(_:for:) modifier into an explicit surface wrapper for navigation and grouped content areas.
• ContainerRelativeFrame: Sizes content relative to its container using SwiftUI-style count, span, and spacing semantics.
• ContentMargins: Adds configurable content insets using SwiftUI-style edge semantics.
• ContentTransition: ContentTransition adapts SwiftUI's content-transition modifiers into brief feedback when its content changes.
• ContentUnavailableView: ContentUnavailableView presents polished empty states for missing data, search misses, and first-run experiences.
• ContextMenu: ContextMenu presents a menu of actions from a context interaction. On the web this maps to the native right-click gesture while preserving SwiftUI's contextual action model.
• ControlGroup: ControlGroup clusters related actions under a shared label. The component keeps SwiftUI's grouped-control mental model while using standard web grouping semantics.
• DatePicker: Select a date or time using the browser’s native input.
• DefaultScrollAnchor: DefaultScrollAnchor adapts SwiftUI's defaultScrollAnchor modifier into an explicit wrapper.
• DisclosureGroup: Show or hide related content behind an expandable label.
• Divider: Separate adjacent content with a decorative line.
• FileImporter: FileImporter presents a button-backed file picker and forwards selected files to your app.
• ForEach: Render an array with a stable key and a render function.
• Form: Group input controls in a native HTML form.
• Gauge: Gauge shows a current value within a bounded range, matching SwiftUI's summary-style meter while keeping standard progressbar semantics.
• GeometryReader: Read a container’s size and viewport position through a render function.
• Glass: Add an optional glass material to a custom control surface.
• Grid: Grid arranges content in explicit rows and columns, following SwiftUI's non-lazy grid model.
• GridRow: GridRow defines a single row inside Grid.
• Group: Group children in an unstyled HTML container.
• GroupBox: Visually group related content with an optional label.
• HelpLink: HelpLink presents a dedicated support affordance aligned with SwiftUI's HelpLink, adapted to the web as an anchor.
• HoverEffect: HoverEffect adapts SwiftUI's hover feedback modifiers into explicit pointer-oriented wrappers for the web.
• HSplitView: HSplitView lays out multiple panes side by side, adapting SwiftUI's horizontal split container model to a proportional flex layout on the web.
• HStack: Arrange children in a horizontal row with configurable spacing and vertical alignment.
• Image: Display an image using a native HTML img element.
• Inspector: Inspector presents supplemental controls or contextual details beside primary content.
• KeyframeAnimator: KeyframeAnimator steps through explicit frame values over time, exposing each frame to a render function.
• Label: Combine a title with an optional icon.
• LabeledContent: LabeledContent presents a label and related value using the same compact summary pattern as SwiftUI.
• LazyHGrid: A measured, virtualized horizontal grid. Only the viewport and a small overscan window mount, including when scrolling the page.
• LazyHStack: A measured, virtualized horizontal stack. Only the viewport and a small overscan window mount, including when scrolling the page.
• LazyVGrid: A measured, virtualized vertical grid. Only the viewport and a small overscan window mount, including when scrolling the page.
• LazyVStack: A measured, virtualized vertical stack. Only the viewport and a small overscan window mount, including when scrolling the page.
• LinearGradient: LinearGradient fills a view using color stops distributed along a line.
• Link: Open a URL through a native anchor.
• List: Group rows and sections in a list-style container.
• MapView: MapView embeds a coordinate-based map surface using a web map provider while keeping SwiftUI's location-focused mental model.
• MatchedGeometryEffect: MatchedGeometryEffect adapts SwiftUI's matchedGeometryEffect modifier into explicit shared metadata on the web.
• Menu: Open a positioned menu of actions from a trigger.
• MeshGradient: MeshGradient adapts SwiftUI's mesh gradient concept into a layered CSS radial-gradient surface for the web.
• MultiDatePicker: MultiDatePicker adapts SwiftUI's multi-date selection model to the web by combining a native date input with an ordered list of selected dates.
• NavigationBar: Display a title, optional back button and page actions.
• NavigationLink: Navigate to a React page inside NavigationStack, open a URL, or dismiss the current page.
• NavigationSplitView: NavigationSplitView presents sidebar, optional content, and detail columns with a compact fallback mode.
• NavigationStack: Manage an in-memory stack of React pages with forward and back navigation.
• OutlineGroup: OutlineGroup renders hierarchical content as an expandable outline, aligned with SwiftUI's tree presentation.
• StandardPage: Give a navigation page a title, toolbar and content area.
• PasteButton: PasteButton reads plain text from the clipboard and forwards it to your app, aligned with SwiftUI's clipboard action model.
• PhaseAnimator: PhaseAnimator sequences a finite set of named phases and re-renders your content with the current phase value.
• PhotosPicker: PhotosPicker opens an image-only asset chooser and forwards selected files, keeping SwiftUI's media selection intent while relying on the browser's native file picker.
• Picker: Choose one value from a native select control.
• Popover: Popover presents lightweight content anchored to another control. It aligns with SwiftUI's popover presentation while keeping web-friendly dialog semantics.
• PresentationBackground: PresentationBackground adapts SwiftUI's presentationBackground modifier into an explicit surface wrapper.
• PresentationCompactAdaptation: PresentationCompactAdaptation adapts SwiftUI's presentationCompactAdaptation modifier into an explicit wrapper.
• PresentationCornerRadius: PresentationCornerRadius adapts SwiftUI's presentationCornerRadius modifier into an explicit wrapper.
• PresentationDragIndicator: PresentationDragIndicator adapts SwiftUI's presentationDragIndicator modifier into an explicit wrapper.
• ProgressView: Display measurable progress or an indeterminate task.
• RadialGradient: RadialGradient fills a view outward from a center point using color stops.
• Redacted: Redacted adapts SwiftUI's redacted modifier into an explicit placeholder or privacy wrapper on the web.
• Refreshable: Refreshable adapts SwiftUI's .refreshable modifier into an explicit web container with a refresh affordance and busy state.
• SafeArea: Inset content using browser safe-area environment variables.
• SafeAreaInset: SafeAreaInset adapts SwiftUI's .safeAreaInset modifier into an explicit layout container for the web.
• ScenePadding: ScenePadding adapts SwiftUI's scenePadding modifier into an explicit layout wrapper for web scenes and grouped screens.
• ScrollBounceBehavior: ScrollBounceBehavior adapts SwiftUI's scrollBounceBehavior modifier into an explicit wrapper.
• ScrollClipDisabled: ScrollClipDisabled adapts SwiftUI's scrollClipDisabled modifier into an explicit wrapper.
• ScrollIndicators: ScrollIndicators adapts SwiftUI's scrollIndicators modifier into an explicit wrapper.
• ScrollTarget: ScrollTarget marks a stable scroll destination that can be resolved by ScrollViewReader.
• ScrollTransition: ScrollTransition adapts SwiftUI's scrollTransition modifier into an explicit wrapper for web layouts.
• ScrollView: Scroll content vertically or horizontally inside a bounded container.
• ScrollViewReader: ScrollViewReader exposes a proxy that can scroll to child ScrollTarget anchors by identifier.
• SearchField: SearchField provides a dedicated search input with a value-first callback, aligned with SwiftUI's searchable input patterns while remaining an explicit web control.
• Section: Group related rows under an optional header.
• SecureField: Enter a password through a native, visually masked input.
• SettingsLink: SettingsLink mirrors SwiftUI's settings-entry affordance while staying web-native as a standard link.
• Capsule: Capsule renders a pill-shaped surface with fully rounded ends, aligned with SwiftUI's Capsule mental model.
• Circle: Draw a circular shape.
• Ellipse: Ellipse renders an oval surface inside the supplied frame, aligned with SwiftUI's Ellipse.
• Rectangle: Draw a rectangular shape with square corners.
• RoundedRectangle: Draw a rectangle with rounded corners.
• UnevenRoundedRectangle: UnevenRoundedRectangle extends the rounded rectangle shape by letting each corner radius vary independently.
• ShareLink: ShareLink presents a platform share action. On the web it uses the Web Share API when available and falls back to opening shareable URLs.
• Sheet: A modal presentation with a focus trap, background isolation and scroll lock. Set isPresented and close it from onDismiss.
• Slider: Select a numeric value with a native range input.
• Spacer: Distribute unused space along a stack’s main axis.
• Stepper: Adjust a number with increment and decrement buttons.
• SwipeActions: SwipeActions adapts SwiftUI's swipe-revealed row actions into an explicit, accessible web row wrapper. On the web, actions are revealed with a toggle instead of relying on touch-only gestures.
• SymbolEffect: SymbolEffect adapts SwiftUI's symbol animation modifiers into an explicit wrapper component for the web.
• Table: Table renders structured tabular data with explicit TableColumn definitions, aligned with SwiftUI's table mental model.
• TableColumn: TableColumn defines a single column inside Table, including its header title and row value renderer.
• TabView: Switch between named content panels.
• Text: Display inline text with optional line truncation.
• TextEditor: Edit multiline text in a native textarea.
• TextField: Edit a single line of text using a native input.
• TextSelection: TextSelection adapts SwiftUI's textSelection(_:) modifier into an explicit wrapper that controls browser text selection semantics.
• TimelineView: TimelineView re-renders its content on a fixed cadence, matching SwiftUI's scheduled-update mental model with a simple interval-based web adaptation.
• Toggle: Turn a boolean setting on or off.
• Toolbar: Arrange actions in a horizontal toolbar.
• UIProvider: Configure theme, accent color, design tokens and glass for a React subtree.
• Unredacted: Unredacted adapts SwiftUI's unredacted modifier into an explicit wrapper that opts nested content out of placeholder styling.
• VideoPlayer: VideoPlayer wraps the native browser video element while keeping SwiftUI's dedicated media-player mental model.
• ViewThatFits: ViewThatFits picks the first layout variant that fits the available width. The web version uses data-min-width hints on child views to choose an appropriate variant.
• VisualEffect: VisualEffect adapts SwiftUI's visual-effect modifiers into an explicit surface wrapper for the web.
• VSplitView: VSplitView stacks multiple panes vertically while preserving the SwiftUI split-view mental model in a web-native layout container.
• VStack: Arrange children vertically with configurable spacing and horizontal alignment.
• ZStack: Layer children in the same grid area.