Floating Mode

Floating mode detaches the sheet from the screen edges, giving it rounded corners on all sides and a small margin from the viewport.

Enable floating

Add the floating prop to the Root:

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

Customize the radius

The border radius is controlled by a CSS custom property. Override it to match your design:

/* Customize the floating radius */
:root {
  --glidesheet-floating-radius: 1.5rem;
}

Combining with snap points

Floating mode works with snap points. The sheet maintains its detached appearance at every snap position. This is useful for mini-player UIs or persistent toolbars.