Presentation

These iOS-only modifiers present content over the current view — half-height sheets, full-screen covers, and Quick Look previews for files. Each is bound to a boolean (or URL) state and toggles presentation when that state changes. sheet and fullScreenCover are the two primary modal patterns. Combine sheet with presentationDetents to control sheet snap heights. quickLookPreview opens the system Quick Look UI for documents, images, and 3D models.

sheet

Presents a modal sheet over the current content.

.sheet(props: {
    isPresented: boolean;
    setIsPresented: (value: boolean) => void;
    content: () => Component;
    onDismiss?: () => void;
}): Component

object

required

Show properties

boolean

required

Controls whether the sheet is visible. Set to true to present, false to dismiss.

(value: boolean) => void

required

Callback to update the presentation state. Called with false when the user dismisses the sheet by swiping down or tapping outside.

() => Component

required

A function that returns the sheet’s content. Called lazily when the sheet is presented.

() => void

Callback fired after the sheet has been fully dismissed.

Basic sheet

const body = () => {
    const [showSheet, setShowSheet] = useState(false)
    return VStack([
        Button("Show Sheet", () => setShowSheet(true))
    ]).sheet({
        isPresented: showSheet,
        setIsPresented: setShowSheet,
        content: () => VStack([
            Text("Sheet Content")
                .font("title"),
            Button("Close", () => setShowSheet(false))
        ]).padding(16)
    })
}

Sheet with dismiss callback

const body = () => {
    const [showSheet, setShowSheet] = useState(false)
    return VStack([
        Button("Edit", () => setShowSheet(true))
    ]).sheet({
        isPresented: showSheet,
        setIsPresented: setShowSheet,
        content: () => Text("Editor").padding(16),
        onDismiss: () => {
            console.log("Sheet dismissed")
        }
    })
}

Sheet with detents Combine with presentationDetents to control the sheet’s available heights.

const body = () => {
    const [showSheet, setShowSheet] = useState(false)
    return VStack([
        Button("Open", () => setShowSheet(true))
    ]).sheet({
        isPresented: showSheet,
        setIsPresented: setShowSheet,
        content: () => VStack([
            Text("Half sheet")
                .font("headline"),
            Spacer()
        ]).padding(16)
    }).presentationDetents([Detent.medium, Detent.large])
}

fullScreenCover

Presents a full-screen modal cover over the current content.

.fullScreenCover(props: {
    isPresented: boolean,
    setIsPresented: (value: boolean) => void,
    content: () => Component,
    onDismiss?: () => void
}): Component

object

required

Configuration for the full-screen cover presentation.

Show properties

boolean

required

Whether the full-screen cover is currently shown.

(value: boolean) => void

required

Callback to update the presented state. Called with false when the cover is dismissed.

() => Component

required

A function returning the component to display inside the full-screen cover.

() => void

Called after the cover has been dismissed.

Basic full-screen cover

const body = () => {
    const [showCover, setShowCover] = useState(false)

    return VStack([
        Button("Show Full Screen", () => setShowCover(true))
    ]).fullScreenCover({
        isPresented: showCover,
        setIsPresented: setShowCover,
        content: () => VStack([
            Text("Full Screen Content")
                .font("title"),
            Button("Dismiss", () => setShowCover(false))
        ])
    })
}

With onDismiss callback

const body = () => {
    const [showCover, setShowCover] = useState(false)

    return VStack([
        Button("Open", () => setShowCover(true))
    ]).fullScreenCover({
        isPresented: showCover,
        setIsPresented: setShowCover,
        content: () => Text("Cover content"),
        onDismiss: () => {
            console.log("Cover dismissed")
        }
    })
}

Unlike sheet, a full-screen cover takes over the entire screen and does not show a drag indicator. The user cannot dismiss it by swiping down — provide an explicit dismiss action (e.g., a button that sets isPresented to false).

presentationDetents

Sets the available sheet size detents (snap points) for a presented sheet.

.presentationDetents(detents: PresentationDetents): Component

PresentationDetents

required

An array of detent configurations that define the available sheet heights. Each detent is a PresentationDetent object with a detentType property.Use the Detent convenience constructors:

Detent.medium — half-screen height
Detent.large — full-screen height
Detent.fraction(value) — fraction of screen height (0 to 1)
Detent.height(value) — exact height in points

Medium and large detents

const body = () => {
    const [showSheet, setShowSheet] = useState(false)
    return VStack([
        Button("Open Sheet", () => setShowSheet(true))
    ]).sheet({
        isPresented: showSheet,
        setIsPresented: setShowSheet,
        content: () => Text("Sheet content").padding(16)
    }).presentationDetents([Detent.medium, Detent.large])
}

Custom fraction detent

const body = () => {
    const [showSheet, setShowSheet] = useState(false)
    return VStack([
        Button("Show", () => setShowSheet(true))
    ]).sheet({
        isPresented: showSheet,
        setIsPresented: setShowSheet,
        content: () => Text("Quarter sheet").padding(16)
    }).presentationDetents([Detent.fraction(0.25), Detent.medium])
}

Fixed height detent

const body = () => {
    const [showSheet, setShowSheet] = useState(false)
    return VStack([
        Button("Show", () => setShowSheet(true))
    ]).sheet({
        isPresented: showSheet,
        setIsPresented: setShowSheet,
        content: () => Text("Fixed height sheet").padding(16)
    }).presentationDetents([Detent.height(300), Detent.large])
}

Apply .presentationDetents() to the same component that has the .sheet() modifier. When multiple detents are provided, the user can drag between them. If only one detent is provided, the sheet snaps to that height and cannot be resized.

quickLookPreview

Presents a Quick Look preview for a file URL.

.quickLookPreview(props: {
    url?: string;
    setURL?: (url: string | null) => void;
    urls?: string[];
    onLoadingChanged?: (isLoading: boolean) => void;
}): Component

object

required

Show properties

string

The URL of the file to preview. When non-null, the Quick Look preview is presented. Set to null to dismiss.

(url: string | null) => void

Callback to update the URL state, typically used to dismiss the preview by setting null.

string[]

An array of file URLs for multi-item preview with swipe navigation.

(isLoading: boolean) => void

Callback fired when the loading state of the preview changes.

Single file preview

const body = () => {
    const [previewURL, setPreviewURL] = useState(null)
    return VStack([
        Button("Preview PDF", () => setPreviewURL("https://example.com/doc.pdf"))
    ]).quickLookPreview({
        url: previewURL,
        setURL: setPreviewURL,
    })
}

Multi-file preview

const body = () => {
    const [previewURL, setPreviewURL] = useState(null)
    const files = [
        "https://example.com/photo1.jpg",
        "https://example.com/photo2.jpg",
        "https://example.com/doc.pdf",
    ]
    return VStack([
        Button("View Files", () => setPreviewURL(files[0]))
    ]).quickLookPreview({
        url: previewURL,
        setURL: setPreviewURL,
        urls: files,
    })
}

Quick Look supports many file types including images, PDFs, 3D models, and documents. The preview is presented modally and dismissed by the user or by setting the URL to null.

Introduction

Authoring

Components

Components — iOS Extensions

Components — Web Extensions

Modifiers

Modifiers — iOS Extensions

Hooks and Globals

Styles

Types

sheet

fullScreenCover

presentationDetents

quickLookPreview

See also

​sheet

​fullScreenCover

​presentationDetents

​quickLookPreview

​See also

sheet

fullScreenCover

presentationDetents

quickLookPreview

See also