Skip to main content
declare const Detent: {
    medium: { detentType: "medium" };
    large: { detentType: "large" };
    fraction(value: number): { detentType: "fraction"; value: number };
    height(value: number): { detentType: "height"; value: number };
};

​
Properties

​
Detent.medium
{ detentType: 'medium' }
A standard medium-sized detent, typically around half the screen height.
​
Detent.large
{ detentType: 'large' }
A large detent that fills most or all of the available screen space.

​
Methods

​
fraction

Creates a custom detent at a fraction of the screen height. 
Detent.fraction(value: number): { detentType: "fraction"; value: number }
​
value
number
required
A number between 0 and 1 representing the fraction of screen height.

​
height

Creates a custom detent at a fixed height in points. 
Detent.height(value: number): { detentType: "height"; value: number }
​
value
number
required
The fixed height in points.

​
Usage

​
Standard detents

const body = () => {
    const [isPresented, setIsPresented] = useState(false)

    return VStack([
        Button("Show Sheet", () => setIsPresented(true))
    ])
    .sheet({
        isPresented,
        setIsPresented,
        content: () => Text("Sheet content")
    })
    .presentationDetents([Detent.medium, Detent.large])
}

​
Fractional detent

const body = () => {
    const [isPresented, setIsPresented] = useState(false)

    return VStack([
        Button("Show Sheet", () => setIsPresented(true))
    ])
    .sheet({
        isPresented,
        setIsPresented,
        content: () => Text("Quarter-height sheet")
    })
    .presentationDetents([Detent.fraction(0.25)])
}

​
Fixed height detent

const body = () => {
    const [isPresented, setIsPresented] = useState(false)

    return VStack([
        Button("Show Sheet", () => setIsPresented(true))
    ])
    .sheet({
        isPresented,
        setIsPresented,
        content: () => Text("300pt sheet")
    })
    .presentationDetents([Detent.height(300)])
}

​
Combining detent types

const body = () => {
    const [isPresented, setIsPresented] = useState(false)

    return VStack([
        Button("Show Sheet", () => setIsPresented(true))
    ])
    .sheet({
        isPresented,
        setIsPresented,
        content: () => VStack([
            Text("Drag to resize"),
            Text("Three snap points")
        ])
    })
    .presentationDetents([
        Detent.height(200),
        Detent.fraction(0.5),
        Detent.large
    ])
}

​
Notes

  • Detents define the snap points where a sheet rests when dragged by the user.
  • Multiple detents allow users to resize the sheet between defined sizes.
  • The order of detents in the array does not matter — the sheet snaps to the closest detent.
  • On platforms that do not support detents, sheets typically default to full screen.
  • Detent.medium and Detent.large are semantic and adapt to platform conventions.
  • Fraction values should be between 0 and 1.