Components

Component pages are generated from colocated *.docs.mdx files under packages/ui/src/components.

Available Components

• ActivityIndicator: ActivityIndicator is a view that displays a spinning indicator to show that a task is in progress. ActivityIndicator is commonly used to indicate loading states.
• Alert: Alert is a container that presents an alert dialog. Alert displays a modal dialog with a message and optional action buttons.
• 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: Badge is a view that displays a badge, typically used to show counts, status, or labels. Badges are commonly used in navigation items, buttons, and list items.
• Button: Button maps directly to SwiftUI's Button control: a label or icon triggers an action when activated. The React version keeps the same mental model while exposing standard HTML button behavior.
• Canvas: Canvas exposes the browser's drawing surface with a SwiftUI-style dedicated component wrapper.
• Card: Card is a container that presents content on a card. Card is a container with elevated styling, typically used to display related content.
• Chart: Chart presents numeric series as either bar or line marks.
• Color: Color is a view that displays a solid color. Color is used to display color swatches, backgrounds, and visual color indicators.
• 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 an explicit wrapper that annotates changing content on the web.
• 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: DatePicker is a native <input>-backed control for selecting dates and times. It keeps standard form semantics, browser validation, and keyboard behavior.
• DefaultScrollAnchor: DefaultScrollAnchor adapts SwiftUI's defaultScrollAnchor modifier into an explicit wrapper.
• DisclosureGroup: DisclosureGroup is a view that shows or hides its content based on a disclosure state. DisclosureGroup creates an expandable/collapsible section with a toggle control.
• Divider: Divider is a visual element that can be used to separate other content. Dividers are commonly used in Lists to separate items and create visual hierarchy.
• FileImporter: FileImporter presents a button-backed file picker and forwards selected files to your app.
• ForEach: ForEach is a utility function for rendering arrays of data. ForEach is a helper function that maps over an array and renders each item.
• Form: Form is a container for grouping form controls. Form provides a semantic container for form elements and handles form submission.
• Gauge: Gauge shows a current value within a bounded range, matching SwiftUI's summary-style meter while keeping standard progressbar semantics.
• GeometryReader: GeometryReader is a view that provides geometry information to its children, allowing you to create responsive layouts based on container size. GeometryReader gives you access to the size and position of the container.
• 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 is a container for grouping view content. Group is a transparent container that groups views together without adding visual styling. It's useful for applying modifiers to multiple views at once.
• GroupBox: GroupBox is a container that visually groups related content with a border and optional label. GroupBox is similar to Group but adds visual styling with a border and background.
• 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: HStack is a view that arranges its children in a horizontal line. An HStack is a container view that arranges its child views in a horizontal line. You can customize the spacing between views and the alignment of views within the stack.
• Image: Image is a view that displays an image. Use Image to display images from various sources, including bundled images, system images, and images from URLs.
• 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: Label is a view that displays an icon and a title. Label provides a consistent way to display icon-text combinations, commonly used in navigation items and lists.
• LabeledContent: LabeledContent presents a label and related value using the same compact summary pattern as SwiftUI.
• LazyHGrid: LazyHGrid is a container that arranges its children in a horizontal grid, loading them lazily. LazyHGrid creates a horizontal grid layout with lazy loading for performance.
• LazyHStack: LazyHStack is a container that arranges its children horizontally, loading them lazily. LazyHStack is similar to HStack but only renders children that are visible in the viewport, improving performance for long horizontal lists.
• LazyVGrid: LazyVGrid is a container that arranges its children in a grid, loading them lazily. LazyVGrid creates a vertical grid layout with lazy loading for performance.
• LazyVStack: LazyVStack is a container that arranges its children vertically, loading them lazily. LazyVStack is similar to VStack but only renders children that are visible in the viewport, improving performance for long lists.
• LinearGradient: LinearGradient fills a view using color stops distributed along a line.
• Link: Link is a control for navigating to a URL. Links provide a way to navigate to external websites or internal routes.
• List: List is a container that presents rows of data arranged in a single column. Lists are commonly used to display collections of items, often with dividers between items.
• 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: Menu is a view that displays a menu of options. Menu presents a list of actions that can be triggered by the user, typically shown as a dropdown or popover.
• 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: NavigationBar is a component that displays a title, optional back button, and toolbar items. It's automatically used by StandardPage when a navigationTitle is provided, following iOS Human Interface Guidelines and SwiftUI's navigation bar design patterns.
• NavigationLink: NavigationLink is a component that triggers navigation to a destination within a NavigationStack. It can navigate to another component or an external URL, and supports customizable transition animations.
• NavigationSplitView: NavigationSplitView presents sidebar, optional content, and detail columns with a compact fallback mode.
• NavigationStack: NavigationStack is a container that manages a stack of views for navigation. NavigationStack provides navigation functionality similar to iOS navigation controllers, allowing users to navigate forward and backward through a hierarchy of views.
• OutlineGroup: OutlineGroup renders hierarchical content as an expandable outline, aligned with SwiftUI's tree presentation.
• StandardPage: StandardPage is the default page container used in NavigationStack. It provides a standard page layout and can optionally display a navigation bar with title and toolbar items.
• 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: Picker is a control for selecting from a set of mutually exclusive values. Picker displays a list of options and allows the user to select one.
• 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: ProgressView displays determinate or indeterminate task progress using web-native progressbar semantics with a SwiftUI-style value and total API.
• 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: SafeArea is a view that insets its content to respect safe area boundaries. SafeArea ensures content is not obscured by system UI elements like notches, status bars, and home indicators.
• 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: ScrollView is a scrollable view that allows users to scroll through content that exceeds the visible area. ScrollView supports both vertical and horizontal scrolling.
• 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: Section is a container view that groups related content. Sections are commonly used in Lists to organize items into logical groups with optional headers.
• SecureField: SecureField is a control that displays a secure text input field. SecureField is used for password input and other sensitive information, automatically masking the 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: Circle is a circular shape. Circle is used to create circular visual elements, such as avatars, badges, and indicators.
• Ellipse: Ellipse renders an oval surface inside the supplied frame, aligned with SwiftUI's Ellipse.
• Rectangle: Rectangle is a rectangular shape. Rectangle is used to create rectangular visual elements, such as cards, backgrounds, and containers.
• RoundedRectangle: RoundedRectangle is a rectangular shape with rounded corners. RoundedRectangle is commonly used for cards, buttons, and modern UI elements.
• 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: Sheet is a view that presents content as a modal sheet. Sheets slide up from the bottom of the screen and are commonly used for presenting forms, settings, or additional content. When presentationStyle="fullScreen", the same component maps to SwiftUI's .fullScreenCover() mental model on the web.
• Slider: Slider is a control for selecting a value from a bounded linear range of values. Slider is built on a native <input type="range">, so it keeps standard keyboard support, focus behavior, and form participation.
• Spacer: Spacer is a flexible space that expands along the major axis of its parent container. Spacer is used to push content apart and create flexible layouts.
• Stepper: Stepper is a control for incrementing or decrementing a numeric value. It supports both controlled and uncontrolled usage and exposes semantic increment/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: TabView is a view that switches between multiple child views using interactive tabs. TabView provides a tabbed interface for organizing content into separate sections.
• Text: Text is a view that displays one or more lines of read-only text. Use Text to display a string in your app's user interface. The Text view draws a string in a given font, with support for multiple lines, text truncation, and wrapping.
• TextEditor: TextEditor is a native <textarea>-backed multiline editor for longer text such as comments, descriptions, and notes.
• TextField: TextField is a control that displays an editable text interface. TextField is used to collect single-line text input from users.
• 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: Toggle is a control that switches between on and off states. Toggle is commonly used for boolean settings and preferences.
• Toolbar: Toolbar is a view that displays toolbar items. Toolbar provides a consistent way to display actions and controls, typically at the bottom of the screen.
• 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: VStack is a view that arranges its children in a vertical line. A VStack is a container view that arranges its child views in a vertical line. You can customize the spacing between views and the alignment of views within the stack.
• ZStack: ZStack is a view that overlays its children, aligning them in both axes. A ZStack overlays child views on top of each other. You can control the alignment of the children within the ZStack.