Drag & Drop screen examples

Polar

Dashboard overview where the user customizes the displayed metrics via a modal, selecting and reordering up to 5 metrics from categorized lists.

• Edit
• Dashboard

Extend

Detail page where the user configures the schema and rules for a specific document processor, featuring a drag-and-drop testing area alongside the configuration panel.

• AI Editing
• Edit

Dock

Form builder where the user edits customer onboarding questions, configures field requirements, and manages form content blocks.

• Form
• Edit

Aboard

Detail page for a specific photo album where the user is prompted to drag and drop files to upload.

• Files
• Empty State

Navattic

Workflow editor where the user builds an interactive product demo by adding steps and selecting screen captures.

• Add & Create

Mailchimp

Form builder where the user customizes their email preferences center by toggling available fields and adjusting styling.

• Form
• Edit

Maze

Form builder where the user configures a matrix question block with statements, choices, and display settings while previewing the participant experience.

• Form
• Edit

Missive

Settings overlay where the user is importing a new automation rule via a drag-and-drop file upload modal.

• Import & Export
• Rule Builder

Mocha

Project settings page where the user uploads and manages static assets for their Clarity Tasks project via a drag-and-drop zone.

• Upload & Download
• Settings

Linear

Settings page where the user configures their sidebar preferences, including default badge style and visibility of personal and workspace items, via a modal overlay.

• Settings

Bird

Design editor where the user configures a sign-up popup, currently viewing the content step and opening the menu to add a new block like text, phone, or a checkbox.

• Design Editor
• Edit

Morphic

App interface where the user creates a new custom AI model by providing a name and uploading training images via a drag-and-drop modal.

• Upload & Download
• AI Generation