Sheets, bottom sheets, half sheets, full-screen covers, custom modal transitions. All five SwiftUI presentation APIs in one production-ready reference.
SwiftUI has five modal APIs: .sheet (slide-up partial), .fullScreenCover (full screen), .popover (anchored on iPad), .alert/.confirmationDialog (system dialogs), and the iOS 16+ .presentationDetents which converts a sheet into a resizable bottom sheet. For most apps in 2026, target iOS 16+ to use .presentationDetents([.medium, .large]) — it replaces every third-party bottom-sheet library and matches Apple's own UX (Maps, Wallet, AirDrop).
Detents, custom heights, interactive backgrounds, blocked dismissal and full-screen covers — each preview animates the behaviour the code beneath it produces.
The core iOS 16 sheet API — snap points plus a visible grabber.
struct DetentSheet: View {
@State private var show = false
var body: some View {
Button("Open") { show = true }
.sheet(isPresented: $show) {
Text("Sheet content")
.presentationDetents([.medium, .large])
.presentationDragIndicator(.visible)
}
}
}A fraction or fixed height when medium is the wrong size.
.sheet(isPresented: $show) {
FilterPanel()
// .fraction for proportional, .height for a fixed point value.
.presentationDetents([.fraction(0.35), .height(520), .large])
.presentationDragIndicator(.visible)
}Keep the view behind tappable — essential for a map or player sheet.
.sheet(isPresented: $show) {
NearbyList()
.presentationDetents([.height(180), .medium, .large])
// Below .medium the backdrop is not dimmed, so the map stays usable.
.presentationBackgroundInteraction(.enabled(upThrough: .medium))
.presentationDragIndicator(.visible)
}Restyle the sheet chrome itself — radius and a material backdrop.
.sheet(isPresented: $show) {
Composer()
.presentationDetents([.medium])
.presentationCornerRadius(28)
.presentationBackground(.ultraThinMaterial)
}Stop a swipe-away mid-form, and confirm instead of losing input.
struct FormSheet: View {
@State private var show = false
@State private var hasEdits = true
@State private var confirmDiscard = false
var body: some View {
Button("Edit") { show = true }
.sheet(isPresented: $show) {
EditForm()
// Disables the swipe-down ONLY while there is work to lose.
.interactiveDismissDisabled(hasEdits)
.confirmationDialog("Discard changes?", isPresented: $confirmDiscard) {
Button("Discard", role: .destructive) { show = false }
Button("Keep editing", role: .cancel) {}
}
}
}
}For onboarding and paywalls — no swipe-to-dismiss, you control the exit.
struct PaywallHost: View {
@State private var showPaywall = false
var body: some View {
Button("Go Pro") { showPaywall = true }
.fullScreenCover(isPresented: $showPaywall) {
PaywallView(onClose: { showPaywall = false })
}
}
}
struct PaywallView: View {
var onClose: () -> Void
@Environment(\.dismiss) private var dismiss
var body: some View {
VStack { /* ... */ }
.overlay(alignment: .topTrailing) {
// A full screen cover has no grabber — always give an escape.
Button { dismiss() } label: {
Image(systemName: "xmark")
.padding(10)
.background(.ultraThinMaterial, in: .circle)
}
.padding()
}
}
}sheet(item:) — the correct pattern when the sheet needs a value.
struct Product: Identifiable { let id: String; let name: String }
struct Catalogue: View {
let products: [Product]
@State private var selected: Product?
var body: some View {
List(products) { p in
Button(p.name) { selected = p }
}
// Using sheet(item:) instead of isPresented + a separate @State avoids
// the classic bug where the sheet shows stale data on first present.
.sheet(item: $selected) { product in
ProductDetail(product: product)
.presentationDetents([.medium, .large])
}
}
}Detents, custom heights, interactive backgrounds, blocked dismissal, full-screen covers and sheet(item:) — every variant above, ready to paste.
Sheets work with two binding patterns. Boolean for "is this view showing", or Identifiable item for "show a sheet with this data". Prefer the item form when the sheet needs data to render — it avoids the optional unwrapping dance.
struct ContentView: View {
@State private var selectedTask: Task?
var body: some View {
List(tasks) { task in
Button(task.title) { selectedTask = task }
}
.sheet(item: $selectedTask) { task in
TaskDetailView(task: task)
}
}
}The iOS 16+ presentationDetents modifier converts any sheet into a resizable bottom sheet. Pass an array of heights — users can drag between them. This is the same API that powers Maps and Wallet.
.sheet(isPresented: $showFilters) {
FiltersView()
.presentationDetents([.fraction(0.3), .medium, .large])
.presentationDragIndicator(.visible)
.presentationBackgroundInteraction(.enabled(upThrough: .medium))
}.fullScreenCover takes over the entire window and requires programmatic dismissal. Use it for onboarding flows, paywalls, and any state where the user MUST complete or explicitly close. Sheets are for non-blocking UX.
.fullScreenCover(isPresented: $showPaywall) {
PaywallView()
.interactiveDismissDisabled(!hasFreeTrialEnded)
}Three modal bugs you'll hit in production:
The Swift Kit ships production paywall sheets and 3-style onboarding bottom sheets wired to RevenueCat and the design system.
Rather have it done for you? I set up and ship your app from $499. See how
The Swift Kit gives you a production-ready SwiftUI boilerplate — design system, paywall, auth, AI, all pre-wired. $99 one-time.
Get The Swift Kit — $99One-time purchase · Lifetime updates · 14-day refund