Explore SwiftUI
Visually
Discover SwiftUI components and modifiers through visual examples with ready-to-use code samples. Copy, paste, and ship.
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
A view that combines multiple Liquid Glass shapes into a single shape that can morph individual shapes into one another
Title Toolbar Item Placement
Places content in the title area
Navigation Subtitle
Configures the view’s subtitle for purposes of navigation, using a localized string
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
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
TabView Bottom Accessory Placement
A placement of the bottom accessory in a tab view. You can use this to adjust the content of the accessory view based on the placement
Glass Button Styles
A button style that applies glass border artwork based on the button’s context
RenameButton
A button that triggers a standard rename action
EditButton
A button that toggles the edit mode environment value
PasteButton
A system button that reads items from the pasteboard and delivers it to a closure.
Button Tint
Sets the buttons tint color
Button Roles
A value that describes the purpose of a button.
Button Border Shape
A shape used to draw a button’s border.
Button Styles
A type that applies standard interaction behavior and a custom appearance to all buttons within a view hierarchy
Button
Three ways to initialize a button
Toolbars
Provide immediate access to frequently used commands and controls.
Title Toolbar Item Placement
Places content in the title area
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
A standard space item in toolbars
Slider
A control for selecting a value from a bounded linear range of values.
Slider Color
Customizing the color of the slider
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
Creates a slider to select a value from a given range, subject to a step increment
Slider
Creates a slider to select a value from a given range
DatePicker
A control for selecting an absolute date.
Future DatePicker
Creates an instance that selects multiple dates on or after some start date
MultiDatePicker
A control for picking multiple dates.
DatePicker Colors
Customizing the colors of the date picker
FieldDatePickerStyle
A date picker style that displays the components in an editable field
StepperFieldDatePickerStyle
A system style that displays the components in an editable field, with adjoining stepper that can increment/decrement the selected component
WheelDatePickerStyle
A date picker style that displays each component as columns in a scrollable wheel
GraphicalDatePickerStyle
A date picker style that displays an interactive calendar or clock
Hour Minute Seconds DatePicker
A DatePicker for just hour, minute, and second.
Future DatePicker
Creates an instance that selects a Date in a closed range
DatePicker Components
A date picker with only one displayed component
DatePicker
Creates an instance that selects a Date with an unbounded range
Gauge
A view that shows a value within a range.
Gauge Colors
Customizing the colors of different styles with minimal effort
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
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
A gauge style that displays bar that fills from leading to trailing edges as the gauge’s current value increases
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
A gauge style that displays a bar that fills from leading to trailing edges as the gauge’s current value increases
AccessoryCircularCapacityGaugeStyle
A gauge style that displays a closed ring that’s partially filled in to indicate the gauge’s current value
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
Creates a gauge showing a value within a range and describes the gauge’s current, minimum, and maximum values
Current Value Gauge
Creates a gauge showing a value within a range and that describes the gauge’s purpose and current value
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
Customizing the colors of the ProgressView
CircularProgressViewStyle
The style of a progress view that uses a circular gauge to indicate the partial completion of an activity
LinearProgressViewStyle
A progress view that visually indicates its progress using a horizontal bar
ProgressView
The different ProgressView initializers
Content Unavailable
A placeholder for empty results with optional button
Content Unavailable Search Text
A pre-built placeholder for empty search results with search text
Content Unavailable Search
A pre-built placeholder for empty search results
Context Menu Preview
A context menu with custom preview
Menu Action Button
Acts like a button and opens the menu on a secondary gesture
Context Menu
Adds a context menu to a view.
Nested Menu
A Menu inside a Menu
Menu Divider
A Menu with a Divider
Menu Section
A Section inside a Menu
Menu Fixed Order
Order items from top to bottom
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
A view that adapts to the available vertical space by providing the first child view that fits.
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
Customizing the height of the Divider
Divider Color
Customizing the color of the Divider
Vertical Divider
A vertical visual element that can be used to separate other content
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
Set a custom GroupBox background
GroupBox With Label
A GroupBox with Label
GroupBox
A simple GroupBox
ScrollView
A scrollable view.
ScrollEdgeEffect Disabled
Disables any scroll edge effects for scroll views within this hierarchy
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
The Color opacity modifier
Color Gradient
The Color gradient modifier
UIKit Separator Colors
The UIKit separator colors that are also used in other components, such as the TextField
UIKit Content Background colors
The UIKit colors that are also used in other components like in List and GroupBox
UIKit Text Colors
The UIKit text colors that are also used in other components, such as the TextField
UIKit Fill Colors
UIKit Label Colors
Color Variants
HierarchicalShapeStyle, a shape style that maps to one of the numbered content styles
Semantic Colors
Standard Colors
The SwiftUI standard colors
Material
A background material type.
Materials
All materials
Link
A control for navigating to a URL
HelpLink
A button with a standard appearance that opens app-specific help documentation
TextFieldLink
A control that requests text input from the user when pressed
Custom Preview Item ShareLink
Creates an instance, with a custom label, that presents the share interface
ShareLink
A view that controls a sharing presentation
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
A control group style that presents its content as a palette.
NavigationControlGroupStyle
The navigation control group 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
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
Creates a new ControlGroup with the specified children
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
A control version that is the default size
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
Applies the Liquid Glass effect to a view
TabView
A view that switches between multiple child views using interactive user interface elements
TabView Bottom Accessory Placement
A placement of the bottom accessory in a tab view. You can use this to adjust the content of the accessory view based on the placement
Bottom Accessory
A modifier to place content above the tabs
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
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
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