Lifestyle
Recipe App UI Design Template
A warm, cookbook-style recipe app design with seven connected screens, built for founders and designers launching a food or recipe-sharing product.
Preview
Explore the screens
Preview the recipe mobile app design, fully editable in Sleek.
About the Recipe App
This recipe app UI design template leans into a printed-cookbook feel: a warm chalk-cream base, a confident serif used for recipe titles and headings, and a terracotta accent balanced by an olive-green secondary. Rich food photography fills the home feed, recipe detail, and saved cards, so every screen reads like a page from a well-styled food magazine rather than a generic list app.
The template ships seven connected screens that form a complete cooking journey: a personalised home with a Recipe of the Day and cuisine filters, a Search screen with trending tags and ranked results, a Recipe detail with prep/cook/serves stats and a "Start Cooking" action, a Saved Recipes collection with tabs, a categorised Grocery List, a creator Profile with recipe stats, and a tidy Settings screen. A pill-shaped floating tab bar ties the whole flow together.
Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Then export it to code, copy it into Figma with no plugin, or hand a prompt to an AI agent to build it for real, far faster than starting from a blank canvas.
What's inside
Screens included
Home
A personalised greeting, a 'What are you craving?' search field, an Editor's Pick Recipe of the Day card, cuisine and category pills, and a Recently Viewed row. The browse-and-discover entry point.
Search
A prominent search field with filter chips like 'Under 30 min' and 'Vegetarian', trending tags, and ranked recipe results showing cook time and ratings. Helps users find dishes fast.
Recipe Detail
A full-bleed dish photo, a serif recipe title, prep/cook/serves stats, the recipe creator's byline, an ingredients section, and a bold 'Start Cooking' button. The heart of the cooking flow.
Saved Recipes
A searchable collection with tabs for All Recipes, Favorites, To Cook, and Baking, plus photo cards showing time and difficulty. Lets users organise the dishes they want to make.
Grocery List
Ingredients grouped under categories like Produce and Dairy & Pantry with checkable items, a linked recipe banner, and a 'Clear Completed Items' action. Turns a recipe into a shopping plan.
Profile
A cover photo, avatar with edit badge, bio, and recipe/follower/streak stats, plus tabs for My Recipes, Collections, and Activity with public and draft recipe cards. The creator's home base.
Settings
Grouped Account, Preferences, and App sections with rows for dietary restrictions, notifications, cooking units, and help. Keeps account and cooking preferences in one place.
Design & features
Key features
- Editorial cookbook aesthetic: chalk-cream base with terracotta and olive accents
- Serif display headings paired with a clean body typeface
- Full-bleed food photography across home, detail, and saved cards
- Pill-shaped floating bottom tab bar
- Recipe of the Day card with Editor's Pick badge
- Search with filter chips, trending tags, and ranked results
- Categorised grocery list with checkable ingredients
- Creator profile with recipe, follower, and streak stats
Audience
Who it's for
Use cases
What you can build
- Launch an MVP for a recipe-sharing product
- Mock up screens for an investor or stakeholder pitch
- Hand a consistent recipe app UI off to developers
- Explore a redesign of an existing cooking app
How to use this template
- 1
Open the template
Browse the screens and preview the full design to see if it fits your idea.
- 2
Use this template
Open your own fully editable copy in Sleek with one click.
- 3
Edit with AI
Restyle the palette, change layouts, and add or remove screens just by describing what you want.
- 4
Export and ship
Export your design or hand it to developers, and keep building toward launch.
Frequently asked questions
Related mobile app templates
Start designing your recipe app
Use it in Sleek and make it yours: restyle the palette, edit any screen with AI, and export to code or Figma.
Use this template