Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

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
​
props
object
required
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
​
props
object
required
Configuration for the full-screen cover presentation.
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
​
detents
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
​
props
object
required
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.

​
See also