Skip to main content

​
Why overlay design matters

Overlays like dialogs, drawers, and bottom sheets are powerful UI components, but they need to follow certain practices to be identified correctly during import.
Overlay control example in Figma

Example of overlay control in a design

​
Requirements for dialogs, drawers, and bottom sheets

When designing these components, make sure to include three essential elements:
Three components needed for overlays

Overlay component requirements

Common issues occur when overlays do not cover the screen fully, or when dialog edges extend beyond the screen bounds.
Following the practices below ensures your overlay components are detected correctly.

​
Best practices

  1. The overlay should cover the screen completely.
    If it does not, the dialog, drawer, or bottom sheet will not be detected.
  2. Place the component in the correct position inside the overlay:
    • Dialog → exact center of the overlay
    • Bottom sheet → aligned to the bottom
    • Drawer → aligned to the left
  3. Maintain the correct hierarchy of layers:
    • Top: dialog, drawer, or bottom sheet
    • Below: the overlay layer
    • Bottom: everything else in the screen

​
Reference designs

  • Dialog
  • Drawer
  • Bottom sheet
Dialog overlay design

Dialog design example

Why this helps Rocket

Correctly designed overlays ensure dialogs, drawers, and bottom sheets are imported as functional components.
This avoids detection issues and keeps your layouts consistent.
Need help? We’re here for you.
Email us at support@rocket.new or join our Discord community to get help, share ideas, and connect with other creators.