Drag & drop screen examples

Shuttle

File manager view where the user sees an empty space named 'My First Space' with a drag-and-drop prompt and an active trial expiration warning.

• Files
• Empty State

Bitly

Page builder where the user uploads an image via drag-and-drop or URL to customize their profile header.

• Upload & Download
• Edit

Lemni

Settings page where the user manages datasets to train AI agents by adding webpages or uploading files.

• AI Settings
• Upload & Download

Monarch

Settings page where the user previews the impact of a new transaction rule on existing records before saving.

• Settings
• Rule Builder

Assembly

Alternative page comparing Assembly's features and pricing against Hootsuite across various social media platforms using a detailed feature matrix.

Replit

Code editor workspace where a user interacts with an AI agent to build a task management app, currently reviewing a live preview of the empty tasks list.

• AI Assistant
• AI Agent

Front

Settings page where the user configures the appearance of their help center, including colors, logos, and custom branding, with a live preview alongside the form.

• Settings

WeTransfer

Create page where the user sets up a new feedback review by uploading files via drag and drop.

• Feedback
• Upload & Download

Podia

Modal where the user uploads a CSV or Excel file to import audience data, currently on the second step of a four-step wizard.

• Import & Export
• Setup Wizard

Dub

Detail page where the user edits the social media link preview image, title, and description via a modal overlay.

• Edit
• Upload & Download

Motion

Careers page where a candidate fills out an application form, uploads a resume, and answers specific questions for an Engineering Manager role.

Rayon

Design editor where the user modifies a master bedroom floor plan by selecting and rotating a bookshelf object via the inspector panel.

• Design Editor
• Edit