Mobile star rating UI examples

Star rating UI examples

• See the flow
  Good Food: Recipe Finder↗

  The main content area consists of a two-column grid of recipe cards, each showing a high-quality food photo, the recipe title, cooking time, and a star rating.

• See the flow
  Too Good To Go: Save Good Food↗

  The background shows details about the surprise bag, including a price of US$3.99 (discounted from US$12.00), a 4.7-star rating, and collection time information.

• See the flow
  Pick Up Limes↗

  A horizontal metadata bar includes tags for '25 min', 'exclusive', 'Breakfast', 'Freezer-friendly', and a star rating of (7).

• See the flow
  Klook: Travel & Activities↗

  The second card shows a promotional image for 'Monopoly Dreams Ticket in Hong Kong' with a 4.4-star rating and booking volume.

• See the flow
  Hypelist: Create & Share Lists↗

  This screen displays a modal overlay for rating a movie, specifically 'Mean Girls'.

• See the flow
  Vrbo Vacation Rentals↗

  You can also write a review.', a five-star rating component, a 'Write a Review' link, and an 'OK' button.

• See the flow
  Ascend: Bible Game↗

  Header text at the top, followed by three stacked testimonial cards, and a large primary button at the bottom.

• See the flow
  Yelp: Food, Services & Reviews↗

  The top section features a large, full-width hero image of a pastry, overlaid with the business name, a 4.6-star rating with 1,055 reviews, and a button to view all photos.

• See the flow
  Vivino: Drink The Right Wine↗

  Each card displays a high-quality image of the wine bottle, a 'save' percentage badge, a star rating with the number of reviews, the current price in a green button, and the original price crossed out.

• See the flow
  Calorie Counter by Numify↗

  Below this, there is a vertical list of four progress bars representing different stages: 'Analyzing Body Parameters' (100%), 'Meals and Activity' (100%), 'Medical Conditions' (100%), and 'Generating Your Action Plan' (46%).

• See the flow
  Eppika: Read & Learn Languages↗

  Below the book cover, a white card prompts the user to 'How was this book?' with a five-star rating system.

• See the flow
  GoPhoto:AI Photo & Video Maker↗

  The central modal features the app's icon, a message thanking the user for their feedback, and an invitation to 'write a review' with a five-star rating scale.

• See the flow
  BuyBye - Budget Planner↗

  This screen displays an in-app rating request modal overlaid on a background page that features user testimonials.

• See the flow
  Wikiloc - Trails of the World↗

  The main body contains a section labeled 'Information' with a help icon, followed by a five-star rating input.

• See the flow
  SubPilot: Cancel Subscriptions↗

  Logo at top, circular progress indicator below, main text heading and sub-heading, followed by a single interactive selection card in the center.

• See the flow
  Litres: Audio↗

  The top section features a dark, blurred background with the series title, author name, a 4.5-star rating, and a 'Subscribe' button.

• See the flow
  Fishbrain - Fishing App↗

  Below this, social proof is provided through a 4.7-star rating with 1,108 reviews and a count of 10.3K anglers using the item.

• See the flow
  SnoreLab : Record Your Snoring↗

  Below the mockup is a five-star rating followed by a testimonial from a user about their success with the program.

• See the flow
  Fishbox - Smart Fishing App↗

  The main content area features the title 'Orvis tippet knot' followed by a 4.6-star rating with 21 reviews.

• See the flow
  CamScanning: AI Measure & Scan↗

  Below the stars are two primary buttons: a solid green 'Five-Star Praise' button and an outlined 'Feedback' button.