Mobile UI element examples

UI elements

Klook: Travel & Activities: Further down, there are expandable sections for 'Baggage & policy details' and 'Use promo code'.

Ascend: Bible Game: A modal window with a title at the top, a central image card, a primary action button, and a secondary expandable list button.

Hotels.com: Book hotels & more: Two collapsible sections titled 'How to collect stamps' and 'Useful tips to help you collect stamps faster' are located at the bottom.

Accordions

IDAGIO Stream Classical Music: This screen displays a modal action sheet overlaid on a music player interface for the IDAGIO app.

PDF Scanner AI: Scan Documents: This screen displays a modal action sheet overlaying a background illustration of document scanning concepts.

Action sheets

Hypelist: Create & Share Lists: The top section features a gold-toned gradient background with a back button, a user-add icon, a share icon, and a three-dot menu icon.

ZEDGE™ Ringtones & Wallpapers: Navigation controls are located at the top, including a back button, an 'add' icon, and a three-dot menu icon for additional options.

Klook: Travel & Activities: The bottom right corner features a floating action button (FAB) with a plus icon and a map view icon.

Add buttons

Google Gemini: Top navigation bar, central content area with icon and prompt cards, bottom fixed input bar.

Claude by Anthropic: The center of the screen displays three suggested prompts in a bold, serif font: 'Prep for my job interview', 'Analyze my writing style', and 'Plan a trip to Joshua tree'.

invideo AI: AI Video Generator: Top navigation/close button, text input field, suggested prompt list, and bottom system keyboard.

AI prompt suggestions

AI Song Generator: Mozart: A play button is positioned to the left of the waveform.

Voice Recorder－Audio Memos Арр: The central area features a large, vertical waveform visualization with a blue playhead indicator and a timeline showing seconds (00:00, 00:01, 00:02).

AI Song Generator: Mozart: A thin progress bar sits just below the waveform.

Audio waveforms

Avatars

Magic Tiles 3™: Piano Game: At the top, a back arrow and the title 'SETTINGS' are displayed.

Ascend: Bible Game: A back button is located in the top left corner.

Rooms: At the top left, a back arrow icon is positioned next to the text 'Your new room'.

Back buttons

HelloBot - Astrology & Tarot: One specific item, 'Heart 200', is highlighted with a 'Limited' badge and a promotional sub-text in Korean indicating a bonus offer, accompanied by a countdown timer showing '22 minutes, 59 seconds left'.

Planner 5D: AI Home Design: The 'Tools' menu contains a list of options: 'Share', 'Collaborate', 'Export to CAD' (marked with a 'PRO' badge), 'Notes', and 'Settings'.

Filmit AI: AI Cinematic Video: At the top, a hero section displays a cinematic video preview with a 'FREE' badge and a 'Try it' call-to-action button.

Badges

Planner 5D: AI Home Design: Header with greeting, followed by horizontal scrollable project list, a design battle banner, and a vertical list of inspiration articles, ending with a fixed bottom navigation bar.

ThemeKit: Widget & Icon Themes: A small sponsored banner for 'WePlay' appears just above the bottom navigation bar.

Banners

WeMoms - Pregnancy & Baby App: Bottom navigation bar with four icons and labels.

Fishbox - Smart Fishing App: Top toggle and bottom tab bar.

Plant Identifier, Care: Planty: Bottom navigation bar with five icons.

Bottom navigation

Deezer: Music Player, Podcast: A bottom sheet modal is overlaid on the screen, titled 'Banana Bops', providing management options for the selected group: 'Edit group name', 'Invite friends', and 'Leave the group'.

DAZN: Stream Live Sports: This screen displays a modal bottom sheet overlaying a sports league dashboard for the UEFA Champions League 2024/25.

Hypelist: Create & Share Lists: This screen displays a bottom sheet modal overlaying a list view of restaurant recommendations.

Bottom sheets

WeMoms - Pregnancy & Baby App: The “Follow your pregnancy” action appears at center.

Fishbox - Smart Fishing App: The “Continue” action appears at bottom center.

Noxogy Sleep Tracker: The “Let's Begin!” action appears at center.

Buttons

Calorie Counter by Numify: The bottom section features a text input field labeled 'Describe your meal' with a camera icon for AI-powered food recognition.

Calorie Counter by Numify: Below this, there is a text input field labeled 'Describe your meal' with a camera icon for AI food recognition.

Vivino: Drink The Right Wine: The bottom navigation bar is a dark red color, featuring icons for 'For You', 'Explore', a central camera button for scanning, 'My Wines' (active state), and 'More'.

Camera buttons

Planner 5D: AI Home Design: The main content is a card featuring a high-quality 3D render of a 'Cozy Scandinavian room' with a green 'submitted' badge.

Precious - Baby Photo Art: Top navigation bar with tabs, followed by a featured banner, a sub-header, a two-column grid of template cards, and a bottom navigation bar.

SunSafe: UV Index & Tanning: A compact card grid presents skin metrics with labels, percentages, and colored progress bars.

Cards

Fishbox - Smart Fishing App: Behind this main card, partially visible cards for 'Solunar' and weather data suggest a carousel of features.

Noxogy Sleep Tracker: At the bottom, a series of dots indicates a multi-page onboarding or tutorial carousel.

Plant Identifier, Care: Planty: A horizontal carousel of thumbnail images shows various examples of plant diseases.

Carousels

Blinq: Digital Business Card: Below the text input area, there is a character counter displaying '25/1000' and a small disclaimer text stating 'Notes are not visible to your contacts'.

Filmit AI: AI Cinematic Video: Below this is a 'Script' input area where users can mention specific cast members using an '@' symbol, with a character count indicator (9/2000).

Bible Chat: Daily Devotional: A large, multi-line text input field with the placeholder 'Describe here' occupies the center of the screen, with a character counter '0/200' below it.

Character counters

Sky Tonight - Stargazing Guide: The central area contains a large, dark-themed line chart visualizing the 'Altitude' of the constellation over a 24-hour period, with specific markers for rise, transit, and set times (8:47 PM, 2:38 AM, 8:30 AM).

SubPilot: Cancel Subscriptions: A dropdown menu labeled 'Expenses' sits above a donut chart visualization that indicates 'No transaction' and '$0'.

Windy.app — Wind, Tides, Radar: The bottom section presents a 'Forecast History (2012 - 2023)' area, featuring a monthly selector (Jan-Dec) and a line chart visualizing historical weather data trends.

Charts

Quinn - Audio Stories: Square checkboxes allow multiple point-of-view and creator filters beside a separate radio group.

Zutobi: Permit & Driving Prep: Each option includes an icon, a descriptive label, and a checkbox on the right side.

Meetup: Social Events & Groups: The background shows a form with fields for reporting details, including a checkbox for confirming the accuracy of the report.

Checkboxes

Plane Finder ⁃ Flight Tracker: Map view in background with a bottom-anchored modal overlay for settings.

calimoto Motorcycle Navigation: The top section shows trip summary metrics (0m, 0:00h, -) and filter chips for 'Sights' and 'Avoid'.

Klook: Travel & Activities: At the top, there is a search bar for locations, followed by filter chips for 'Location' and 'Filters'.

Chips

Vivino: Drink The Right Wine: At the top, a search bar contains the query 'new york' with a clear button and a 'Cancel' text button to the right.

ZARA: There is an email input field currently populated with 'screensdesigns@gmail.com' and a clear icon, followed by an 'UNSUBSCRIBE' button.

Scanner App: Genius Scan: Below this, a text input field displays the current document name '2025-05-14 Data Design' with a clear button.

Clear buttons

calimoto Motorcycle Navigation: The screen features a clean, light-themed interface with a top header containing the title 'Map settings' and a close button.

ZARA: The layout is minimal and clean, featuring a top-left 'X' button to close the screen.

Planner 5D: AI Home Design: The layout is a vertical list of cards centered on a dark background, with a header title 'AI Designer' and a close button in the top right corner.

Close buttons

Calculator₊: At the bottom, a horizontal toolbar features a set of drawing instruments including a pencil, a pen, a highlighter, an eraser, a ruler, and a color picker, providing a comprehensive suite for manual math notation and problem-solving.

Rooms: Below this, a large color palette grid occupies the lower half of the screen, allowing users to select colors for their voxel creations.

PDF Scanner AI: Scan Documents: This is a color selection modal screen within a document scanning application.

Color pickers

Calorie Counter by Numify: At the bottom of the screen, there is a back arrow button and a large, prominent black 'Next' button.

SunSafe: UV Index & Tanning: At the bottom of the screen, there is a large, prominent black 'Next' button for proceeding to the next step of the onboarding process.

Useless - Screen Time Control: A large red 'Continue' button is at the bottom, with a 'Skip' text link above it.

Continue buttons

Deezer: Music Player, Podcast: Below the grid, there are two list items: 'Copy to clipboard' with a link icon and 'See more options' with an ellipsis icon.

Deezer: Music Player, Podcast: Below the grid, there are two list items: 'Copy to clipboard' with a link icon and 'See more options' with an ellipsis icon.

Map My Run GPS Running Tracker: The sharing sheet places Copy Link, Share Link, and More actions beneath the workout preview.

Copy buttons

Klook: Travel & Activities: The top of the screen features a back button and a title 'Country/region code', followed by a search input field with a magnifying glass icon.

Useless - Screen Time Control: Below this is a search input field with a magnifying glass icon and the placeholder text 'Search country or code'.

Pool, the screenshot app: This screen is a country selection modal overlaying a list of countries with their respective international dialing codes.

Country code pickers

Scanner App: Genius Scan: This screen shows a document scanning interface in Genius Scan, where a user is adjusting the crop boundaries of a captured document.

ScanAny-PDF Scanner App: Top navigation bar, central document preview area with interactive cropping frame, and a bottom control bar with selection tools and a primary action button.

Scanner App: Genius Scan: This screen shows a document scanning interface in the Genius Scan app, where a user is adjusting the crop boundaries of a captured document.

Crop handles

Calorie Counter by Numify: This is an onboarding screen for a calorie tracking app, asking the user to input a date for a vacation.

Fishbrain - Fishing App: Below this, a date and time picker is active, showing a scrollable wheel interface for selecting the month and year (currently set to July 2025) and a time input field set to 12:35 PM.

Gaia GPS: Mobile Trail Maps: The main focus is a modal date picker overlay that is currently active, allowing the user to select a birthdate.

Date pickers

Everlook- Face & Body Editor: The control panel includes a horizontal slider for intensity adjustment, a trash icon, and a layer/selection icon.

calimoto Motorcycle Navigation: This screen displays a 'Delete Account' confirmation modal overlaid on an 'Account' settings page.

Calculator₊: At the top, a navigation bar includes 'Cancel' on the left, undo and redo icons in the center, and a trash icon on the right.

Delete buttons

Scroll The Bible: This screen displays a modal overlay on top of a Bible reading interface.

Wikiloc - Trails of the World: This screen displays a modal dialog titled 'Save to a List' overlaid on a blurred background.

Plant Identifier, Care: Planty: This screen is a modal overlay requesting app permissions, with a secondary 'Enjoying Planty?' rating prompt centered on top.

Dialogs

WebNovel - Read Novels & Manga: A disabled 'Use 0' button is visible, followed by a 'How To Obtain' button and a small notification badge indicating '5 stories updated'.

Yelp: Food, Services & Reviews: At the bottom of the screen, there is a large, centered 'Continue' button, which is currently disabled or inactive, indicating that the user must confirm their selection to proceed.

ChatGPT: A large, prominent 'Create project' button is positioned in the middle of the screen, currently in a disabled or inactive state.

Disabled buttons

AI Summary - Meeting Notes: Each item is a card with a question and a chevron icon indicating expandability.

Windy.app — Wind, Tides, Radar: Please read our legal information.' The bottom section contains two stacked, rounded rectangular buttons: 'PRIVACY POLICY' and 'TERMS OF USE', both featuring a right-pointing chevron icon to indicate navigation to external documents.

EveryDollar: Budget Management: The main content is a vertical list of four navigation cards, each containing an icon, a label, and a chevron arrow indicating a link.

Disclosure indicators

GoPhoto:AI Photo & Video Maker: The central visual is a 3D-rendered open gift box with a '75% OFF' tag attached.

ZARA: Below this, a horizontal filter bar allows users to refine by Color, Size, Price, Collection, and Discount.

Klook: Travel & Activities: Below this, a 'Promo codes' section displays three distinct cards for 'Stay', 'Select items', and 'Flights', each showing discount percentages or fixed amounts, minimum spend requirements, and a 'Redeem' button.

Discount labels

Litres: Audio: A separator line with the word 'or' divides the primary email login from alternative authentication methods.

Yelp: Food, Services & Reviews: A divider with the word 'or' separates these from an email input field labeled 'Enter email to login or sign up'.

Zalando – Online fashion: Each option is separated by a thin horizontal divider.

Dividers

ThemeKit: Widget & Icon Themes: Below the central mockup is a prominent download button.

IDAGIO Stream Classical Music: The top navigation bar includes a back button, the title 'Tracks', and a download icon.

ZEDGE™ Ringtones & Wallpapers: Below the image, a floating action bar contains a 'Favorited' button (with an upward arrow icon), an 'Add to collection' button (with a download/plus icon), a heart icon, and a three-dot menu icon.

Download buttons

CamScanning: AI Measure & Scan: At the top, a header displays a cloud icon and the text 'Identify The Cloud' with a dropdown arrow.

Layout for Instagram・Inpreview: At the top, a header displays the account name 'screensdesign_official' with a dropdown arrow, alongside refresh and options icons.

Deezer: Music Player, Podcast: The main body consists of three input fields: 'Username' (pre-filled with 'screensdesigns'), 'Identity' (a dropdown-style selector currently set to 'Female'), and 'Age' (pre-filled with '31').

Dropdown menus

Redfin: Buy, Sell & Rent Homes: Users can edit the 'Home price' ($3,950,000) and 'Down payment' (20%) using pencil icons.

PDF Scanner AI: Scan Documents: Below the card, there is an editable text field currently containing the text 'memo 1' followed by a pencil edit icon.

Widgetable: Besties & Couples: Below the illustration, there is a control bar with three circular buttons: a minus sign, a large plus sign, and an edit icon.

Edit buttons

Too Good To Go: Save Good Food: Top navigation bar with title, followed by an email input field, and the system keyboard at the bottom.

Quinn - Audio Stories: The main content features a 'Welcome to Quinn' heading, followed by an email input field pre-filled with 'screensdesigntest@gmail.com' and a checkmark icon indicating validation.

EveryDollar: Budget Management: There is a single email input field currently populated with 'screensdesigntest@gmail.com', followed by a prominent blue 'Continue' button.

Email inputs

Budget app - spending tracker: The main content area is an empty state illustration of a document with a magnifying glass and an 'x' icon, accompanied by the text 'No tag data found'.

PDF Scanner AI: Scan Documents: The center of the screen features a large, light-blue folder illustration accompanied by the text 'This folder is empty, move your scanned docs right in' and a 'Move scans' button.

Klook: Travel & Activities: Below the illustration, the text 'You don't have any notifications yet' informs the user of the empty state.

Empty-state illustrations

Zalando – Online fashion: Each card includes a heart icon in the top right corner for wishlisting, with one heart already filled in red.

Deezer: Music Player, Podcast: Some artists are selected, indicated by a purple heart icon overlaying their image and a purple border.

Deezer: Music Player, Podcast: The main content area is a vertical list of tracks, each showing album art, a verified checkmark, song title, artist name, a heart icon, and a three-dot menu.

Favorite and bookmark buttons

ChatGPT: To the left of the input field is a plus icon for attachments, and to the right is a send button.

Yard AI: Backyard Design: At the bottom, a text input field currently contains the user's query 'Plants to add here', accompanied by a plus icon for attachments and a send button.

Precip - Rain Totals & Gauge: At the bottom, there is a message input field with placeholder text 'Message...', a paperclip attachment icon, and an upward-pointing arrow button for sending messages.

File attachments

Zalando – Online fashion: This is a product listing screen in the Zalando fashion app, specifically filtered for 'Sport'.

Good Food: Recipe Finder: This is a search and filter screen for a recipe discovery app.

Redfin: Buy, Sell & Rent Homes: The top section features a search bar, a 'Save' button, and filter controls ('Filters 10', 'For rent').

Filter buttons

HBX | Globally Curated Fashion: A floating 'Filter' button is positioned at the bottom center of the product grid.

Wikiloc - Trails of the World: Full-screen map view with a top header, a floating notification banner, and bottom-aligned controls.

Particle: Personalized News: At the bottom, there is a floating action button labeled '1 question' that allows the user to engage with the content.

Floating action buttons

Bible Chat: Daily Devotional: Below the value proposition, there is a toggle to 'try the app for free' and a prominent 7-day free trial offer with pricing details ($4.99/week).

AI Summary - Meeting Notes: Below these features, there are subscription options, including a 'Yearly Plan' and a '3-Day Free Trial' with a toggle for 'Free Trial Enabled'.

Free trial toggles

Yard AI: Backyard Design: A modal window with a header containing a close button and title, followed by a vertical list of settings options inside a rounded container.

Yelp: Food, Services & Reviews: A modal overlay centered on the screen, appearing over an activity feed list.

Deezer: Music Player, Podcast: Below the artwork, there is a row of three buttons: share, a three-dot menu, and a heart icon.

Icon buttons

Ascend: Bible Game: Header title, central mascot illustration, vertical list of selectable cards, and bottom navigation buttons.

Redfin: Buy, Sell & Rent Homes: Top navigation bar followed by a tabbed segment control, with a centered empty state illustration and text message below.

Flight Tracker +: The center of the screen features an illustration of stacked travel documents, including one with a QR code and another with a barcode.

Illustrations

SunSafe: UV Index & Tanning: This screen is a system-level photo picker interface integrated into the SunSafe app.

Planner 5D: AI Home Design: The top navigation bar includes a 'Back' button on the left and a 'Select' button on the right, both currently inactive or secondary.

ScanAny-PDF Scanner App: This screen displays a grid-based photo picker interface within a document scanning application.

Image pickers

Pick Up Limes: At the top, a date selector displays 'Fri 07 Jun '24' flanked by navigation arrows, with a calendar icon on the left and an info icon on the right.

VSCO: Photo & Video Editor: At the top of the screen, there is a header with a close 'X' icon and the title 'Simplify' accompanied by an information icon.

FLYP - Fashion Design Studio: The layout features a top navigation bar with a close button and an information icon, followed by a tabbed interface switching between 'Assistant' and 'Learning' (currently selected).

Information buttons

Layout for Instagram・Inpreview: A standard iOS keyboard is visible at the very bottom, indicating that the user is currently editing text.

ZARA: The bottom half of the screen is occupied by the iOS system keyboard, which is set to the numeric/symbolic layout.

Useless - Screen Time Control: The bottom half of the screen is occupied by the system keyboard, indicating an active search state.

Keyboards

Particle: Personalized News: The main content area displays a vertical list of search results, each featuring a source icon, source name, relative timestamp, article title, and author attribution.

Windy.app — Wind, Tides, Radar: The interface features a dark theme with a list of categories, each containing segmented control buttons for selecting specific units or display modes.

Too Good To Go: Save Good Food: The layout is a clean, vertical list organized into four distinct sections: 'SETTINGS', 'COMMUNITY', 'SUPPORT', and 'OTHER'.

Lists

IDAGIO Stream Classical Music: This screen from the IDAGIO app displays a loading or buffering state while playing classical music.

Rooms: In the center, a 3D isometric room corner is visible, overlaid with a white modal box displaying the text 'Creating screensdesigns/bedr...' and a loading spinner icon.

Particle: Personalized News: Below the question, a loading state is visible with the text 'Finding relevant articles...' and a small spinner icon.

Loading spinners

Logos

Yelp: Food, Services & Reviews: The map is populated with numerous red Yelp-branded location pins indicating various businesses.

Hypelist: Create & Share Lists: In the center-right, a small pop-up menu displays sorting options: 'Popularity' with a star icon and 'Distance' with a location pin icon.

Yelp: Food, Services & Reviews: The main area is an interactive map populated with numerous red Yelp-branded location pins.

Map markers

Deezer: Music Player, Podcast: This is a search results screen in the Deezer music app, displaying results for the query 'apt'.

AI Summary - Meeting Notes: This screen displays an AI-powered note-taking interface with an active bottom sheet for playback speed control.

Voice Recorder－Audio Memos Арр: This screen displays an audio playback and transcription interface for a voice recording app.

Media controls

ChatGPT: At the bottom, a persistent input bar features a plus icon for attachments, a text input field labeled 'Ask anything', a microphone icon for voice input, and a stop/send button.

SnoreLab : Record Your Snoring: At the bottom of the screen, there is a microphone icon with a downward arrow, followed by the instruction 'slide to stop session', indicating a swipe-to-action gesture to end the current recording session.

Voice Recorder－Audio Memos Арр: The screen is vertically organized with a title at the top, a large waveform visualization in the middle, a digital timer below that, and a control bar at the bottom.

Microphone buttons

ZARA: A standard iOS numeric keypad is visible at the bottom of the screen, allowing the user to input their phone number.

Calorie Counter by Numify: The bottom half of the screen is occupied by a standard numeric keypad for entering nutritional data.

Budget app - spending tracker: The bottom half of the screen is a full numeric keypad with standard digits, a backspace key, mathematical operators, a currency toggle ('USD'), and a large yellow checkmark button to confirm the entry.

Numeric keypads

Vrbo Vacation Rentals: This is an email verification screen for the Vrbo app, featuring a dark-themed interface.

ZARA: This is a phone number verification screen in the Zara app.

ZEDGE™ Ringtones & Wallpapers: This screen is a modal email verification interface for the ZEDGE app.

Verification code inputs

Budget app - spending tracker: At the bottom of the screen, a horizontal pagination indicator shows that this is the third step in a multi-page onboarding flow.

ChatGPT: A horizontal pagination indicator with nine dots shows that the user can swipe through multiple voice options.

SnoreLab : Record Your Snoring: Top navigation bar, header text, central product mockup, testimonial section with pagination dots, primary CTA button, and bottom navigation bar.

Pagination

Premier League - Scores, News: This screen is a password creation and account setup page for the Premier League app.

Good Food: Recipe Finder: The form includes two primary input fields for 'Email address' (pre-filled with an example) and 'Password' (with a visibility toggle icon).

Vivino: Drink The Right Wine: This is a mobile sign-up screen for the Vivino app, specifically the password creation step.

Password fields

Vivino: Drink The Right Wine: A single text input field is provided for the user to enter their password, which includes a 'Show' toggle button on the right side to reveal the characters.

Meetup: Social Events & Groups: The password field includes a visibility toggle icon and a strength indicator bar below it, noting that at least 10 characters are required.

Premier League - Scores, News: Below these, there is an 'or' separator, followed by an email address input field and a 'Create Password' input field with a 'Show' toggle.

Password visibility toggles

Widgetable: Besties & Couples: A promotional tag indicates '50% OFF' and text highlights a 'buy 10 get 1 free' deal.

SubPilot: Cancel Subscriptions: The top section features a dark-themed card highlighting the value proposition of 'Expert Negotiators Working For You,' explaining that the service negotiates with providers to save users money, with a 'no-save, no-pay' guarantee.

HBX | Globally Curated Fashion: A prominent blue 'Checkout' button serves as the primary call to action.

Payment buttons

Useless - Screen Time Control: Top header text, central image, central input field, bottom navigation/action buttons.

Yik Yak: Header text at top, input field below, help link in middle, large CTA button, and system keyboard at bottom.

ZARA: A standard iOS numeric keypad is visible at the bottom of the screen, allowing the user to input their phone number.

Phone number inputs

Planner 5D: AI Home Design: The screen features a header with a close button and the title 'Compare plans'.

Litres: Audio: Modal window with a header, two selectable pricing cards, and a bottom-aligned primary action button.

Calorie Counter by Numify: Below this, there is a horizontal selection of three subscription plans: '3 months' ($29.99, $2.26/week, 'Popular'), '12 months' ($69.99, $1.34/week, 'Best value'), and '1 week' ($5.99/week).

Plan selectors

Zalando – Online fashion: This screen displays a video player interface overlaid with a playback speed selection menu.

South China Morning Post: News: This screen displays a modal overlay for selecting playback speed, positioned over a news article reading interface from the South China Morning Post.

South China Morning Post: News: This screen displays a video player interface for the South China Morning Post app, featuring a semi-transparent dark overlay menu for adjusting playback speed.

Playback speed controls

Fishbox - Smart Fishing App: A narrow story progress bar spans the top of the fishing tip.

Plant Identifier, Care: Planty: Segmented markers above the question show position in the setup sequence.

Expedia: Hotels, Flights, Cars: A horizontal reward tracker places the current trip count beside the next tier.

Progress indicators

FLYP - Fashion Design Studio: The screen features a large, centered QR code on a light gray background, with the handle '@epicsteps' displayed prominently below it.

Blinq: Digital Business Card: Top header with close button and title, central QR code area, instructional text, and a bottom list of action buttons.

Blinq: Digital Business Card: The center of the screen displays a large, square QR code scanning frame overlaid on the camera view, with the instruction 'Scan contact information' above it.

QR codes

Redfin: Buy, Sell & Rent Homes: Radio controls let the user choose between homes for sale and rentals.

Budget app - spending tracker: Under 'Lent', there is one option: 'loan 1' (with a money bag icon and a plus sign), which has an empty circular radio button next to it.

Quinn - Audio Stories: The bottom sheet modal, titled 'Filter', presents a list of radio-button style selection options: 'All' (currently selected), 'Favorited playlists', 'My playlists', and 'Quinn playlists'.

Radio buttons

Bible Chat: Daily Devotional: The card lists five distinct items: 'Membership' (currently showing 'Trial' status), 'Change Premium Plan', 'Redeem Promotional Code', 'Restore purchases', and 'Gift Bible Chat'.

Heyyyy: Stories that text back: A 'Restore Purchases' link is also present.

Claude by Anthropic: Further down, there is a 'Restore purchases' option accompanied by a circular refresh icon.

Restore purchase buttons

invideo AI: AI Video Generator: At the bottom of the modal, there are two primary action buttons: 'Back' and 'Save'.

Everlook- Face & Body Editor: Above the photo, there is a top navigation bar with a back arrow on the left and a download/save icon on the right.

Widgetable: Besties & Couples: The top navigation bar includes a back button, a copyright symbol icon, a 'Preview' button, and a 'Save' button.

Save buttons

Magic Tiles 3™: Piano Game: At the top, there is a search bar with a placeholder text 'Search for songs or artists.....' and a 'VIP' ticket icon in the top right corner.

Plane Finder ⁃ Flight Tracker: Below the title 'ORD Arrivals', there is a search bar for filtering flights, followed by a horizontal filter row with a clock icon, a 'Landed' toggle, and an 'All Terminals' dropdown menu.

EveryDollar: Budget Management: Below the header is a search bar with a magnifying glass icon.

Search bars

Deezer: Music Player, Podcast: Below the search bar, the screen displays a 'Recent searches' section with a trash icon for clearing history.

WebNovel - Read Novels & Manga: Top navigation bar followed by a search input, an advanced search button, a popular searches section, and a tabbed list of ranked categories.

Fishbrain - Fishing App: The main content area is divided into two sections: 'Recent searches' and 'Nearby waters'.

Search suggestions

Flight Tracker +: At the top, there is a navigation header with a history icon, a notification bell, and a segmented control to toggle between 'My Flights' and 'Trips', with 'Trips' currently selected.

Scanner App: Genius Scan: The top of the screen features a 'Crop' button on the right and a segmented control to toggle between 'All images' and 'Documents'.

EveryDollar: Budget Management: The top section features a green header with a title 'Insights' and a segmented control bar with four tabs: 'Spending Totals' (selected), 'Spending Details', 'Monthly Income', and 'Income vs.

Segmented controls

FLYP - Fashion Design Studio: At the bottom, a text input field contains the typed word 'hi' and a clear/delete icon, positioned next to a send button represented by an upward-pointing arrow.

Bible Chat: Daily Devotional: At the bottom, there is a text input field for the user to type questions, accompanied by a send icon.

Useless - Screen Time Control: The bottom section features a 'Hide chat' toggle, a text input field currently containing the word 'Hey!', and a send button.

Send buttons

Plane Finder ⁃ Flight Tracker: Navigation controls at the top include a close button and a share icon.

Bible Chat: Daily Devotional: Hero image at the top with title, followed by a white content card containing plan details and a bottom sticky action button.

Hypelist: Create & Share Lists: Top navigation bar, central list preview card, Instagram share button, horizontal contact list, and bottom row of social sharing icons.

Share buttons

Klook: Travel & Activities: The screen features a two-column layout with a vertical navigation list on the left (Airlines, Departure airports, Arrival airports, Departure times) and a corresponding content area on the right.

WebNovel - Read Novels & Manga: The top navigation bar features tabs for 'Novel', 'Comic', and 'Fan-fic'.

SHEIN - Shopping Online: The top of the screen features a search bar with camera and wishlist icons, and a horizontal tab navigation for categories like All, Women, Curve, Kids, Men, Home, and Beauty.

Side navigation

Google Gemini: The layout is extremely sparse, containing only a close ('X') icon in the top-left corner and a prominent 'Skip' button centered near the bottom.

Filmit AI: AI Cinematic Video: In the top right corner, there is a circular 'Skip' button with a thin white border, allowing the user to bypass the onboarding sequence.

Useless - Screen Time Control: The screen prompts the user to enter a referral code with the heading 'Do you have a referral code?' and a subtext explaining that users can skip this step if they weren't invited by a friend.

Skip buttons

VSCO: Photo & Video Editor: A horizontal slider is positioned below the tabs, currently set to 0.0.

Bible Chat: Daily Devotional: A modal overlay is visible at the bottom, containing a horizontal slider for adjusting the font size, represented by a small 'A' on the left and a large 'A' on the right.

Windy.app — Wind, Tides, Radar: A bottom control bar allows the user to navigate through time, with 'Tue, May 13' selected and a time slider ranging from 2 AM to 8 PM.

Sliders

Particle: Personalized News: At the bottom, a prominent black 'Continue with Apple' button serves as the primary call to action.

Social sign-in buttons

Bible Chat: Daily Devotional: The layout features three distinct testimonial cards stacked vertically, each containing a user name, a five-star rating, and a short review highlighting the benefits of using the app's home screen widget.

Tattoo AI - Tattoo Design: This is an onboarding or social proof screen for the Tattoo AI app, featuring a dark-themed interface with a focus on user testimonials and industry recognition.

Calorie Counter by Numify: This is an onboarding screen for a calorie tracking app, featuring a social proof testimonial.

Testimonials and social proof

Good Food: Recipe Finder: The main content area consists of a two-column grid of recipe cards, each showing a high-quality food photo, the recipe title, cooking time, and a star rating.

Too Good To Go: Save Good Food: The background shows details about the surprise bag, including a price of US$3.99 (discounted from US$12.00), a 4.7-star rating, and collection time information.

Pick Up Limes: A horizontal metadata bar includes tags for '25 min', 'exclusive', 'Breakfast', 'Freezer-friendly', and a star rating of (7).

Star ratings

SunSafe: UV Index & Tanning: Minus and plus buttons flank the selected UV alert threshold.

Expedia: Hotels, Flights, Cars: Below this, the user can adjust the number of 'Adults' and 'Children' (ages 0 to 17) for 'Room 1' using circular plus and minus buttons.

Vivino: Drink The Right Wine: A bottle count sits between minus and plus controls in the cellar sheet.

Steppers

Precip - Rain Totals & Gauge: The top section, titled 'Recent totals', presents a table with columns for 'Period', 'Rain', 'Snow', and 'Total (liquid)'.

Yik Yak: Below this, a red header section contains a back button, the title 'Leaderboard', a subtitle 'Worst of Canvas', and two selectable tabs: 'All Time' and 'Winter '24'.

Fishbox - Smart Fishing App: Top navigation bar with location name, horizontal date selector, hourly weather data table, solunar moon phase section, and bottom navigation bar.

Tables

WeMoms - Pregnancy & Baby App: The “For you” tab appears at middle.

Fishbox - Smart Fishing App: The “Assistant” tab appears at top left.

Noxogy Sleep Tracker: The “Statistics” tab appears at top center.

Tabs

Vrbo Vacation Rentals: Further down, there is a dropdown for 'Country code', a 'Phone number' field, and a large multi-line text area labeled 'Leave a message' with a character counter (0/1500).

FLYP - Fashion Design Studio: Further down, there is an 'Enter Your Bio' section with a text area containing the phrase 'lez do it'.

Text areas

WeMoms - Pregnancy & Baby App: The “Password input” field appears at center.

Fishbox - Smart Fishing App: The “Name” field appears at top middle.

Debatium - Couple Game Convo: The “Add a player” field appears at bottom.

Text fields

Fishbrain - Fishing App: The bottom half of the screen is a date and time picker interface.

Bible Chat: Daily Devotional: Below this, a time-picker input field displays 'Set Time' with a current selection of '07 : 09 PM'.

Zutobi: Permit & Driving Prep: Below the days, there is a time-picker interface with three scrolling columns for hour, minute, and AM/PM selection.

Time pickers

Particle: Personalized News: A small confirmation at the top says the topic was added to the feed.

Yelp: Food, Services & Reviews: A saved confirmation offers a link to add the item to another collection.

Toasts

Fishbox - Smart Fishing App: The “Hot spots toggle” control appears at middle list, first item.

Noxogy Sleep Tracker: The “Time To Sleep toggle” control appears at top right.

Wallcraft – Wallpapers, live: The “Disable all ads” control appears at top area.

Toggles

Tiny Scanner - PDF Scanner App: Top navigation bar, followed by a title, a secondary toolbar with search and sorting, and a vertical list of document items, with a floating action button at the bottom right.

CamScanning: AI Measure & Scan: Top navigation bar, central canvas area with card design, bottom toolbar with three action buttons.

VSCO: Photo & Video Editor: The bottom toolbar provides editing controls including 'Deselect', 'Edit', 'Replace', 'Copy', 'Opacity', 'Backward', and 'Forward'.

Toolbars

Magic Tiles 3™: Piano Game: Below this, a prominent blue rectangular tooltip box provides instructional text: 'Keep playing the song at higher speed to achieve crowns'.

Scroll The Bible: A small instructional tooltip at the bottom left prompts the user to 'Tap or slide to jump to any verse'.

Wikiloc - Trails of the World: A yellow tooltip at the top indicates 'Offline maps available for this area!'.

Tooltips and coach marks

Scroll The Bible: At the top, there is a 'Back' button and a title 'Explain Easier' with the verse reference 'Genesis 1:1'.

SubPilot: Cancel Subscriptions: The top of the screen features a back arrow for navigation.

Vivino: Drink The Right Wine: The top navigation bar includes a back button, the title 'Ratings', and a search icon.

Top navigation

Meetup: Social Events & Groups: A modal overlay centered on the screen, positioned over a subscription selection interface with a bottom-anchored primary action button.

Eppika: Read & Learn Languages: This screen is a notification permission or trial reminder prompt within the Eppika app.

Bible Chat: Daily Devotional: Centered text block in the middle of the screen with a large button at the bottom.

Trial reminders and timelines

Zalando – Online fashion: A horizontal 'Item removed' snackbar with an 'Undo' button is visible at the bottom of the screen, just above the persistent bottom navigation bar.

Zalando – Online fashion: At the bottom of the screen, a persistent snackbar notification confirms 'Item removed' with an 'Undo' button.

Redfin: Buy, Sell & Rent Homes: A black snackbar notification at the bottom informs the user that 'Popular around the country is hidden' with an 'Undo' button.

Undo and redo

SnoreLab : Record Your Snoring: The lower half of the screen contains a vertical scrolling picker wheel for selecting different ambient sounds, with 'Rain' currently highlighted in a semi-transparent rounded rectangle.

10K Runner, Couch to 10K Run: Top navigation bar, central question and value display, bottom scrolling picker interface.

SnoreLab : Record Your Snoring: Below this, a vertical scrolling picker allows the user to select a numerical weight value (currently set to 57) and a unit (kg or lbs).

Wheel pickers

A good reference is just the start.Explore the full library.

See the full library See plans