[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fmango\u002Fscreens":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":52,"showcases":302,"links":303,"dates":362},"\u002Fexamples\u002Fapps\u002Fmango\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Mango product screens examples - Nicelydone","Browse Mango screen design examples. Preview the interface screenshots and explore related UI patterns. The first simple, frictionless online and mobile…","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmango_sign-in_42634e7f_nicelydone.jpg",[13,16,19,22],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":21},"Mango design examples","\u002Fexamples\u002Fapps\u002Fmango",{"label":23,"to":4},"Mango product screens examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Mango screen design examples. Preview the interface screenshots and explore related UI patterns. The first simple, frictionless online and mobile payment solution in Latin America",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"categories":35},"Mango","mango","The first simple, frictionless online and mobile payment solution in Latin America","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmango-0f13dbd1.png","https:\u002F\u002Fgetmango.com",[36,40,44,48],{"id":37,"title":38,"slug":39},39,"Payments","payments",{"id":41,"title":42,"slug":43},36,"Finance","finance",{"id":45,"title":46,"slug":47},48,"Developer Tools","developer-tools",{"id":49,"title":50,"slug":51},54,"Mobile","mobile",[53,82,99,109,132,169,187,196,209,236,271,280],{"uuid":54,"title":55,"description":56,"canonical_path":4,"image":11,"width":57,"height":58,"image_alt":59,"kind":60,"patterns":61,"component_categories":71,"app":80},"12d65ff6-e3a3-4951-afdf-67cff1601c03","Sign in","Sign-in screen where the user authenticates with their email and password.",2800,1544,"Sign in from Mango","screen",[62],{"id":63,"label":64,"slug":65,"rank":66,"group":67},4,"Sign In","sign-in",0,{"id":68,"label":69,"slug":70},1,"Access & Account","access-and-account",[72,76],{"id":73,"title":74,"slug":75},175,"Button","button",{"id":77,"title":78,"slug":79},174,"Card","card",{"slug":31,"title":30,"logo":33,"categories":81},[],{"uuid":83,"title":84,"description":85,"canonical_path":4,"image":86,"width":57,"height":58,"image_alt":87,"kind":60,"patterns":88,"component_categories":94,"app":97},"2e620703-7e37-415f-a4fe-c3d45bc888c4","Password reset","Password recovery screen where the user enters their email address to request a reset link, with a secondary option to return to the sign-in page.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmango_password-reset_582cd75c_nicelydone.jpg","Password reset from Mango",[89],{"id":90,"label":91,"slug":92,"rank":66,"group":93},2,"Forgot Password","forgot-password",{"id":68,"label":69,"slug":70},[95,96],{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"slug":31,"title":30,"logo":33,"categories":98},[],{"uuid":100,"title":101,"description":102,"canonical_path":4,"image":103,"width":57,"height":58,"image_alt":104,"kind":60,"patterns":105,"component_categories":106,"app":107},"689c82f8-8a2f-4d6b-997c-d6e6d08ce7fb","Sign up","Authentication Account creation Onboarding File upload Form","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmango_sign-up_743cdcaa_nicelydone.jpg","Sign up from Mango",[],[],{"slug":31,"title":30,"logo":33,"categories":108},[],{"uuid":110,"title":101,"description":111,"canonical_path":4,"image":112,"width":57,"height":58,"image_alt":104,"kind":60,"patterns":113,"component_categories":127,"app":130},"9f702f53-9a22-4fd2-a26b-83aa8fe6fcb2","Verification screen where the user is prompted to check their email to activate their new Mango account, featuring a direct link to Gmail.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmango_sign-up-2_f696b8cb_nicelydone.jpg",[114,119],{"id":115,"label":116,"slug":117,"rank":66,"group":118},6,"Verification","verification",{"id":68,"label":69,"slug":70},{"id":120,"label":121,"slug":122,"rank":68,"group":123},114,"Confirmation","confirmation",{"id":124,"label":125,"slug":126},12,"States & Feedback","states-and-feedback",[128,129],{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"slug":31,"title":30,"logo":33,"categories":131},[],{"uuid":133,"title":134,"description":135,"canonical_path":4,"image":136,"width":57,"height":58,"image_alt":137,"kind":60,"patterns":138,"component_categories":152,"app":167},"fe625dfa-0c27-4248-8fd7-2c213e4fcd71","Onboarding","Onboarding step where the user is welcomed to Mango with a city illustration and a prompt to start.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmango_onboarding_384d8ca9_nicelydone.jpg","Onboarding from Mango",[139,147],{"id":140,"label":141,"slug":142,"rank":66,"group":143},77,"Welcome","welcome",{"id":144,"label":145,"slug":146},7,"Onboarding & Education","onboarding-and-education",{"id":148,"label":149,"slug":150,"rank":68,"group":151},74,"Onboarding Checklist","onboarding-checklist",{"id":144,"label":145,"slug":146},[153,157,161,165,166],{"id":154,"title":155,"slug":156},260,"Badge","badge",{"id":158,"title":159,"slug":160},240,"Horizontal navigation","horizontal-navigation",{"id":162,"title":163,"slug":164},169,"Avatar","avatar",{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"slug":31,"title":30,"logo":33,"categories":168},[],{"uuid":170,"title":171,"description":172,"canonical_path":4,"image":173,"width":57,"height":58,"image_alt":174,"kind":60,"patterns":175,"component_categories":180,"app":185},"e16bfd46-c41a-4a73-bb13-905fd6f012a5","Dropdown","Onboarding screen where the user is welcomed to Mango with a cityscape illustration and prompted to start using the application.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmango_dropdown_84e81d21_nicelydone.jpg","Dropdown from Mango",[176,178],{"id":140,"label":141,"slug":142,"rank":66,"group":177},{"id":144,"label":145,"slug":146},{"id":148,"label":149,"slug":150,"rank":68,"group":179},{"id":144,"label":145,"slug":146},[181,182,183,184],{"id":158,"title":159,"slug":160},{"id":162,"title":163,"slug":164},{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"slug":31,"title":30,"logo":33,"categories":186},[],{"uuid":188,"title":189,"description":134,"canonical_path":4,"image":190,"width":57,"height":58,"image_alt":191,"kind":60,"patterns":192,"component_categories":193,"app":194},"72b3768a-1b75-478e-92ed-d9e77fc026c7","Notifications","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmango_notifications_78530bb1_nicelydone.jpg","Notifications from Mango",[],[],{"slug":31,"title":30,"logo":33,"categories":195},[],{"uuid":197,"title":189,"description":198,"canonical_path":4,"image":199,"width":57,"height":58,"image_alt":191,"kind":60,"patterns":200,"component_categories":203,"app":207},"732d2321-f5c1-4853-89a3-bf238aab27bb","Onboarding screen where the user reads a welcome message from the Mango team.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmango_notifications-2_98a1806a_nicelydone.jpg",[201],{"id":140,"label":141,"slug":142,"rank":66,"group":202},{"id":144,"label":145,"slug":146},[204,205,206],{"id":158,"title":159,"slug":160},{"id":162,"title":163,"slug":164},{"id":77,"title":78,"slug":79},{"slug":31,"title":30,"logo":33,"categories":208},[],{"uuid":210,"title":134,"description":211,"canonical_path":4,"image":212,"width":57,"height":213,"image_alt":137,"kind":60,"patterns":214,"component_categories":224,"app":234},"f4c7589f-1677-4573-b346-f1e67eb098fb","Onboarding screen where the user follows a three-step welcome tour to create their first store, create a test charge, and activate their store.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmango_onboarding-2_95ca4ec4_nicelydone.jpg",1978,[215,220,222],{"id":216,"label":217,"slug":218,"rank":66,"group":219},73,"Guided Tour","guided-tour",{"id":144,"label":145,"slug":146},{"id":148,"label":149,"slug":150,"rank":68,"group":221},{"id":144,"label":145,"slug":146},{"id":140,"label":141,"slug":142,"rank":90,"group":223},{"id":144,"label":145,"slug":146},[225,229,230,231,232,233],{"id":226,"title":227,"slug":228},227,"Stepper","stepper",{"id":154,"title":155,"slug":156},{"id":158,"title":159,"slug":160},{"id":162,"title":163,"slug":164},{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"slug":31,"title":30,"logo":33,"categories":235},[],{"uuid":237,"title":238,"description":239,"canonical_path":4,"image":240,"width":57,"height":241,"image_alt":242,"kind":60,"patterns":243,"component_categories":260,"app":269},"7a31de22-0422-4215-ad6f-734caeecafea","Settings","Settings page where the user updates their personal profile information, including name, email, phone number, nationality, ID type, and bio.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmango_settings_76066cca_nicelydone.jpg",2796,"Settings from Mango",[244,252],{"id":245,"label":246,"slug":247,"rank":66,"group":248},3,"Profile","profile",{"id":249,"label":250,"slug":251},11,"Social & Collaboration","social-and-collaboration",{"id":253,"label":254,"slug":255,"rank":68,"group":256},94,"Account Settings","account-settings",{"id":257,"label":258,"slug":259},10,"Settings & Admin","settings-and-admin",[261,265,266,267,268],{"id":262,"title":263,"slug":264},233,"Tabs","tabs",{"id":158,"title":159,"slug":160},{"id":162,"title":163,"slug":164},{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"slug":31,"title":30,"logo":33,"categories":270},[],{"uuid":272,"title":238,"description":273,"canonical_path":4,"image":274,"width":57,"height":275,"image_alt":242,"kind":60,"patterns":276,"component_categories":277,"app":278},"906f8426-2d3e-4753-9f32-0972070a6677","Settings Form Account settings","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmango_settings-2_218817a0_nicelydone.jpg",2168,[],[],{"slug":31,"title":30,"logo":33,"categories":279},[],{"uuid":281,"title":238,"description":282,"canonical_path":4,"image":283,"width":57,"height":58,"image_alt":242,"kind":60,"patterns":284,"component_categories":294,"app":300},"92c3e8a9-2692-4a54-a47b-a205223a66b0","Settings page where the user updates their account password by entering their current and new passwords.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmango_settings-3_7ae0098c_nicelydone.jpg",[285,289],{"id":286,"label":238,"slug":287,"rank":66,"group":288},102,"settings",{"id":257,"label":258,"slug":259},{"id":290,"label":263,"slug":264,"rank":68,"group":291},69,{"id":115,"label":292,"slug":293},"Navigation & Commands","navigation-and-commands",[295,296,297,298,299],{"id":262,"title":263,"slug":264},{"id":158,"title":159,"slug":160},{"id":162,"title":163,"slug":164},{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"slug":31,"title":30,"logo":33,"categories":301},[],[],[304,306,308,310,312,314,316,318,320,322,324,326,329,332,335,338,341,344,346,350,354,358],{"label":141,"to":305},"\u002Fexamples\u002Fscreens\u002Fwelcome",{"label":149,"to":307},"\u002Fexamples\u002Fscreens\u002Fonboarding-checklist",{"label":254,"to":309},"\u002Fexamples\u002Fscreens\u002Faccount-settings",{"label":121,"to":311},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":91,"to":313},"\u002Fexamples\u002Fscreens\u002Fforgot-password",{"label":217,"to":315},"\u002Fexamples\u002Fscreens\u002Fguided-tour",{"label":246,"to":317},"\u002Fexamples\u002Fscreens\u002Fprofile",{"label":238,"to":319},"\u002Fexamples\u002Fscreens\u002Fsettings",{"label":64,"to":321},"\u002Fexamples\u002Fscreens\u002Fsign-in",{"label":263,"to":323},"\u002Fexamples\u002Fscreens\u002Ftabs",{"label":116,"to":325},"\u002Fexamples\u002Fscreens\u002Fverification",{"label":327,"to":328},"Mango marketing pages","\u002Fexamples\u002Fapps\u002Fmango\u002Fmarketing",{"label":330,"to":331},"Mango user flows","\u002Fexamples\u002Fapps\u002Fmango\u002Fflows",{"label":333,"to":334},"Mango UI components","\u002Fexamples\u002Fapps\u002Fmango\u002Fcomponents",{"label":336,"to":337},"Payments app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fpayments",{"label":339,"to":340},"Finance app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ffinance",{"label":342,"to":343},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":345,"to":18},"All SaaS app examples",{"label":347,"to":348,"description":349},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":351,"to":352,"description":353},"SaaS marketing page examples","\u002Fexamples\u002Fpages","Browse real SaaS marketing pages grouped by page type, from landing pages to pricing and customer story pages.",{"label":355,"to":356,"description":357},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":359,"to":360,"description":361},"User flow examples from SaaS apps","\u002Fexamples\u002Fflows","Explore user flow examples for sign-up, onboarding, billing, and other SaaS tasks. Compare the order of screens and preview the opening steps from real apps.",{"published_at":363,"updated_at":364},"2016-08-24T08:00:00.000Z","2026-09-13T13:02:39.000Z"]