Screens
Add and configure screens within your flows.
Screens
A screen is an individual page within a flow. Each screen contains a tree of components that define what the user sees and interacts with. A flow can have one screen (a simple announcement modal) or many (a multi-step onboarding sequence).
Adding screens
To add a screen to your flow, click the + Add Node button on the canvas and select Add Screen from the menu.
Each new screen starts empty. Click on the screen node to open the screen editor and begin adding components.
Screen editor
The screen editor is where you build the visual content of a screen. It shows a device-sized preview in the center with a component panel on the left and a properties panel on the right.
- Component panel -- browse and drag components onto the screen.
- Canvas -- the live preview of how the screen looks on a device. Click components to select them.
- Properties panel -- configure the selected component's props (text content, colors, sizing, actions, etc.).
Presentation styles
Screens support two presentation modes on mobile devices:
Fullscreen (default)
The screen fills the entire device screen. This is the standard presentation for onboarding flows, feature tours, and any experience that should command the user's full attention.
Bottom sheet
The screen appears as a sheet that slides up from the bottom of the device, overlaying the current app content. Bottom sheets are ideal for quick prompts, feedback requests, and contextual actions.
Bottom sheet configuration options:
| Setting | Description |
|---|---|
| Corner radius | Rounding of the top corners. |
| Show handle | Display a drag handle at the top of the sheet. |
| Handle color & size | Customize the handle appearance. |
| Background color | Sheet background color. |
| Overlay | Enable a dimmed overlay behind the sheet. Control its color and opacity. |
| Draggable | Allow the user to drag the sheet up or down. |
| Dismiss on overlay tap | Close the sheet when the user taps outside it. |
| Dismiss on swipe down | Close the sheet when the user swipes down. |
| Initial height | How tall the sheet is when it first appears: small, medium, large, or full. |
Screen background
You can set a background color for any screen. Click on the screen in the editor and use the background color picker in the properties panel to choose a color.
Safe area handling
Screens respect device safe areas (notch, home indicator, status bar) by default. You can configure safe area insets per screen if you need edge-to-edge content or custom padding.
The screen editor shows a realistic device frame so you can see exactly how safe areas and presentation styles will look on a real device.
Reordering screens
To change the order of screens in a flow, rearrange the edges on the flow builder canvas. The navigation order is determined by the graph structure, not by any fixed list order.