TSTier SlateBack to the app

UI mockups

Free UI mockup templates

22 free UI mockup templates for mobile apps, websites and desktop apps - 64 finished screens in all, from a food delivery app and an online store to a banking app, an admin dashboard and iOS and Android (Material 3) layouts. Each one opens in Tierslate as an editable wireframe: move and restyle any component, add screens from a library of web, iOS and Android parts, and generate React code from the result. Every mockup is free on every plan.

Share

  • Facebook
  • X

On this page

  1. Mobile app mockups
  2. Website and web app mockups
  3. Desktop app mockups

Mobile app mockups

Phone screens drawn as iOS and Android frames - status bar, navigation and tab bars, sheets and dialogs.

  • Food delivery appBrowse restaurants, pick dishes, check out and follow the courier - four mobile screens.4 screens · mobile
  • Banking appA mobile bank - balance with quick actions and recent activity, a transaction detail and a send-money flow.3 screens · mobile
  • Social feedA photo-sharing app - stories and a post feed, a new-post composer and a profile with stats and a photo grid.3 screens · mobile
  • Music playerA mobile music app: a library with playlists and recently played tracks, and a now-playing screen with album art, progress and playback controls.2 screens · mobile
  • iOS fitness appAn iPhone activity tracker in the iOS 17/18 look: large-title navigation, activity rings, widgets, inset grouped lists, a tab bar, a settings sheet, an action sheet and an alert over the keyboard.5 screens · mobile
  • Android mail appA Material 3 (Material You) email client: search bar, filter chips, inbox list, FAB, navigation drawer, message view, compose with a dialog, a schedule-send bottom sheet, and a tablet layout with a navigation rail and date/time pickers.6 screens · mobile
  • Ride hailing appA mobile ride app: pick up and destination over a map, a choice of ride types with prices, and a live driver-on-the-way screen.3 screens · mobile
  • Recipe appA mobile cooking app: discover recipes by category, a recipe page with ingredients and servings, and a step-by-step cooking mode with a timer.3 screens · mobile
  • Onboarding flowA mobile app’s first-run flow: a welcome screen, a permissions step with toggles and a notification preview, and a profile setup form.3 screens · mobile
  • Smart home appA mobile smart home controller: rooms at a glance with scenes and a door lock, a room screen with light and device controls, and a thermostat with schedule.3 screens · mobile

Website and web app mockups

Browser-framed pages - landing pages, stores, dashboards and sign-in flows, each screen at desktop width.

  • Shopping websiteAn online clothing store - home page, product listing with filters, product detail and checkout.4 screens · web
  • Admin dashboardA store back office - KPI cards, revenue chart, top products and recent orders, plus a customer profile page.2 screens · web
  • Travel bookingA hotel booking site: search with dates and guests, filtered results with hotel cards, and a guest details + payment checkout.3 screens · web
  • SaaS landing pageA full marketing page for a project-management product: hero with two calls to action, features, pricing tiers, a testimonial, FAQ and footer.1 screen · web
  • Sign in and sign up flowsThe three account screens every product needs: sign in with social options, create an account with a password strength meter, and reset a forgotten password.3 screens · web
  • Video streaming siteA streaming service - browse rows with continue watching and trending titles, a series detail page with episodes, and the video player.3 screens · web
  • Project boardA kanban project tool - columns of task cards with tags, progress and assignees, and a task detail page with subtasks, activity and properties.2 screens · web
  • Real estate listingsA home search site - filters, listing cards beside a map, and a listing page with a photo gallery, key facts and a tour request form.2 screens · web
  • CRM dashboardA sales CRM: a pipeline board with KPIs and deal cards per stage, and a contact page with the open deal, activity timeline, tasks and call logging.2 screens · web

Desktop app mockups

Windowed desktop applications - sidebars, lists, editors and the dialogs that sit over them.

  • Chat messengerA desktop messaging app: conversation list with unread badges, a group thread with message bubbles and attachments, and a notifications settings dialog.2 screens · desktop
  • Calendar appA desktop calendar - a colour-coded week view with a mini month and calendar toggles, an event editor with guests, and a month view with an agenda.3 screens · desktop
  • Note-taking appA desktop notes app: notebooks and tags in a sidebar, a note list, a rich editor with checklist and table, and a share dialog with access controls.2 screens · desktop

Using one

Each page shows the mockup's screens and lists what is on every one of them. In Tierslate the same mockup opens as a board of its own: every button, field and card is a component you can move, resize, recolour or delete, and React code can be generated from the screens. For architecture diagrams rather than screens, see the system design templates.

Open TierslateSystem design templates
Tierslate

tierslate.com

HomeTemplatesUI mockupsPrivacyTerms