Explore SwiftUI
Visually

Discover SwiftUI components and modifiers through visual examples with ready-to-use code samples. Copy, paste, and ship.

WWDC25

What's New in iOS 26

Discover the latest SwiftUI features and enhancements from WWDC25, including iOS 26, watchOS 26, tvOS 26, visionOS 26, and macOS 26.

Glass Effect Container - iOS Light Mode Preview
initializer

Glass Effect Container

A view that combines multiple Liquid Glass shapes into a single shape that can morph individual shapes into one another

Title Toolbar Item Placement - iOS Light Mode Preview
initializers

Title Toolbar Item Placement

Places content in the title area

Navigation Subtitle - iOS Light Mode Preview
modifier

Navigation Subtitle

Configures the view’s subtitle for purposes of navigation, using a localized string

ToolbarItem Shared Background Visibility - iOS Light Mode Preview
modifier

ToolbarItem Shared Background Visibility

Controls the visibility of the glass background effect on items in the toolbar. In certain contexts, such as the navigation bar on iOS and the window toolbar on macOS, toolbar items will be given a glass background effect that is shared with other items in the same logical grouping

Background Extension Effect - iPadOS Light Mode Preview
modifier

Background Extension Effect

Adds the background extension effect to the view. The view will be duplicated into mirrored copies which will be placed around the view on any edge with available safe area. Additionally, a blur effect will be applied on top to blur out the copies

Bottom Accessory - iOS Light Mode Preview

Bottom Accessory

A modifier to place content above the tabs

Button

A control that initiates an action.

Glass Button - iOS Light Mode Preview
style

Glass Button

A button style that applies glass border artwork based on the button’s context

RenameButton - iOS Light Mode Preview
TextField

RenameButton

A button that triggers a standard rename action

EditButton - iOS Light Mode Preview
type

EditButton

A button that toggles the edit mode environment value

PasteButton - iOS Light Mode Preview
type

PasteButton

A system button that reads items from the pasteboard and delivers it to a closure.

Button Tint - iOS Light Mode Preview
style

Button Tint

Sets the buttons tint color

Button Roles - iOS Light Mode Preview
style

Button Roles

A value that describes the purpose of a button.

Button Border Shape - iOS Light Mode Preview

Button Border Shape

A shape used to draw a button’s border.

Button Styles - iOS Light Mode Preview
style

Button Styles

A type that applies standard interaction behavior and a custom appearance to all buttons within a view hierarchy

Button - iOS Light Mode Preview
initializer

Button

Three ways to initialize a button

Toolbars

Provide immediate access to frequently used commands and controls.

Title Toolbar Item Placement - iOS Light Mode Preview
initializers

Title Toolbar Item Placement

Places content in the title area

ToolbarItem Shared Background Visibility - iOS Light Mode Preview
modifier

ToolbarItem Shared Background Visibility

Controls the visibility of the glass background effect on items in the toolbar. In certain contexts, such as the navigation bar on iOS and the window toolbar on macOS, toolbar items will be given a glass background effect that is shared with other items in the same logical grouping

ToolbarSpacer - iOS Light Mode Preview
initializer

ToolbarSpacer

A standard space item in toolbars

Slider

A control for selecting a value from a bounded linear range of values.

Slider Color - iOS Light Mode Preview
style

Slider Color

Customizing the color of the slider

Stepped Min Max Label Slider - iOS Light Mode Preview
initializer

Stepped Min Max Label Slider

Creates a slider to select a value from a given range, subject to a step increment, which displays the provided labels

Stepped Slider - iOS Light Mode Preview
initializer

Stepped Slider

Creates a slider to select a value from a given range, subject to a step increment

Slider - iOS Light Mode Preview
initializer

Slider

Creates a slider to select a value from a given range

DatePicker

A control for selecting an absolute date.

Future DatePicker - iOS Light Mode Preview
initializer

Future DatePicker

Creates an instance that selects multiple dates on or after some start date

MultiDatePicker - iOS Light Mode Preview
initializer

MultiDatePicker

A control for picking multiple dates.

DatePicker Colors - iOS Light Mode Preview
style

DatePicker Colors

Customizing the colors of the date picker

FieldDatePickerStyle - macOS Light Mode Preview
style

FieldDatePickerStyle

A date picker style that displays the components in an editable field

StepperFieldDatePickerStyle - macOS Light Mode Preview
style

StepperFieldDatePickerStyle

A system style that displays the components in an editable field, with adjoining stepper that can increment/decrement the selected component

WheelDatePickerStyle - iOS Light Mode Preview
style

WheelDatePickerStyle

A date picker style that displays each component as columns in a scrollable wheel

GraphicalDatePickerStyle - iOS Light Mode Preview
style

GraphicalDatePickerStyle

A date picker style that displays an interactive calendar or clock

Hour Minute Seconds DatePicker - watchOS Light Mode Preview
initializer

Hour Minute Seconds DatePicker

A DatePicker for just hour, minute, and second.

Future DatePicker - iOS Light Mode Preview
initializer

Future DatePicker

Creates an instance that selects a Date in a closed range

DatePicker Components  - iOS Light Mode Preview
initializer

DatePicker Components

A date picker with only one displayed component

DatePicker - iOS Light Mode Preview
initializer

DatePicker

Creates an instance that selects a Date with an unbounded range

Gauge

A view that shows a value within a range.

Gauge Colors - iOS Light Mode Preview
style

Gauge Colors

Customizing the colors of different styles with minimal effort

CircularGaugeStyle - iOS Light Mode Preview
style

CircularGaugeStyle

A gauge style that displays an open ring with a marker that appears at a point along the ring to indicate the gauge’s current value

 LinearGaugeStyle - iOS Light Mode Preview
style

LinearGaugeStyle

A gauge style that displays a bar with a marker that appears at a point along the bar to indicate the gauge’s current value

AccessoryLinearCapacityGaugeStyle - iOS Light Mode Preview
style

AccessoryLinearCapacityGaugeStyle

A gauge style that displays bar that fills from leading to trailing edges as the gauge’s current value increases

AccessoryLinearGaugeStyle - iOS Light Mode Preview
style

AccessoryLinearGaugeStyle

A gauge style that displays bar with a marker that appears at a point along the bar to indicate the gauge’s current value

LinearCapacityGaugeStyle - iOS Light Mode Preview
style

LinearCapacityGaugeStyle

A gauge style that displays a bar that fills from leading to trailing edges as the gauge’s current value increases

AccessoryCircularCapacityGaugeStyle - iOS Light Mode Preview
style

AccessoryCircularCapacityGaugeStyle

A gauge style that displays a closed ring that’s partially filled in to indicate the gauge’s current value

AccessoryCircularGaugeStyle - iOS Light Mode Preview
style

AccessoryCircularGaugeStyle

A gauge style that displays an open ring with a marker that appears at a point along the ring to indicate the gauge’s current value

Min Max Current Value Gauge - iOS Light Mode Preview
initializer

Min Max Current Value Gauge

Creates a gauge showing a value within a range and describes the gauge’s current, minimum, and maximum values

Current Value Gauge  - iOS Light Mode Preview
initializer

Current Value Gauge

Creates a gauge showing a value within a range and that describes the gauge’s purpose and current value

Gauge - iOS Light Mode Preview
initializer

Gauge

Creates a gauge showing a value within a range and describes the gauge’s purpose and current value

ProgressView

A view that shows the progress toward completion of a task.

ProgressView Colors - iOS Light Mode Preview
style

ProgressView Colors

Customizing the colors of the ProgressView

CircularProgressViewStyle - iOS Light Mode Preview
style

CircularProgressViewStyle

The style of a progress view that uses a circular gauge to indicate the partial completion of an activity

LinearProgressViewStyle - iOS Light Mode Preview
style

LinearProgressViewStyle

A progress view that visually indicates its progress using a horizontal bar

ProgressView - iOS Light Mode Preview
initializer

ProgressView

The different ProgressView initializers

ContentUnavailableView

An interface, consisting of a label and additional content, that you display when the content of your app is unavailable to users.

Content Unavailable - iOS Light Mode Preview
initializer

Content Unavailable

A placeholder for empty results with optional button

Content Unavailable Search Text - iOS Light Mode Preview
type

Content Unavailable Search Text

A pre-built placeholder for empty search results with search text

Content Unavailable Search - iOS Light Mode Preview
type

Content Unavailable Search

A pre-built placeholder for empty search results

Context Menu Preview - iOS Light Mode Preview
modifier

Context Menu Preview

A context menu with custom preview

Menu Action Button - iOS Light Mode Preview
initializer

Menu Action Button

Acts like a button and opens the menu on a secondary gesture

Context Menu - iOS Light Mode Preview
modifier

Context Menu

Adds a context menu to a view.

Nested Menu - iOS Light Mode Preview
content

Nested Menu

A Menu inside a Menu

Menu Divider - iOS Light Mode Preview
content

Menu Divider

A Menu with a Divider

Menu Section - iOS Light Mode Preview
content

Menu Section

A Section inside a Menu

Menu Fixed Order - iOS Light Mode Preview
modifier

Menu Fixed Order

Order items from top to bottom

Menu - iOS Light Mode Preview
initializer

Menu

A control for presenting a menu of actions.

ViewThatFits

A view that adapts to the available space by providing the first child view that fits.

ViewThatFits Vertical - iOS Light Mode Preview
initializer

ViewThatFits Vertical

A view that adapts to the available vertical space by providing the first child view that fits.

ViewThatFits - iOS Light Mode Preview
initializer

ViewThatFits

A view that adapts to the available space by providing the first child view that fits.

Divider

A visual element that can be used to separate other content.

Divider Height - iOS Light Mode Preview
style

Divider Height

Customizing the height of the Divider

Divider Color - iOS Light Mode Preview
style

Divider Color

Customizing the color of the Divider

Vertical Divider - iOS Light Mode Preview
style

Vertical Divider

A vertical visual element that can be used to separate other content

Divider - iOS Light Mode Preview
initializer

Divider

A visual element that can be used to separate other content

GroupBox

A stylized view, with an optional label, that visually collects a logical grouping of content.

GroupBox Background - iOS Light Mode Preview
modifier

GroupBox Background

Set a custom GroupBox background

GroupBox With Label - iOS Light Mode Preview
initializer

GroupBox With Label

A GroupBox with Label

GroupBox - iOS Light Mode Preview
initializer

GroupBox

A simple GroupBox

ScrollView

A scrollable view.

ScrollEdgeEffect Disabled - iOS Light Mode Preview
style

ScrollEdgeEffect Disabled

Disables any scroll edge effects for scroll views within this hierarchy

Hard ScrollEdgeEffect - iOS Light Mode Preview
style

Hard ScrollEdgeEffect

A scroll edge effect with a hard cutoff and dividing line

Color

A representation of a color that adapts to a given context.

Color Opacity - iOS Light Mode Preview
style

Color Opacity

The Color opacity modifier

Color Gradient - iOS Light Mode Preview
modifier

Color Gradient

The Color gradient modifier

UIKit Separator Colors - iOS Light Mode Preview
type

UIKit Separator Colors

The UIKit separator colors that are also used in other components, such as the TextField

UIKit Content Background colors - iOS Light Mode Preview
type

UIKit Content Background colors

The UIKit colors that are also used in other components like in List and GroupBox

UIKit Text Colors - iOS Light Mode Preview
type

UIKit Text Colors

The UIKit text colors that are also used in other components, such as the TextField

UIKit Fill Colors - iOS Light Mode Preview
type

UIKit Fill Colors

UIKit Label Colors - iOS Light Mode Preview
type

UIKit Label Colors

Color Variants - iOS Light Mode Preview
modifier

Color Variants

HierarchicalShapeStyle, a shape style that maps to one of the numbered content styles

Semantic Colors - iOS Light Mode Preview
type

Semantic Colors

Standard Colors - iOS Light Mode Preview
type

Standard Colors

The SwiftUI standard colors

Material

A background material type.

Materials - iOS Light Mode Preview
type

Materials

All materials

HelpLink - macOS Light Mode Preview
initializer

HelpLink

A button with a standard appearance that opens app-specific help documentation

TextFieldLink - iOS Light Mode Preview
initializer

TextFieldLink

A control that requests text input from the user when pressed

Custom Preview Item ShareLink  - iOS Light Mode Preview
initializer

Custom Preview Item ShareLink

Creates an instance, with a custom label, that presents the share interface

ShareLink - iOS Light Mode Preview
initializer

ShareLink

A view that controls a sharing presentation

Link - iOS Light Mode Preview
initializer

Link

A control for navigating to a URL

ControlGroup

A container view that displays semantically-related controls in a visually-appropriate manner for the context

PaletteControlGroupStyle - iOS Light Mode Preview
style

PaletteControlGroupStyle

A control group style that presents its content as a palette.

NavigationControlGroupStyle - iOS Light Mode Preview
style

NavigationControlGroupStyle

The navigation control group style

MenuControlGroupStyle - iOS Light Mode Preview
style

MenuControlGroupStyle

A control group style that presents its content as a menu when the user presses the control, or as a submenu when nested within a larger menu

CompactMenuControlGroupStyle - iOS Light Mode Preview
style

CompactMenuControlGroupStyle

A control group style that presents its content as a compact menu when the user presses the control, or as a submenu when nested within a larger menu

ControlGroup - iOS Light Mode Preview
initializer

ControlGroup

Creates a new ControlGroup with the specified children

Navigation Subtitle - iOS Light Mode Preview
modifier

Navigation Subtitle

Configures the view’s subtitle for purposes of navigation, using a localized string

View

A type that represents part of your app’s user interface and provides modifiers that you use to configure views

ControlSize - iOS Light Mode Preview
modifier

ControlSize

A control version that is the default size

Background Extension Effect - iPadOS Light Mode Preview
modifier

Background Extension Effect

Adds the background extension effect to the view. The view will be duplicated into mirrored copies which will be placed around the view on any edge with available safe area. Additionally, a blur effect will be applied on top to blur out the copies

Glass effect - iOS Light Mode Preview
modifier

Glass effect

Applies the Liquid Glass effect to a view

TabView

A view that switches between multiple child views using interactive user interface elements

Bottom Accessory - iOS Light Mode Preview

Bottom Accessory

A modifier to place content above the tabs

Hide Tab Bar On Scroll Down - iOS Light Mode Preview
modifier

Hide Tab Bar On Scroll Down

Minimize the tab bar when downwards scrolling starts. Minimizing is supported for tab bars on only iPhone

GlassEffectContainer

A view that combines multiple Liquid Glass shapes into a single shape that can morph individual shapes into one another.

Glass Effect Container - iOS Light Mode Preview
initializer

Glass Effect Container

A view that combines multiple Liquid Glass shapes into a single shape that can morph individual shapes into one another

Shapes

The different SwiftUI shapes

ContainerRelativeShape - iOS Light Mode Preview
modifier

ContainerRelativeShape

A shape that is replaced by an inset version of the current container shape. If no container shape was defined, is replaced by a rectangle