Runway UI components examples

Runway

A card displaying a project thumbnail, title, author, and a more options menu icon.

• Card

Runway

A data table displaying a list of media assets with columns for name, type, media, duration, creator, and creation date. It includes a header with sorting and filtering options, and a floating action button for chat.

• Table

Runway

A card representing a folder, featuring a thumbnail image, folder name, and item count.

• Card

Runway

A large drag-and-drop file upload area with a dashed border, a cloud upload icon, and text prompting the user to drag and drop an image or click to upload.

• File upload input

Runway

A dark-themed properties panel for a video editor, featuring collapsible sections for Transform, Crop, Magic Tools, Effects and Filters, Motion effects, and Export Clip. It includes various input controls like number fields, sliders, dropdowns, and toggle buttons.

• Toolbox

Runway

• Dropdown menu

Runway

A segmented control or toggle group for selecting an export format. The first option (MP4) is selected, while the other two (ProRes, PNG) are disabled and marked with 'UPGRADE' badges, indicating they require a paid plan.

• Upgrade your plan

Runway

A color picker component allowing users to select a background color from a predefined palette or add a custom color.

• Color picker

Runway

A dark-themed top navigation bar for a video editor, featuring a back button, project title with a beta badge, a central toolbar with editing tools and zoom controls, and primary actions for sharing, exporting, and completing the task on the right.

• Horizontal navigation

Runway

A slider control with a numeric input field to adjust brush size.

• Slider

Runway

A list of checkbox options for providing feedback on AI video generation quality.

• Checkbox & radio

Runway

A dark-themed card displaying the user's current plan status, project usage progress, and a prominent call-to-action to upgrade.

• Upgrade your plan