UI Patterns & Screens
257 real screens across Mobbin (authenticated), Page Flows, Nicely Done, Godly, 21st.dev, UI-Patterns and Framer. Flows, screen types, UI elements — web + mobile. Click any card for its source.
All
mobbin (63)
pageflows (58)
nicelydone (38)
godly (34)
21st-dev (28)
uipatterns (20)
framer (16)
257 screens
uipatterns · UI Patterns
Wizard
uipatterns · UI Patterns
Carousel
uipatterns · UI Patterns
Breadcrumbs
uipatterns · UI Patterns
Pagination
uipatterns · UI Patterns
Progressive Disclosure
uipatterns · UI Patterns
Autocomplete
uipatterns · UI Patterns
Modal
uipatterns · UI Patterns
Notifications
uipatterns · UI Patterns
Cards
uipatterns · UI Patterns
Continuous Scrolling
uipatterns · UI Patterns
Steps Left
uipatterns · UI Patterns
Inplace Editor
uipatterns · UI Patterns
Password Strength Meter
uipatterns · UI Patterns
Calendar Picker
uipatterns · UI Patterns
Navigation Tabs
uipatterns · UI Patterns
Morphing Controls
uipatterns · UI Patterns
Undo
uipatterns · UI Patterns
Good Defaults
uipatterns · UI Patterns
Input Feedback
uipatterns · UI Patterns
Tagging
nicelydone · Onboarding (pages)
Dock
nicelydone · Onboarding (pages)
Bloom
nicelydone · Onboarding (pages)
Appwrite
nicelydone · Onboarding (pages)
Voiceflow
nicelydone · Checkout (pages)
Dock
nicelydone · Checkout (pages)
Beside
nicelydone · Checkout (pages)
Copilot
nicelydone · Checkout (pages)
Lovable
nicelydone · Settings (pages)
Dock
nicelydone · Settings (pages)
Bloom
nicelydone · Settings (pages)
Appwrite
nicelydone · Settings (pages)
Voiceflow
nicelydone · Empty state (pages)
Dock
nicelydone · Empty state (pages)
Bloom
nicelydone · Empty state (pages)
Appwrite
nicelydone · Empty state (pages)
Voiceflow
nicelydone · Pricing (pages)
Dock
nicelydone · Pricing (pages)
Bloom
nicelydone · Pricing (pages)
Appwrite
nicelydone · Pricing (pages)
Voiceflow
nicelydone · Command palette (pages)
Flora
nicelydone · Command palette (pages)
Assembly
nicelydone · Command palette (pages)
Lovable
nicelydone · Command palette (pages)
Liveblocks
nicelydone · Dashboard (pages)
Gumloop
nicelydone · Dashboard (pages)
Vimeo
nicelydone · Dashboard (pages)
Bitly
nicelydone · Dashboard (pages)
Monarch
nicelydone · Modal / Dialog (components)
Dock
nicelydone · Modal / Dialog (components)
Appwrite
nicelydone · Modal / Dialog (components)
Voiceflow
nicelydone · Onboarding flow (flows)
Dock
nicelydone · Onboarding flow (flows)
Bloom
nicelydone · Onboarding flow (flows)
Appwrite
nicelydone · Cancel subscription (flows)
Bloom
nicelydone · Cancel subscription (flows)
Beside
nicelydone · Cancel subscription (flows)
Mailchimp
nicelydone · Cancel subscription (flows)
Meetup
godly · Sites
Span
godly · Sites
Searchable
godly · Sites
Throxy
godly · Sites
C Callsine
godly · Sites
L Liftoff
godly · Sites
B Ballpark
godly · Sites
Thrive
godly · Sites
Detail
godly · Sites
Tilt
godly · Sites
Visitors
godly · Apps
Zoom
godly · Apps
Zolvy
godly · Apps
Zoho
godly · Apps
Zoe:
godly · Apps
Zazzle
godly · Apps
Zillow
godly · Apps
ZipRecruiter
godly · Apps
Yuka
godly · Apps
YouTube
godly · Apps
YouMail:
godly · Sections
Visitors
godly · Sections
Trust
godly · Sections
Solidroad
godly · Sections
M Markopolo
godly · Logos
Span
godly · Logos
Searchable
godly · Logos
Throxy
godly · Logos
Detail
godly · Logos
Tilt
godly · Logos
Visitors
godly · Logos
Trust
godly · Logos
Solidroad
godly · Sections
Visitors (section)
godly · Sections
Trust (section)
21st-dev · Heroes
canvas
21st-dev · Heroes
hero-section-dark
21st-dev · Heroes
shape-landing-hero
21st-dev · Heroes
text-cursor-proximity
21st-dev · Heroes
animated-gradient-background
21st-dev · Backgrounds
shape-landing-hero
21st-dev · Backgrounds
background
21st-dev · Backgrounds
background-circles
21st-dev · Backgrounds
background-paths
21st-dev · Backgrounds
glow
21st-dev · Features
shadcnblocks-com-feature108
21st-dev · Features
bento-grid
21st-dev · Features
gallery6
21st-dev · Features
accordion-feature-section
21st-dev · Features
gallery4
21st-dev · Templates
folio-open-source-data-intelligence-landing-template
21st-dev · Templates
vertex-ai-workflow-automation-landing-template
21st-dev · Templates
evolv-ai
21st-dev · Templates
agent-ai
21st-dev · Templates
orbit-mail
21st-dev · Shaders
ethereal-whispers
21st-dev · Shaders
oceanic-currents
21st-dev · ASCII
starry-nights
21st-dev · ASCII
terminal-pikachu
21st-dev · ASCII
new1
21st-dev · ASCII
d60-hero
21st-dev · ASCII
act-of-creation
21st-dev · Themes
claude-amber
framer · Gallery Components
Inertia Gallery · Smooth Inertia-Based Image Gallery
framer · Gallery Components
Phantom Gallery · Image Gallery Component
framer · Gallery Components
Focus Gallery · Interactive scroll gallery
framer · Gallery Components
Motion Gallery · Motion you can feel
framer · Gallery Components
Bento Gallery · Bento Gallery Component
framer · Gallery Components
Filterable Gallery · Free Interactions Component
framer · Gallery Components
CMS Scroll Gallery · A different kind of scroller
framer · Live Demo
Wave Gallery (live)
framer · Scroll & Hero
Scroll SVG Reveal · Premium Interactions Component
framer · Scroll & Hero
Floating Parallax · All-in-One Parallax Engine.
framer · Scroll & Hero
Premium Pixel Hero · Editorial hero with pixel reveal
framer · Scroll & Hero
Stack Text Reveal · Awwwards-style text reveal effect
framer · Carousels & FX
Spiral 3D Slider · Customizable 3D Spiral Slider
framer · Scroll & Hero
Mask Hover Reveal · F1 style hover image reveal
framer · Carousels & FX
Halftone Media FX · Premium Layout Component
framer · Scroll & Hero
Shape Spotlight · A dynamic cursor glow shape effect
mobbin · iOS Screens · Signup
Signup — Patreon screen 1
mobbin · iOS Screens · Signup
Signup — Airbnb screen 2
mobbin · iOS Screens · Signup
Signup — Airbnb screen 3
mobbin · iOS Screens · Login
Login — Patreon screen 1
mobbin · iOS Screens · Login
Login — Airbnb screen 2
mobbin · iOS Screens · Login
Login — Airbnb screen 3
mobbin · iOS Screens · Payment Method
Payment Method — Etsy screen 1
mobbin · iOS Screens · Payment Method
Payment Method — Turo screen 2
mobbin · iOS Screens · Payment Method
Payment Method — Grab screen 3
mobbin · iOS Screens · Search
Search — Gojek screen 1
mobbin · iOS Screens · Search
Search — Airbnb screen 2
mobbin · iOS Screens · Search
Search — Spotify screen 3
mobbin · iOS Screens · Notifications
Notifications — OKX screen 1
mobbin · iOS Screens · Notifications
Notifications — Klarna screen 2
mobbin · iOS Screens · Notifications
Notifications — Klarna screen 3
mobbin · iOS Screens · Empty State
Empty State — Revolut screen 1
mobbin · iOS Screens · Empty State
Empty State — ChatGPT screen 2
mobbin · iOS Screens · Empty State
Empty State — Wise screen 3
mobbin · iOS Screens · Permission
Permission — Revolut screen 1
mobbin · iOS Screens · Permission
Permission — Airbnb screen 2
mobbin · iOS Screens · Permission
Permission — Square Go screen 3
mobbin · iOS Screens · Confirmation
Confirmation — Vivid screen 1
mobbin · iOS Screens · Confirmation
Confirmation — Revolut screen 2
mobbin · iOS Screens · Confirmation
Confirmation — Uber screen 3
mobbin · iOS Screens · Dashboard
Dashboard — Plum screen 1
mobbin · iOS Screens · Dashboard
Dashboard — Peloton screen 2
mobbin · iOS Screens · Dashboard
Dashboard — Bing screen 3
mobbin · iOS Screens · Product Detail
Product Detail — Airbnb screen 1
mobbin · iOS Screens · Product Detail
Product Detail — Airbnb screen 2
mobbin · iOS Screens · Product Detail
Product Detail — Airbnb screen 3
mobbin · iOS UI Element · Bottom Sheet
Bottom Sheet — Gentler Streak screen 1
mobbin · iOS UI Element · Bottom Sheet
Bottom Sheet — Luma screen 2
mobbin · iOS UI Element · Bottom Sheet
Bottom Sheet — Monzo screen 3
mobbin · iOS UI Element · Tab Bar
Tab Bar — Airbnb screen 1
mobbin · iOS UI Element · Tab Bar
Tab Bar — Revolut screen 2
mobbin · iOS UI Element · Tab Bar
Tab Bar — Chase UK screen 3
mobbin · iOS UI Element · Segmented Control
Segmented Control — Monzo screen 1
mobbin · iOS UI Element · Segmented Control
Segmented Control — OKX screen 2
mobbin · iOS UI Element · Segmented Control
Segmented Control — Deezer screen 3
mobbin · iOS UI Element · Toast
Toast — Klarna screen 1
mobbin · iOS UI Element · Toast
Toast — Luma screen 2
mobbin · iOS UI Element · Toast
Toast — Airbnb screen 3
mobbin · iOS UI Element · Stepper
Stepper — Swiggy screen 1
mobbin · iOS UI Element · Stepper
Stepper — Starling Bank screen 2
mobbin · iOS UI Element · Stepper
Stepper — Cash App screen 3
mobbin · iOS UI Element · Card
Card — Airbnb screen 1
mobbin · iOS UI Element · Card
Card — Chase UK screen 2
mobbin · iOS UI Element · Card
Card — MyFitnessPal screen 3
mobbin · Web Screens · Dashboard
Dashboard — Cake Equity screen 1
mobbin · Web Screens · Dashboard
Dashboard — Quicken screen 2
mobbin · Web Screens · Dashboard
Dashboard — Remote screen 3
mobbin · Web Screens · Login
Login — folk screen 1
mobbin · Web Screens · Login
Login — Remote screen 2
mobbin · Web Screens · Login
Login — Sana AI screen 3
mobbin · Web Screens · Signup
Signup — Sana AI screen 1
mobbin · Web Screens · Signup
Signup — Perplexity screen 2
mobbin · Web Screens · Signup
Signup — Klook screen 3
mobbin · Web Screens · Empty State
Empty State — Quicken screen 1
mobbin · Web Screens · Empty State
Empty State — beehiiv screen 2
mobbin · Web Screens · Empty State
Empty State — Google Gemini screen 3
mobbin · Web Screens · Pricing
Pricing — Notion screen 1
mobbin · Web Screens · Pricing
Pricing — PandaDoc screen 2
mobbin · Web Screens · Pricing
Pricing — Shop screen 3
pageflows · IOS · Sign-up
Onboarding Microsoft Loop iOS.mp48f82
pageflows · IOS · Sign-up
Onboarding Zocdoc iOS.mp46715
pageflows · IOS · Sign-up
Onboarding Turo iOS YSIRezw.mp4527a
pageflows · IOS · Sign-up
Change Password Whatnot iOS.mp4-screensh
pageflows · IOS · Checkout & Payment
Booking a Ride Turo iOS.mp46bee
pageflows · IOS · Checkout & Payment
Buying Something Whatnot iOS.mp4bf67
pageflows · IOS · Checkout & Payment
Booking Hostel Hostelworld iOS.mp48951
pageflows · IOS · Checkout & Payment
IMG 1284.PNG
pageflows · IOS · Upgrade & Upsell
Upgrading Account Life360 iOS.mp42918
pageflows · IOS · Upgrade & Upsell
Upgrading Account ZohoCRm iOS.mp494dc
pageflows · IOS · Upgrade & Upsell
Upgrading Account Grab iOS.mp402ab
pageflows · IOS · Upgrade & Upsell
Upgrading Account ShutEye iOS.mp44345
pageflows · IOS · Search
Searching Clay iOS.mp48eb1
pageflows · IOS · Search
Searching 1.mp4f9c6
pageflows · IOS · Search
Searching Me iOS.mp41731
pageflows · IOS · Search
Searching edited.mp46a70
pageflows · IOS · Product detail
Sharing Shop iOS.mp46dcc
pageflows · IOS · Product detail
Buying Something Whatnot iOS.mp479ba
pageflows · IOS · Product detail
General Browsing Grab iOS.mp4e14a
pageflows · IOS · Product detail
IMG 4451 Z2PUXLm.PNG
pageflows · WEB · Sign-up
Onboarding 6S2fBIf.mp4cd1c
pageflows · WEB · Sign-up
Onboarding L8wuGqF.mp4a709
pageflows · WEB · Sign-up
Onboarding on Neo.movf38e
pageflows · WEB · Sign-up
Onboarding mvzWiG9.mp4f48e
pageflows · WEB · Checkout & Payment
Buying a giftcard.mp40920
pageflows · WEB · Checkout & Payment
Placing an order 1.mp4dbab
pageflows · WEB · Checkout & Payment
Upgrading account.mp425ae
pageflows · WEB · Checkout & Payment
Buying something on Shop .mp4ad9e
pageflows · WEB · Upgrade & Upsell
Upgrading 3hxDcoI.mp4b427
pageflows · WEB · Upgrade & Upsell
Upgrading iBZ4eNm.mp4f07a
pageflows · WEB · Upgrade & Upsell
Onboarding bkqdQLp.mp44efa
pageflows · WEB · Upgrade & Upsell
Upgrading account on Harvest.mp4d09e
pageflows · ANDROID · Sign-up
Onboarding on Todoist.mp4c188
pageflows · ANDROID · Sign-up
Accepting an invite on Dropbox du9GGYh.m
pageflows · ANDROID · Sign-up
Onboarding on LinkedIn Android .mp43028
pageflows · ANDROID · Sign-up
Onboarding on Gauth Android .mp43215
pageflows · ANDROID · Product detail
Adding a product to basket on Target.mp4
pageflows · ANDROID · Product detail
Ordering on Redbubble Android .mp4a772
pageflows · ANDROID · Product detail
Buying something on TikTok.mp44d09
pageflows · ANDROID · Product detail
Adding to Cart on Shein Android.mp4c271
pageflows · IOS Flow · Onboarding
Onboarding on Coinbase.mp4eb93
pageflows · IOS Flow · Onboarding
Onboarding on Coinbase.mp44807
pageflows · IOS Flow · Onboarding
Onboarding on Coinbase.mp4d849
pageflows · IOS Flow · Logging in
Logging In Clay iOS.mp4-screenshot-
pageflows · IOS Flow · Logging in
Logging In Clay iOS.mp47aae
pageflows · IOS Flow · Logging in
Logging In Clay iOS.mp49956
pageflows · IOS Flow · Cancellation & Churn
Canceling Coinbase One.mp4-screenshot-
pageflows · IOS Flow · Cancellation & Churn
Canceling Coinbase One.mp4db8d
pageflows · IOS Flow · Cancellation & Churn
Canceling Coinbase One.mp49258
pageflows · IOS Flow · Cancellation & Refund
Cancel Booking Grab iOS.mp4-screenshot-
pageflows · IOS Flow · Cancellation & Refund
Cancel Booking Grab iOS.mp4af94
pageflows · IOS Flow · Cancellation & Refund
Cancel Booking Grab iOS.mp478d5
pageflows · IOS Flow · Enabling / Permissions
Cancel Booking Gojek iOS.mp4-screenshot-
pageflows · IOS Flow · Enabling / Permissions
Cancel Booking Gojek iOS.mp41ff7
pageflows · IOS Flow · Enabling / Permissions
Cancel Booking Gojek iOS.mp4b6b4
pageflows · ANDROID Flow · Onboarding
Onboarding on Talkie.mp4-screenshot-
pageflows · ANDROID Flow · Onboarding
Onboarding on Talkie.mp4a841
pageflows · ANDROID Flow · Onboarding
Onboarding on Talkie.mp4ba6c