UI mockups · Mobile app
Recipe app UI mockup
A mobile cooking app: discover recipes by category, a recipe page with ingredients and servings, and a step-by-step cooking mode with a timer.
The 3 screens
Recipe app: Discover, Recipe detail, Cooking mode. Each screen below is drawn from the mockup itself, with the headings, buttons, fields and lists that are on it.
1Discover Discover
Phone screen with 4 headings, 4 paragraphs, 3 cards, 3 images, 2 icons, 2 labels, an avatar, a chips / tags and 4 more component types.
- Headings
- Dinner ideas · Featured tonight · Miso butter salmon · Quick weeknight
- Navigation
- All · Quick · Vegetarian · Pasta · Discover · Search · Saved · Meal plan
- Fields
- Search recipes or ingredients
- Text and labels
- Good evening, Mia · 25 min · Easy · See all · Lemon orzo · 15 min · Chickpea curry · 20 min
2Recipe detail Recipe detail
Phone screen with 4 checkboxes, 4 headings, 4 labels, 3 cards, 3 icons, 3 paragraphs, a button, an image and 4 more component types.
- Headings
- Miso butter salmon · 10 min · 15 min · 540
- Navigation
- Ingredients · Steps · Nutrition
- Buttons and actions
- Start cooking
- Text and labels
- Discover · by Ana Ruiz · Japanese-inspired · 4.9 · 1,284 ratings · Prep · Cook · Calories · Servings · 4 salmon fillets (about 600 g) · 2 tbsp white miso paste · 30 g unsalted butter, softened · 1 tbsp honey and 1 lime
3Cooking mode Cooking mode
Phone screen with 3 buttons, 2 headings, 2 icons, 2 labels, 2 paragraphs, an alert banner, a card, an image and 1 more component types.
- Headings
- Glaze and roast · 11:42
- Buttons and actions
- Pause · Previous · Next step
- Text and labels
- Step 3 of 6 · STEP 3 · Brush the miso butter generously over each fillet. Roast on the top shelf at 220°C until the glaze bubbles and the salmon flakes easily with a fork. · Roasting timer · Tip: thicker fillets may need two extra minutes.
Open and edit it
The recipe 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
- Food delivery app UI mockup - Browse restaurants, pick dishes, check out and follow the courier - four mobile screens.
- 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.