[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fmapbox\u002Fscreens":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":43,"showcases":293,"links":294,"dates":352},"\u002Fexamples\u002Fapps\u002Fmapbox\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Mapbox product screens examples - Nicelydone","Browse Mapbox screen design examples. Preview the interface screenshots and explore related UI patterns. Mapping platform for developers","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fdaeffb5f-71f9-4e56-90fe-83fc11623c3e.png",[13,16,19,22],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":21},"Mapbox design examples","\u002Fexamples\u002Fapps\u002Fmapbox",{"label":23,"to":4},"Mapbox product screens examples",{"title":23,"eyebrow":25,"description":10,"sections":26,"body":27},"SaaS app examples",[],[],{"title":29,"slug":30,"description":31,"logo":32,"url":33,"twitter_username":29,"categories":34},"Mapbox","mapbox","Mapping platform for developers","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmapbox-fcdecd68.png","https:\u002F\u002Fwww.mapbox.com",[35,39],{"id":36,"title":37,"slug":38},44,"Maps","maps",{"id":40,"title":41,"slug":42},45,"Open Source","open-source",[44,69,89,108,126,137,158,178,193,211,243,260],{"uuid":45,"title":46,"description":47,"canonical_path":4,"image":11,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":52,"component_categories":62,"app":67},"daeffb5f-71f9-4e56-90fe-83fc11623c3e","Sign in | Mapbox","Sign-in screen where the user authenticates with their username or email and password, with options to create a new account or recover a forgotten password.",3072,1652,"Sign in | Mapbox from Mapbox","screen",[53],{"id":54,"label":55,"slug":56,"rank":57,"group":58},4,"Sign In","sign-in",0,{"id":59,"label":60,"slug":61},1,"Access & Account","access-and-account",[63],{"id":64,"title":65,"slug":66},175,"Button","button",{"slug":30,"title":29,"logo":32,"categories":68},[],{"uuid":70,"title":71,"description":72,"canonical_path":4,"image":73,"width":48,"height":49,"image_alt":74,"kind":51,"patterns":75,"component_categories":81,"app":87},"7c6178da-2efe-4d5e-b10c-0a361b78d4bc","Reset password | Mapbox","Password recovery screen where the user enters their email address to receive a reset link.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F7c6178da-2efe-4d5e-b10c-0a361b78d4bc.png","Reset password | Mapbox from Mapbox",[76],{"id":77,"label":78,"slug":79,"rank":57,"group":80},2,"Forgot Password","forgot-password",{"id":59,"label":60,"slug":61},[82,86],{"id":83,"title":84,"slug":85},240,"Horizontal navigation","horizontal-navigation",{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":88},[],{"uuid":90,"title":71,"description":91,"canonical_path":4,"image":92,"width":48,"height":49,"image_alt":74,"kind":51,"patterns":93,"component_categories":104,"app":106},"79f35a0a-7bc1-4661-82ce-6a51555bd6fc","Password recovery screen confirming that reset instructions have been sent to the user's email address.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F79f35a0a-7bc1-4661-82ce-6a51555bd6fc.png",[94,96],{"id":77,"label":78,"slug":79,"rank":57,"group":95},{"id":59,"label":60,"slug":61},{"id":97,"label":98,"slug":99,"rank":59,"group":100},122,"Success","success",{"id":101,"label":102,"slug":103},12,"States & Feedback","states-and-feedback",[105],{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":107},[],{"uuid":109,"title":110,"description":111,"canonical_path":4,"image":112,"width":48,"height":113,"image_alt":114,"kind":51,"patterns":115,"component_categories":121,"app":124},"5ea2a114-4857-407d-b193-992d72547344","Sign up | Mapbox","Signup page where the user creates a Mapbox account by providing their personal details, company name, and agreeing to the terms of service.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5ea2a114-4857-407d-b193-992d72547344.png",2030,"Sign up | Mapbox from Mapbox",[116],{"id":117,"label":118,"slug":119,"rank":57,"group":120},5,"Sign Up","sign-up",{"id":59,"label":60,"slug":61},[122,123],{"id":83,"title":84,"slug":85},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":125},[],{"uuid":127,"title":110,"description":128,"canonical_path":4,"image":129,"width":48,"height":113,"image_alt":114,"kind":51,"patterns":130,"component_categories":133,"app":135},"5b27a32a-ebfd-4030-b468-660d67a71c77","Signup page where the user enters their username, email, password, name, and company details to create a new account.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5b27a32a-ebfd-4030-b468-660d67a71c77.png",[131],{"id":117,"label":118,"slug":119,"rank":57,"group":132},{"id":59,"label":60,"slug":61},[134],{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":136},[],{"uuid":138,"title":110,"description":139,"canonical_path":4,"image":140,"width":48,"height":141,"image_alt":114,"kind":51,"patterns":142,"component_categories":150,"app":156},"7329a194-81d7-4ba8-87be-8a8bc60b4666","Signup page where the user attempts to create an account but encounters a username availability error.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F7329a194-81d7-4ba8-87be-8a8bc60b4666.png",2118,[143,145],{"id":117,"label":118,"slug":119,"rank":57,"group":144},{"id":59,"label":60,"slug":61},{"id":146,"label":147,"slug":148,"rank":59,"group":149},116,"Error","error",{"id":101,"label":102,"slug":103},[151,155],{"id":152,"title":153,"slug":154},167,"Alert","alert",{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":157},[],{"uuid":159,"title":160,"description":161,"canonical_path":4,"image":162,"width":48,"height":49,"image_alt":163,"kind":51,"patterns":164,"component_categories":174,"app":176},"82c88010-651a-48ea-b697-f94f3b01415e","Account | Mapbox","Verification screen where the user is instructed to check their inbox for a confirmation link, with options to resend the email or change the address.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F82c88010-651a-48ea-b697-f94f3b01415e.png","Account | Mapbox from Mapbox",[165,170],{"id":166,"label":167,"slug":168,"rank":57,"group":169},6,"Verification","verification",{"id":59,"label":60,"slug":61},{"id":59,"label":171,"slug":172,"rank":59,"group":173},"Account Setup","account-setup",{"id":59,"label":60,"slug":61},[175],{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":177},[],{"uuid":179,"title":160,"description":180,"canonical_path":4,"image":181,"width":48,"height":49,"image_alt":163,"kind":51,"patterns":182,"component_categories":190,"app":191},"d3f47d7e-8313-48b2-b18c-6a372e63e98b","Email verification screen displaying a loading spinner while processing the confirmation token.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fd3f47d7e-8313-48b2-b18c-6a372e63e98b.png",[183,188],{"id":184,"label":185,"slug":186,"rank":57,"group":187},120,"Loading","loading",{"id":101,"label":102,"slug":103},{"id":166,"label":167,"slug":168,"rank":59,"group":189},{"id":59,"label":60,"slug":61},[],{"slug":30,"title":29,"logo":32,"categories":192},[],{"uuid":194,"title":160,"description":195,"canonical_path":4,"image":196,"width":48,"height":49,"image_alt":163,"kind":51,"patterns":197,"component_categories":207,"app":209},"c8b09969-4e03-4cc3-8c49-8256043617e4","Verification screen where the user must re-enter their password to confirm their identity before proceeding.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fc8b09969-4e03-4cc3-8c49-8256043617e4.png",[198,200,205],{"id":166,"label":167,"slug":168,"rank":57,"group":199},{"id":59,"label":60,"slug":61},{"id":201,"label":202,"slug":203,"rank":59,"group":204},114,"Confirmation","confirmation",{"id":101,"label":102,"slug":103},{"id":59,"label":171,"slug":172,"rank":77,"group":206},{"id":59,"label":60,"slug":61},[208],{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":210},[],{"uuid":212,"title":160,"description":213,"canonical_path":4,"image":214,"width":48,"height":49,"image_alt":163,"kind":51,"patterns":215,"component_categories":226,"app":241},"dcd511d6-bc87-4064-81c9-2f929a81baaa","Dashboard overlay where a new user selects their primary use case, such as web applications or fleet management, to personalize their experience.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fdcd511d6-bc87-4064-81c9-2f929a81baaa.png",[216,224],{"id":217,"label":218,"slug":219,"rank":57,"group":220},77,"Welcome","welcome",{"id":221,"label":222,"slug":223},7,"Onboarding & Education","onboarding-and-education",{"id":59,"label":171,"slug":172,"rank":59,"group":225},{"id":59,"label":60,"slug":61},[227,231,235,239,240],{"id":228,"title":229,"slug":230},284,"Modal","modal",{"id":232,"title":233,"slug":234},174,"Card","card",{"id":236,"title":237,"slug":238},169,"Avatar","avatar",{"id":83,"title":84,"slug":85},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":242},[],{"uuid":244,"title":160,"description":245,"canonical_path":4,"image":246,"width":48,"height":49,"image_alt":163,"kind":51,"patterns":247,"component_categories":252,"app":258},"ee719999-c9c6-41e5-973a-9444542a8c92","Onboarding step where the user selects their primary use case, such as adding a map to a web application or getting trip directions, from a modal overlay.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fee719999-c9c6-41e5-973a-9444542a8c92.png",[248,250],{"id":59,"label":171,"slug":172,"rank":57,"group":249},{"id":59,"label":60,"slug":61},{"id":217,"label":218,"slug":219,"rank":59,"group":251},{"id":221,"label":222,"slug":223},[253,254,255,256,257],{"id":228,"title":229,"slug":230},{"id":236,"title":237,"slug":238},{"id":232,"title":233,"slug":234},{"id":83,"title":84,"slug":85},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":259},[],{"uuid":261,"title":160,"description":262,"canonical_path":4,"image":263,"width":48,"height":264,"image_alt":163,"kind":51,"patterns":265,"component_categories":286,"app":291},"7741e411-7fd7-4b3e-9cc3-89463cf3ec2f","Dashboard overview providing quick start actions for map creation, a summary of account and billing details, and access to default API tokens.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F7741e411-7fd7-4b3e-9cc3-89463cf3ec2f.png",2226,[266,273,281],{"id":267,"label":268,"slug":269,"rank":57,"group":270},41,"Dashboard","dashboard",{"id":54,"label":271,"slug":272},"Data & Analysis","data-and-analysis",{"id":274,"label":275,"slug":276,"rank":59,"group":277},94,"Account Settings","account-settings",{"id":278,"label":279,"slug":280},10,"Settings & Admin","settings-and-admin",{"id":282,"label":283,"slug":284,"rank":77,"group":285},95,"API Keys","api-keys",{"id":278,"label":279,"slug":280},[287,288,289,290],{"id":236,"title":237,"slug":238},{"id":232,"title":233,"slug":234},{"id":83,"title":84,"slug":85},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":292},[],[],[295,297,299,301,303,305,307,309,311,313,315,317,319,322,325,328,331,334,336,340,344,348],{"label":171,"to":296},"\u002Fexamples\u002Fscreens\u002Faccount-setup",{"label":118,"to":298},"\u002Fexamples\u002Fscreens\u002Fsign-up",{"label":167,"to":300},"\u002Fexamples\u002Fscreens\u002Fverification",{"label":78,"to":302},"\u002Fexamples\u002Fscreens\u002Fforgot-password",{"label":218,"to":304},"\u002Fexamples\u002Fscreens\u002Fwelcome",{"label":275,"to":306},"\u002Fexamples\u002Fscreens\u002Faccount-settings",{"label":283,"to":308},"\u002Fexamples\u002Fscreens\u002Fapi-keys",{"label":202,"to":310},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":268,"to":312},"\u002Fexamples\u002Fscreens\u002Fdashboard",{"label":147,"to":314},"\u002Fexamples\u002Fscreens\u002Ferror",{"label":185,"to":316},"\u002Fexamples\u002Fscreens\u002Floading",{"label":55,"to":318},"\u002Fexamples\u002Fscreens\u002Fsign-in",{"label":320,"to":321},"Mapbox marketing pages","\u002Fexamples\u002Fapps\u002Fmapbox\u002Fmarketing",{"label":323,"to":324},"Mapbox user flows","\u002Fexamples\u002Fapps\u002Fmapbox\u002Fflows",{"label":326,"to":327},"Mapbox UI components","\u002Fexamples\u002Fapps\u002Fmapbox\u002Fcomponents",{"label":329,"to":330},"Maps app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmaps",{"label":332,"to":333},"Open Source app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fopen-source",{"label":335,"to":18},"All SaaS app examples",{"label":337,"to":338,"description":339},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":341,"to":342,"description":343},"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":345,"to":346,"description":347},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":349,"to":350,"description":351},"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":353,"updated_at":354},"2016-07-01T15:30:28.000Z","2026-09-13T13:02:39.000Z"]