UI mockups · Mobile app
Food delivery app UI mockup
Browse restaurants, pick dishes, check out and follow the courier - four mobile screens.
The 4 screens
Food delivery app: Home, Restaurant menu, Cart, Order tracking. Each screen below is drawn from the mockup itself, with the headings, buttons, fields and lists that are on it.
1Home Home
Phone screen with 6 badges, 5 paragraphs, 4 headings, 2 cards, 2 images, 2 ratings, an avatar, a link and 2 more component types.
- Headings
- Home · 221B Baker St · Popular near you · Luigi’s Trattoria · Sakura Sushi Bar
- Navigation
- Home · Search · Orders · Account
- Fields
- Search dishes or restaurants…
- Text and labels
- Deliver to · All · Pizza · Sushi · Burgers · See all · Italian · Pizza · Pasta · 25–35 min · $1.99 delivery · Japanese · Sushi · Ramen · 30–40 min · Free delivery
2Restaurant menu Restaurant menu
Phone screen with 5 paragraphs, 4 buttons, 4 cards, 4 headings, 4 images, 3 labels, 2 icons, a badge and 2 more component types.
- Headings
- Luigi’s Trattoria · Margherita · Spaghetti Carbonara · Tiramisu
- Navigation
- Popular · Pizza · Pasta · Desserts
- Buttons and actions
- + Add · View cart · 3 items · $38.00
- Text and labels
- 4.8 (1.2k) · Italian · $$ · Open until 11 pm · Free delivery over $25 · San Marzano tomato, fior di latte, basil · $14.50 · Guanciale, pecorino, egg yolk, black pepper · $16.50 · Mascarpone, espresso-soaked savoiardi · $7.00
3Cart Cart
Phone screen with 9 labels, 4 paragraphs, 3 dividers, 3 dropdowns, 3 headings, 3 images, 2 buttons, 2 cards and 3 more component types.
- Headings
- Your order · Total · $41.49
- Fields
- 1 · Promo code
- Buttons and actions
- Apply · Place order · $41.49
- Text and labels
- From Luigi’s Trattoria · 25–35 min · Margherita · $14.50 · Spaghetti Carbonara · $16.50 · Tiramisu · $7.00 · Subtotal · $38.00 · Delivery fee · $1.99 · Service fee · $1.50 · Visa •••• 4242
4Order tracking Order tracking
Phone screen with 4 labels, 3 buttons, 3 headings, 2 cards, 2 checkboxes, an avatar, a badge, an image and 3 more component types.
- Headings
- Order #4821 · Arriving in 12 min · Marco R.
- Buttons and actions
- Message · Call · Need help with this order?
- Text and labels
- On the way · Estimated arrival 7:42 PM · Confirmed · Preparing · Picked up · Delivered · Order confirmed · 7:12 PM · Picked up by Marco · 7:28 PM
Open and edit it
The food delivery app mockup is free on every Tierslate plan. Opened in the editor it becomes a board of your own: every component is a real shape you can move, resize, retext or recolour, you can add screens from the web, iOS and Android component library, and React code can be generated from the screens. In the editor it is under Templates, on the Mockups tab.
More mockups
- Banking app UI mockup - A mobile bank - balance with quick actions and recent activity, a transaction detail and a send-money flow.
- Social feed UI mockup - A photo-sharing app - stories and a post feed, a new-post composer and a profile with stats and a photo grid.
- Music player UI mockup - A mobile music app: a library with playlists and recently played tracks, and a now-playing screen with album art, progress and playback controls.
- iOS fitness app UI mockup - An 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.
- Android mail app UI mockup - A 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.
- Ride hailing app UI mockup - A 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.