screen templates 197 screens ·

live

expo web builds197 screens · index — preview relay offline

Every frame is the real screen running — click any phone to grab its source.

The live previews aren't reachable right now, so the wall is parked — the same 197 templates are indexed below.

auth 19 screens

s/01 auth-account-switcher iOS account picker — pinned current account with badge, tappable alternate profiles, add/manage rows, sign-out-all footer s/02 auth-biometric-setup Face ID opt-in — scan-frame viewfinder with sweep line, iOS use-case toggles, enable and not-now actions s/03 auth-delete-account Destructive deletion flow — permanent-loss alert, concrete data summary, data-export escape hatch, and type-DELETE confirmation gate s/04 auth-forgot-password Email reset-request form with validation and a success state confirming the code was sent s/05 auth-grow-auth Ugrow Uauth screen s/06 auth-login Email/password sign-in with validation, remember me, social buttons, and forgot-password link s/07 auth-login-social Dark social-first sign-in: provider wall + inline email form s/08 auth-nouri-onboarding Nouri Onboarding screen. s/09 auth-onboarding Horizontal paging onboarding with per-page accent tints, layered illustration tiles, depth parallax on swipe, animated progress dots, skip, and continue/get-started actions s/10 auth-otp-verification Six-digit code entry with auto-advance cells, backspace navigation, resend countdown, and auto-submit s/11 auth-password-reset New-password form — segmented strength meter, live requirements checklist, confirm-match validation, and reset CTA s/12 auth-phone-verification Phone-number entry with country-code picker, a numbered what-happens-next flow, and carrier-rates footnote s/13 auth-quiz Multi-step personalization quiz — progress bar with step counter, selectable option cards (single + multi), animated question transitions, and a pinned continue button s/14 auth-session-devices Grouped sessions list — current device badge, per-row sign-out on other sessions, revoke-all destructive footer s/15 auth-signup Create-account flow with name/email/password fields, terms acceptance, and inline validation s/16 auth-social-auth Provider-first sign-in — member avatar proof, Apple and Google buttons with brand marks, email fallback, and legal footer s/17 auth-split-auth Black orbit hero over white sheet: login/register segmented toggle, icon fields, social pair s/18 auth-verify-identity KYC stepper — document-type radio choice, requirement facts, step progress, and continue CTA s/19 auth-welcome First-launch splash — centered brand mark and hero headline over stacked social sign-in pills, an email CTA, a terms line, and a sign-in link

chat 12 screens

s/20 chat-ai Assistant conversation — spark-marked canvas replies, user bubbles, animated thinking indicator, starter-card welcome state, and an attach + send composer pinned to the keyboard s/21 chat-ai-assistant AI chat: persona header, suggestion chips, typing indicator, working composer s/22 chat-channels-list Workspace channels with unread badges and live rooms s/23 chat-chat-info Conversation detail with hero avatar, quick actions, shared-media strip, member list, notification settings, and a destructive leave row s/24 chat-chat-list Searchable conversation rows with an active-now rail, presence dots, pinned/muted affordances, typing + draft states, unread badges, and a compose action s/25 chat-chat-media Media, links and docs tabs for a chat s/26 chat-chat-thread One-on-one chat with grouped bubbles, photo messages, day separators, tapback reactions, check-mark read receipts, animated typing indicator, and a pill composer s/27 chat-create-group Name a group and pick members s/28 chat-group-info Group profile with members and controls s/29 chat-message-requests Accept or delete requests from unknown senders s/30 chat-new-message Contact picker sheet with a search field, new-group row, and recent plus alphabetically sectioned contacts with sticky headers and presence dots s/31 chat-starred-messages Starred messages with jump-to-chat

core 26 screens

s/32 core-accessibility Vision, motion, and hearing accessibility toggles. s/33 core-activity-log Security-relevant account events grouped by day. s/34 core-appearance Theme picker, accent swatches, and text-size slider. s/35 core-blocked-accounts Blocked-user list with inline unblock actions and empty state. s/36 core-data-export Category picker for a downloadable data archive with export history and progress. s/37 core-downloads Downloaded files with progress indicator and delete action. s/38 core-edit-profile Profile editor — Cancel/Save nav header that arms Save on edits, avatar with a change-photo badge, name/handle/bio/location/website fields, and a centered destructive sign-out row s/39 core-edit-profile-rows Dark edit profile: inline-editable value rows, camera-badge avatar, save states s/40 core-error-state Offline error page: icon, message, and a retry that recovers s/41 core-feedback Topic chips, message composer, and submit flow with confirmation. s/42 core-help-center Search-first support — filterable FAQ accordion with live result count, plus chat/email contact rows and a docs link s/43 core-home-feed Time-aware greeting header, debounced search, category chip filters, and rich article cards with bylines and pull-to-refresh s/44 core-invite-friends Referral card with tappable copy-code pill and share CTA over a contacts list whose Invite buttons latch to an invited state s/45 core-language-region Language radio list plus region, temperature, and calendar preferences. s/46 core-linked-accounts Connected sign-in providers with connect and disconnect actions. s/47 core-notification-settings Channel-grouped push and email notification toggles with quiet hours. s/48 core-notifications Today/Earlier grouped rows with actor-byline structure, unread dots and tint, thumbnails, and swipe-to-read/delete actions s/49 core-paywall Subscription paywall — hero mark, feature checklist, selectable annual/monthly plan cards with best-value ribbon, trial CTA, and the terms/privacy/restore legal row s/50 core-privacy-settings Visibility and data-sharing toggles with links to blocked accounts and export. s/51 core-profile Large-avatar header with handle and meta row, edit action, pressable stats card, grouped menu list, and destructive logout s/52 core-report-issue Reason chips, context card, details field, and submit. s/53 core-saved-items Bookmarked products in a two-column photo grid with remove action. s/54 core-search Pinned search field, recent-search rows with per-item remove, trending chips, suggested rows, and a results state with empty state s/55 core-settings iOS grouped list — profile card row, tinted-icon navigation rows, toggles, centered destructive logout, and version footer s/56 core-storage-data Storage usage bar with per-category breakdown and cache clearing. s/57 core-terms-privacy Legal document index with in-app reader view.

ecommerce 29 screens

s/58 ecommerce-add-payment Live physical-card preview that fills in while typing — PAN grouping, brand detection, expiry/CVC/holder/ZIP fields — above a secure save bar s/59 ecommerce-address-book Saved addresses as labeled cards — icon well, default badge, per-card edit/delete, 'Set as default' — plus a dashed add-address slot s/60 ecommerce-cart Line items with thumbnails, quantity steppers and line totals, free-shipping progress with unlocked state, applied-promo row with live discount, and a shadowed sticky checkout bar s/61 ecommerce-category-list Browsable departments with featured collection card. s/62 ecommerce-checkout Grouped address, delivery-speed radio-row, and payment cards with a live order summary, express-checkout CTA, and a shadowed sticky secure pay bar s/63 ecommerce-checkout-steps Wizard checkout: address, payment, and review steps with a live indicator s/64 ecommerce-checkout-success Confetti burst over a completed progress-ring check, order number and receipt line, arriving-items card with ETA and address, and track/continue CTAs s/65 ecommerce-delivery-options Shipping speed picker with ETA, price, and recommended badge. s/66 ecommerce-filters-sort Sort radio list, category chips, and price ceiling with apply CTA. s/67 ecommerce-flash-sale Flash sale grid: live countdown, discount badges, claimed-stock bars, cart additions s/68 ecommerce-gift-cards Physical gift-card face carrying the running balance, a redeem-a-code field, the saved-cards balance list, and a buy-a-card row s/69 ecommerce-loyalty-points Points balance counting up inside a real progress-ring arc to the next tier, redeemable reward rows, and a signed earn/spend activity log s/70 ecommerce-order-cancel Recap card with item thumbs and refund destination, a radio-row reason picker with optional note, and a keep-vs-destructive-confirm sticky bar s/71 ecommerce-order-detail Status badge and step bar over line-item thumbnails, delivery address, payment tile, and receipt summary — with track, buy-again, and cancel actions s/72 ecommerce-orders Status filter chips and press-animated order cards with semantic status badges, thumbnail strips with +N more, ETAs, and contextual track/buy-again actions s/73 ecommerce-payment-methods Saved cards and wallets as brand-tile rows with a default badge, per-card delete, 'Set as default' links, and a dashed add-payment slot s/74 ecommerce-product-detail Paged full-bleed photo gallery with floating controls, option chips with sold-out sizes, size-guide link, shipping/returns promises, rating-summary reviews card, and a shadowed sticky add-to-bag bar s/75 ecommerce-product-detail-hero Marketplace PDP: floating photo chips, compare price, size chips, seller row, price in CTA s/76 ecommerce-product-grid Brand-led storefront header, fashion two-column 4:5 product feed with compare-at prices, ratings, filter + cycling-sort chips, wishlist hearts, and staggered card mount s/77 ecommerce-product-reviews Review hub — average rating with per-star breakdown bars, sort chips, verified-purchase cards with helpful toggles, and a pinned 'Write a review' bar s/78 ecommerce-promo-codes Manual code entry plus coupon rows — tracked-out code, offer, terms, and expiry — with per-row Apply and a grayed 'Used & expired' section s/79 ecommerce-recently-viewed Product photo grid ordered by view time with clear history. s/80 ecommerce-returns Select order items and a reason to request a prepaid return. s/81 ecommerce-search-results Live query field with trending chips and photo result grid. s/82 ecommerce-shop-assistant Ushop Uassistant screen s/83 ecommerce-store-home Shopfront with photo hero, store card, category rail, and product grid. s/84 ecommerce-tracking Delivery tracking — ETA hero with a stage progress bar, vertical event timeline, courier card with call/message actions, pickup-to-doorstep route, and an items strip s/85 ecommerce-wishlist Saved-items list — thumbnails with filled-heart unsave, brand and variant lines, stock badges, per-row 'Move to bag' (restock alerts when sold out), and an empty state s/86 ecommerce-write-review Star rating, headline, body, and photo prompt for a product review.

finance 21 screens

s/87 finance-add-card Card entry with live preview s/88 finance-bank-accounts Linked bank accounts and balances s/89 finance-bento Light fintech dashboard: hero numeral, 2-up metric tiles, mixed bento card grid s/90 finance-bill-pay Upcoming bills with pay and autopay s/91 finance-budgets Category budgets with spend progress s/92 finance-card-details Physical card render with masked number, freeze switch, spending-limit rows with a usage bar, and recent card transactions s/93 finance-crypto-portfolio Crypto holdings with buy and sell s/94 finance-dashboard Greeting header with avatar and notifications, accent balance card with delta pill, four quick actions, budget bars, and recent transactions s/95 finance-dashboard-dark Dark fintech dashboard: lime accent, hideable balance, period chart, activity list s/96 finance-exchange-currency Currency swap with rate and fees s/97 finance-expense-list Searchable expenses with receipts s/98 finance-invoice-detail Invoice line items and totals s/99 finance-manage-cards Card visuals with freeze and settings s/100 finance-savings-goals Savings goals with progress s/101 finance-send-money Big centered amount entry with a built-in numpad, quick-amount chips, a recipient row, note field, balance guard, and a pinned Send button s/102 finance-spending-analytics Weekly spend bars and category share s/103 finance-token-detail Token price with sparkline and stats s/104 finance-token-swap Token swap with direction flip s/105 finance-transactions Spent/received summary pills, category filter chips, month-grouped sections with net totals, tinted merchant glyphs, and signed amounts s/106 finance-wallet-home Balance hero with quick actions and activity s/107 finance-wallet-movers Uwallet Umovers screen

food 8 screens

s/108 food-courier-tracking Live delivery map (drawn SVG streets, dotted route, courier position) with ETA pill, stage dots, courier card, chronological timeline, order summary s/109 food-food-cart Delivery order review — delivery/pickup switch, dish rows with steppers and notes, address card, utensils toggle, promo field, fee summary, sticky place-order bar s/110 food-food-home Delivery home — address header with cart pill, search, cuisine chips, featured restaurant rail, and popular dishes with add buttons s/111 food-food-orders Active/Past switch over order cards — live orders carry pulsing status badge, stage dots, and track action; delivered rows get a reorder button s/112 food-grocery-list Shared shopping list — gather progress bar, inline add field, aisle-grouped checkboxes with quantity notes and price estimates, sticky checkout bar s/113 food-recipe-detail Dish hero with save affordance, author row, time/servings/kcal stat triplet, checkable ingredients with gathered counter, numbered method, sticky start-cooking bar s/114 food-restaurant-dark Dark premium restaurant: moody photo hero, gold accents, add-to-cart discs, cart bar s/115 food-restaurant-detail Full-bleed dish hero with floating back and favorite, rating and delivery stat row, offer strip, sectioned menu with add buttons, sticky cart bar

health 19 screens

s/116 health-activity-rings Concentric rings with per-ring stats s/117 health-fitness-home Activity rings summary and today's workouts s/118 health-habit-quest Gamified habit home: streak card + week strip, XP milestone track, quest rows with check-ring payouts, gem pill s/119 health-habit-tracker Habit tracker: week strip, progress header, tappable check rings and streaks s/120 health-meal-planner Day's meals with kcal and add per slot s/121 health-med-store Med Store screen. s/122 health-meditation-player Guided session with duration chips s/123 health-mood-checkin Mood check-in: Apple State-of-Mind idiom — graded mood scale, feeling chips, log action s/124 health-nutrition-home Nutrition Home screen. s/125 health-prior-auth AI-assisted case review: status chips, segmented tabs, approval-odds card with segment meter + checklist, lime next-action card s/126 health-prior-auth-cases AI-odds case queue: filter chips, case rows with mini segment meters + status chips, New request pill s/127 health-quest-complete Celebration beat: confetti drift, trophy glass disc, payout pills, milestone track filling toward next level s/128 health-run-tracking Live run metrics with map and controls s/129 health-rx-scan Rx Scan screen. s/130 health-sleep-tracker Sleep score, stages, and schedule s/131 health-walk-map Uwalk Umap screen s/132 health-water-tracker Fill-ring goal with quick-add s/133 health-workout-complete Uworkout Ucomplete screen s/134 health-workout-detail Workout hero with exercise list and start

media 14 screens

s/135 media-audiobook-player Audiobook player with cover and sleep timer s/136 media-camera-screen Camera viewfinder with mode rail and shutter s/137 media-gallery-albums Smart albums and user album grid s/138 media-game-store Ugame Ustore screen s/139 media-mini-player Queue list with a pinned mini-player bar: play, pause, next s/140 media-music-player Breathing artwork, like button, scrubbable seek, transport with engaged-state pips, volume, a lyrics/share/queue row, and an up-next peek card s/141 media-photo-editor Photo editing canvas with tool row s/142 media-photo-gallery Count header, album filter chips, and a day-grouped three-column photo grid with favorite badges and a multi-select session with an action bar s/143 media-playlist-detail Playlist header with tracks and shuffle s/144 media-podcast-player Podcast player with chapters and speed s/145 media-reels-feed Vertical reels with action rail and caption s/146 media-serene-home Serene Home screen. s/147 media-stories Segmented auto-advance stories with full-bleed media, gradient scrims, hold-to-pause tap zones, and a frosted reply composer s/148 media-video-player Full-bleed video with scrubber and transport

misc 14 screens

s/149 misc-article-reader Long-form article with actions s/150 misc-course-detail Course cover + syllabus + enroll s/151 misc-event-detail Event cover + meta + RSVP s/152 misc-halo-memory Marcel idiom: one continuous animated flow — a glowing halo orb spring-travels between welcome, press, quote and memory-card states s/153 misc-leaderboard Podium + ranked list + your rank s/154 misc-lesson-player Video lesson with transport s/155 misc-match-detail Live scoreboard + event feed s/156 misc-news-editorial Editorial news home: filter chips, photo-hero lead story, latest list, bookmarks s/157 misc-news-home Topics + hero article + headlines s/158 misc-prediction-live Baller game card: sticker world, glass scoreboard with LIVE pill, who-wins pick card, dark CTA s/159 misc-prediction-welcome Sports prediction splash: saturated canvas, drifting sticker confetti, frosted logo bubble, stacked SSO pills s/160 misc-standings League table with trends s/161 misc-ticket-wallet Ticket cards with barcodes s/162 misc-topics-follow Interest chip grid

productivity 11 screens

s/163 productivity-add-task-sheet Modal new-task sheet: title input, colored priority chips, assignee — adds to the list behind s/164 productivity-alarm-clock Dark alarm list: huge time numerals, schedules, and toggles plus bedtime card s/165 productivity-calendar-day Hour timeline with events s/166 productivity-calendar-month Month grid with events s/167 productivity-file-manager Files browser with search s/168 productivity-kanban-board Horizontal board columns and cards s/169 productivity-note-editor Note editing with formatting strip s/170 productivity-notes-list Searchable notes with compose s/171 productivity-reminders Toggleable reminder alarms s/172 productivity-task-list Checkable tasks with progress s/173 productivity-time-blocks Time-blocking day view: category-colored blocks that check off, focus progress, Today/Tomorrow switch

social 11 screens

s/174 social-arc-create Make-an-arc composer: live accent preview card, name field, day-length chips, white Create pill s/175 social-arc-detail Join-card: accent head with member cluster + day count + tag chips, photo band, nested dark task rows, Join pill s/176 social-arc-onboarding Card-stack splash: fanned theme cards, serif-italic accent, page dots, Next pill s/177 social-create-post New post composer s/178 social-explore-grid Masonry photo explore feed s/179 social-followers-list Followers/following tabs with mutual-proof strip and follow actions s/180 social-hashtag-feed Hashtag header and post grid s/181 social-mentions Activity feed with kind badges s/182 social-post-detail Photo post with comments s/183 social-post-hero Full-bleed hero post: photo fills the page, floating chrome over gradient scrims, live like/save/follow s/184 social-social-profile Profile with stats and photo grid

travel 13 screens

s/185 travel-boarding-pass Airline boarding pass with barcode s/186 travel-booking-confirm Booking confirmation with summary s/187 travel-discover Travel discovery: search, filter chips, recent searches, photo-card destinations s/188 travel-flight-live FlightElite tracker: nebula world, glass flight card with progress line + countdown, emoji quick rows s/189 travel-flight-preferences Onboarding pick-list over nebula world: emoji rows fill accent when selected, Continue/Skip s/190 travel-flight-results Flight cards with times and prices s/191 travel-flight-search From/to flight search with cabin s/192 travel-hotel-detail Hotel photos, amenities, and booking s/193 travel-map-day Dark map itinerary: glowing route, day pills, per-day stop list, navigate CTA s/194 travel-seat-select Cabin map seat picker s/195 travel-travel-home Trip search and destination cards s/196 travel-trip-itinerary Day-grouped trip timeline s/197 travel-trip-onboarding Illustrated travel onboarding: boarding pass hero, paged scenes, navy world

browse the screen catalogpreviews resume when the relay is up