--- title: "View Components | Explore SwiftUI" description: "A type that represents part of your app’s user interface and provides modifiers that you use to configure views" canonical_url: "https://exploreswiftui.com/library/view" meta: author: "Explore SwiftUI" "og:description": "A type that represents part of your app’s user interface and provides modifiers that you use to configure views" "og:image": "https://exploreswiftui.com/_og/d/c_Default%2Ctitle_View%2BComponents%2Cdescription_Explore%2B15%2BSwiftUI%2Bcomponents%2Bvisually%2Cp_Ii9saWJyYXJ5L3ZpZXci%2Cs_FJrvuFyh_Rb3kAWB.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "View Components | Explore SwiftUI" "twitter:description": "A type that represents part of your app’s user interface and provides modifiers that you use to configure views" "twitter:image": "https://exploreswiftui.com/_og/d/c_Default%2Ctitle_View%2BComponents%2Cdescription_Explore%2B15%2BSwiftUI%2Bcomponents%2Bvisually%2Cp_Ii9saWJyYXJ5L3ZpZXci%2Cs_FJrvuFyh_Rb3kAWB.png" "twitter:title": "View Components | Explore SwiftUI" --- > Index of every page on this site: [llms.txt](https://exploreswiftui.com/llms.txt) # **View Components** A type that represents part of your app’s user interface and provides modifiers that you use to configure views 15 components ![Container Content Margins - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/257/variants/1987?v=1792070676534&r=2&w=412&q=75&f=webp) ### **Container Content Margins** Adds the margins of the container the view is in. ![Disabled Toolbar Vertical Behavior - iOS on iPhone Duo - Landscape - Fully Open - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/246/variants/1636?v=1790277107518&r=2&w=412&q=75&f=webp) ### **Disabled Toolbar Vertical Behavior** Disables the vertical bar. ![Music Picker - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/232/variants/727?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Music Picker** Presents a music picker to select items from the Apple Music catalog and the user’s music library. ![App Store Overlay - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/224/variants/269?v=1790073478842&r=2&w=412&q=75&f=webp) ### **App Store Overlay** Presents a StoreKit overlay when a given condition is true. ![Manage Subscriptions Sheet - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/223/variants/241?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Manage Subscriptions Sheet** Opens the manage subscriptions sheet. ![Swipe Container - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/201/variants/496?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Swipe Container** Only allows a single active swipe within a container. ![Swipe Action - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/200/variants/322?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Swipe Action** Adds custom swipe actions to a row in a list or container, notifying you when the actions are revealed or dismissed. ![Navigation Split View Container Background - iPadOS - Landscape - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/173/variants/430?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Navigation Split View Container Background** A background placement behind the content of a NavigationSplitView. ![Navigation Container Background - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/172/variants/529?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Navigation Container Background** Sets the container background of the enclosing container using a view. ![ControlSize - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/97/variants/303?v=1790073478842&r=2&w=412&q=75&f=webp) ### **ControlSize** A control version that is the default size ![Background Extension Effect - iPadOS - Landscape - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/91/variants/422?v=1790073478842&r=2&w=412&q=75&f=webp) ### **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 on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/85/variants/33?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Glass effect** Applies the Liquid Glass effect to a view ![VisionOS background materials - visionOS - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/260/variants/2143?v=1793707679045&r=2&w=412&q=75&f=webp) ### **VisionOS background materials** All background materials on visionOS ![Toolbar Vertical Edge - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/254/variants/1863?v=1790589836833&r=2&w=412&q=75&f=webp) ### **Toolbar Vertical Edge** This value reflects the system’s preferred edge for the vertical bar in the current context, regardless of whether a vertical bar is currently visible. Use it to position custom bars or other UI relative to the system’s bar placement. ![Hinge State - iOS on iPhone Duo - Landscape - Fully Open - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/249/variants/1765?v=1793099575627&r=2&w=412&q=75&f=webp) ### **Hinge State** A type encapsulating the state of a single hinge. ```json {"@context":"https://schema.org","@graph":[{"@id":"https://exploreswiftui.com/#website","@type":"WebSite","description":"A visual library for SwiftUI APIs, components, and modifiers","inLanguage":"en-US","name":"Explore SwiftUI","url":"https://exploreswiftui.com/","publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/view#webpage","@type":"WebPage","description":"A type that represents part of your app’s user interface and provides modifiers that you use to configure views","name":"View Components","url":"https://exploreswiftui.com/library/view","breadcrumb":{"@id":"https://exploreswiftui.com/library/view#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/view"]}],"primaryImageOfPage":{"@id":"https://exploreswiftui.com/#logo"}},{"@id":"https://exploreswiftui.com/#identity","@type":"Organization","description":"A visual library for SwiftUI APIs, components, and modifiers","name":"Explore SwiftUI","url":"https://exploreswiftui.com","logo":{"@id":"https://exploreswiftui.com/#logo"},"sameAs":["https://x.com/Typ0genius","https://mastodon.social/@Typ0genius"]},{"@id":"https://exploreswiftui.com/library/view#collectionpage","@type":"CollectionPage","description":"A type that represents part of your app’s user interface and provides modifiers that you use to configure views","inLanguage":"en-US","name":"View Components","url":"https://exploreswiftui.com/library/view","about":{"@type":"Thing","name":"SwiftUI"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"}},{"@id":"https://exploreswiftui.com/library/view#/schema/item-list/1","@type":"ItemList","name":"View Components","itemListElement":[{"@type":"ListItem","position":1,"name":"Container Content Margins","url":"https://exploreswiftui.com/library/view/container-content-margins"},{"@type":"ListItem","position":2,"name":"Disabled Toolbar Vertical Behavior","url":"https://exploreswiftui.com/library/view/disabled-toolbar-vertical-behavior"},{"@type":"ListItem","position":3,"name":"Music Picker","url":"https://exploreswiftui.com/library/view/music-picker"},{"@type":"ListItem","position":4,"name":"App Store Overlay","url":"https://exploreswiftui.com/library/view/app-store-overlay"},{"@type":"ListItem","position":5,"name":"Manage Subscriptions Sheet","url":"https://exploreswiftui.com/library/view/manage-subscriptions-sheet"},{"@type":"ListItem","position":6,"name":"Swipe Container","url":"https://exploreswiftui.com/library/view/swipe-container"},{"@type":"ListItem","position":7,"name":"Swipe Action","url":"https://exploreswiftui.com/library/view/swipe-action"},{"@type":"ListItem","position":8,"name":"Navigation Split View Container Background","url":"https://exploreswiftui.com/library/view/navigation-split-view-container-background"},{"@type":"ListItem","position":9,"name":"Navigation Container Background","url":"https://exploreswiftui.com/library/view/navigation-container-background"},{"@type":"ListItem","position":10,"name":"ControlSize","url":"https://exploreswiftui.com/library/view/controlsize"},{"@type":"ListItem","position":11,"name":"Background Extension Effect","url":"https://exploreswiftui.com/library/view/background-extension-effect"},{"@type":"ListItem","position":12,"name":"Glass effect","url":"https://exploreswiftui.com/library/view/glass-effect"},{"@type":"ListItem","position":13,"name":"VisionOS background materials","url":"https://exploreswiftui.com/library/view/visionos-background-materials"},{"@type":"ListItem","position":14,"name":"Toolbar Vertical Edge","url":"https://exploreswiftui.com/library/view/toolbar-vertical-edge"},{"@type":"ListItem","position":15,"name":"Hinge State","url":"https://exploreswiftui.com/library/view/hinge-state"}]},{"@id":"https://exploreswiftui.com/library/view#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://exploreswiftui.com","position":1},{"@type":"ListItem","name":"View","item":"https://exploreswiftui.com/library/view","position":2}]},{"@id":"https://exploreswiftui.com/#logo","@type":"ImageObject","caption":"Explore SwiftUI","contentUrl":"https://exploreswiftui.com/apple-touch-icon.png","inLanguage":"en","url":"https://exploreswiftui.com/apple-touch-icon.png"}]} ```