Nested Sheets

Stack multiple sheets with an automatic scale effect, similar to native iOS sheet stacking.

How to nest

Use BottomSheet.NestedRoot instead of BottomSheet.Root for the inner sheet. The parent sheet automatically scales down when the nested sheet opens.

<BottomSheet.Root open={open} onOpenChange={setOpen}>
  <BottomSheet.Portal>
    <BottomSheet.Overlay />
    <BottomSheet.Content>
      <BottomSheet.Handle />
      <h2>Parent Sheet</h2>

      {/* Nested sheet inside the parent */}
      <BottomSheet.NestedRoot open={nestedOpen} onOpenChange={setNestedOpen}>
        <BottomSheet.Trigger>Open Nested</BottomSheet.Trigger>
        <BottomSheet.Portal>
          <BottomSheet.Overlay />
          <BottomSheet.Content>
            <BottomSheet.Handle />
            <h2>Nested Sheet</h2>
          </BottomSheet.Content>
        </BottomSheet.Portal>
      </BottomSheet.NestedRoot>

    </BottomSheet.Content>
  </BottomSheet.Portal>
</BottomSheet.Root>

Behavior

The parent sheet scales down with a subtle animation when the child opens
Closing the nested sheet restores the parent to its original size
NestedRoot accepts the same props as Root
You can nest multiple levels deep

Tips

Keep nested sheets simple. Deep nesting (3+ levels) can feel confusing on mobile. If you need complex navigation, consider a full-screen modal or a separate route instead.