Progressive Overlay

Instead of a binary on/off overlay transition, the overlay opacity smoothly follows the drag position in real time.

Enable it

Add progressiveOverlay to the Root. The overlay starts transparent and increases opacity as the sheet is dragged up.

<BottomSheet.Root
  open={open}
  onOpenChange={setOpen}
  progressiveOverlay
  progressiveOverlayMaxOpacity={0.4}
>
  <BottomSheet.Portal>
    <BottomSheet.Overlay />
    <BottomSheet.Content>
      <BottomSheet.Handle />
      {/* Content */}
    </BottomSheet.Content>
  </BottomSheet.Portal>
</BottomSheet.Root>

Max opacity

Control how dark the overlay gets with progressiveOverlayMaxOpacity. The default is 0.35. Set it to 0.6 for a stronger dim, or 0.2 for a subtle veil.

Works with snap points

When combined with snap points, the overlay opacity maps to the sheet position between snap points. At the lowest snap point the overlay is transparent; at the highest it reaches max opacity.