[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Froadmap\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":378,"links":379,"dates":437},"\u002Fexamples\u002Fapps\u002Froadmap\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Roadmap product screens examples - Nicelydone","Browse Roadmap screen design examples. Preview the interface screenshots and explore related UI patterns. Project forecasting app for teams","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Froadmap_password-reset_8365b637_nicelydone.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},"Roadmap design examples","\u002Fexamples\u002Fapps\u002Froadmap",{"label":23,"to":4},"Roadmap 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,"categories":34},"Roadmap","roadmap","Project forecasting app for teams","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Froadmap-8fab2b0c.png","http:\u002F\u002Fonroadmap.com",[35,39],{"id":36,"title":37,"slug":38},29,"Task Management","task-management",{"id":40,"title":41,"slug":42},30,"Productivity","productivity",[44,69,85,135,163,185,215,244,273,291,317,351],{"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},"c28ad715-e99c-428d-94fb-d9b1c2c648ac","Password reset","Password recovery screen where the user enters their email address to request a reset link.",2880,1526,"Password reset from Roadmap","screen",[53],{"id":54,"label":55,"slug":56,"rank":57,"group":58},2,"Forgot Password","forgot-password",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":83},"45adcb08-a8c6-4741-94a7-92e1fdd9d567","Sign up","Signup screen where the user creates a new account by providing their name, team name, email, and password.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Froadmap_sign-up_16295868_nicelydone.jpg","Sign up from Roadmap",[76],{"id":77,"label":78,"slug":79,"rank":57,"group":80},5,"Sign Up","sign-up",{"id":59,"label":60,"slug":61},[82],{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":84},[],{"uuid":86,"title":87,"description":88,"canonical_path":4,"image":89,"width":48,"height":49,"image_alt":90,"kind":51,"patterns":91,"component_categories":116,"app":133},"dc5ae7e5-83f3-43f3-adbe-30fcda98eb1c","Home","Dashboard where a new user is guided by a product tour popover explaining the projects view, alongside a prominent card to create their first project.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Froadmap_home_820d9e02_nicelydone.jpg","Home from Roadmap",[92,100,108],{"id":93,"label":94,"slug":95,"rank":57,"group":96},41,"Dashboard","dashboard",{"id":97,"label":98,"slug":99},4,"Data & Analysis","data-and-analysis",{"id":101,"label":102,"slug":103,"rank":59,"group":104},72,"Getting Started","getting-started",{"id":105,"label":106,"slug":107},7,"Onboarding & Education","onboarding-and-education",{"id":109,"label":110,"slug":111,"rank":54,"group":112},115,"Empty State","empty-state",{"id":113,"label":114,"slug":115},12,"States & Feedback","states-and-feedback",[117,121,125,129],{"id":118,"title":119,"slug":120},211,"Pagination","pagination",{"id":122,"title":123,"slug":124},174,"Card","card",{"id":126,"title":127,"slug":128},240,"Horizontal navigation","horizontal-navigation",{"id":130,"title":131,"slug":132},233,"Tabs","tabs",{"slug":30,"title":29,"logo":32,"categories":134},[],{"uuid":136,"title":137,"description":138,"canonical_path":4,"image":139,"width":48,"height":49,"image_alt":140,"kind":51,"patterns":141,"component_categories":159,"app":161},"d857f38a-3272-4578-9d25-024f0f32eb8b","Onboarding project","Timeline view where a product tour popover instructs the user on how to add and assign phase names by clicking and dragging.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Froadmap_onboarding-project_54ca025e_nicelydone.jpg","Onboarding project from Roadmap",[142,147,154],{"id":143,"label":144,"slug":145,"rank":57,"group":146},48,"Timeline","timeline",{"id":97,"label":98,"slug":99},{"id":148,"label":149,"slug":150,"rank":59,"group":151},10,"Drag & Drop","drag-and-drop",{"id":54,"label":152,"slug":153},"Actions","actions",{"id":155,"label":156,"slug":157,"rank":54,"group":158},11,"Edit","edit",{"id":54,"label":152,"slug":153},[160],{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":162},[],{"uuid":164,"title":165,"description":166,"canonical_path":4,"image":167,"width":48,"height":49,"image_alt":168,"kind":51,"patterns":169,"component_categories":177,"app":183},"c1700967-ed55-4514-9b30-a7e35b604d86","Single project","Timeline view where the user can see project tasks scheduled across January and February.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Froadmap_single-project_0eb5bfbd_nicelydone.jpg","Single project from Roadmap",[170,172],{"id":143,"label":144,"slug":145,"rank":57,"group":171},{"id":97,"label":98,"slug":99},{"id":173,"label":174,"slug":175,"rank":59,"group":176},47,"Table","table",{"id":97,"label":98,"slug":99},[178,182],{"id":179,"title":180,"slug":181},169,"Avatar","avatar",{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":184},[],{"uuid":186,"title":187,"description":188,"canonical_path":4,"image":189,"width":48,"height":49,"image_alt":190,"kind":51,"patterns":191,"component_categories":203,"app":213},"c38d2e5e-c3e4-4f65-ba7d-1e4aec43b45b","Project settings","Timeline view where the user edits project details, privacy settings, and manages members via a modal.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Froadmap_project-settings_03d61156_nicelydone.jpg","Project settings from Roadmap",[192,194,201],{"id":155,"label":156,"slug":157,"rank":57,"group":193},{"id":54,"label":152,"slug":153},{"id":195,"label":196,"slug":197,"rank":59,"group":198},104,"Team Management","team-management",{"id":148,"label":199,"slug":200},"Settings & Admin","settings-and-admin",{"id":143,"label":144,"slug":145,"rank":54,"group":202},{"id":97,"label":98,"slug":99},[204,208,212],{"id":205,"title":206,"slug":207},183,"Color picker","color-picker",{"id":209,"title":210,"slug":211},284,"Modal","modal",{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":214},[],{"uuid":216,"title":217,"description":218,"canonical_path":4,"image":219,"width":48,"height":49,"image_alt":220,"kind":51,"patterns":221,"component_categories":237,"app":242},"45722f81-ad08-494d-bc9b-228da428a2cd","Dropdown","Home screen where the user can view their existing projects or create a new one, with an active trial countdown visible in the top bar.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Froadmap_dropdown_7f8b8e17_nicelydone.jpg","Dropdown from Roadmap",[222,229],{"id":223,"label":87,"slug":224,"rank":57,"group":225},81,"home",{"id":226,"label":227,"slug":228},8,"Pages & Content","pages-and-content",{"id":230,"label":231,"slug":232,"rank":59,"group":233},91,"Trial","trial",{"id":234,"label":235,"slug":236},9,"Plans & Limits","plans-and-limits",[238,239,240,241],{"id":122,"title":123,"slug":124},{"id":126,"title":127,"slug":128},{"id":130,"title":131,"slug":132},{"id":179,"title":180,"slug":181},{"slug":30,"title":29,"logo":32,"categories":243},[],{"uuid":245,"title":246,"description":247,"canonical_path":4,"image":248,"width":48,"height":49,"image_alt":249,"kind":51,"patterns":250,"component_categories":265,"app":271},"e2fa299a-eb46-435f-881f-7ace8449e3bf","Settings","Settings modal where the user updates their profile photo, name, and time zone.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Froadmap_settings_c35ec8cf_nicelydone.jpg","Settings from Roadmap",[251,256,263],{"id":252,"label":253,"slug":254,"rank":57,"group":255},94,"Account Settings","account-settings",{"id":148,"label":199,"slug":200},{"id":257,"label":258,"slug":259,"rank":59,"group":260},3,"Profile","profile",{"id":155,"label":261,"slug":262},"Social & Collaboration","social-and-collaboration",{"id":155,"label":156,"slug":157,"rank":54,"group":264},{"id":54,"label":152,"slug":153},[266,267,268,269,270],{"id":209,"title":210,"slug":211},{"id":126,"title":127,"slug":128},{"id":179,"title":180,"slug":181},{"id":130,"title":131,"slug":132},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":272},[],{"uuid":274,"title":246,"description":275,"canonical_path":4,"image":276,"width":48,"height":49,"image_alt":249,"kind":51,"patterns":277,"component_categories":283,"app":289},"a557df85-91d8-4750-a806-75567379e823","Settings modal where the user configures email notification preferences for project changes and roadmap news.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Froadmap_settings-2_9c4da324_nicelydone.jpg",[278],{"id":279,"label":280,"slug":281,"rank":57,"group":282},99,"Notification Settings","notification-settings",{"id":148,"label":199,"slug":200},[284,285,286,287,288],{"id":209,"title":210,"slug":211},{"id":126,"title":127,"slug":128},{"id":130,"title":131,"slug":132},{"id":179,"title":180,"slug":181},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":290},[],{"uuid":292,"title":293,"description":294,"canonical_path":4,"image":295,"width":48,"height":49,"image_alt":296,"kind":51,"patterns":297,"component_categories":310,"app":315},"dea85669-82e0-40ef-b4d9-5a1bd3e031ce","Team settings","Settings modal where the user can rename the team, toggle a Slack integration, and invite new members by email while assigning their roles.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Froadmap_team-settings_5b9726c7_nicelydone.jpg","Team settings from Roadmap",[298,300,305],{"id":195,"label":196,"slug":197,"rank":57,"group":299},{"id":148,"label":199,"slug":200},{"id":301,"label":302,"slug":303,"rank":59,"group":304},100,"Roles & Permissions","roles-and-permissions",{"id":148,"label":199,"slug":200},{"id":306,"label":307,"slug":308,"rank":54,"group":309},97,"Integrations","integrations",{"id":148,"label":199,"slug":200},[311,312,313,314],{"id":209,"title":210,"slug":211},{"id":126,"title":127,"slug":128},{"id":130,"title":131,"slug":132},{"id":179,"title":180,"slug":181},{"slug":30,"title":29,"logo":32,"categories":316},[],{"uuid":318,"title":319,"description":320,"canonical_path":4,"image":321,"width":48,"height":49,"image_alt":322,"kind":51,"patterns":323,"component_categories":342,"app":349},"9df59b5f-deeb-4b78-a67c-c0064924192c","Plans","Upgrade modal where the user reviews pricing per member and total monthly cost before confirming their subscription.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Froadmap_plans_a7216434_nicelydone.jpg","Plans from Roadmap",[324,329,337],{"id":325,"label":326,"slug":327,"rank":57,"group":328},89,"Pricing","pricing",{"id":234,"label":235,"slug":236},{"id":330,"label":331,"slug":332,"rank":59,"group":333},130,"Checkout","checkout",{"id":334,"label":335,"slug":336},14,"Payments & Checkout","payments-and-checkout",{"id":338,"label":339,"slug":340,"rank":54,"group":341},114,"Confirmation","confirmation",{"id":113,"label":114,"slug":115},[343,344,345,346,347,348],{"id":122,"title":123,"slug":124},{"id":209,"title":210,"slug":211},{"id":126,"title":127,"slug":128},{"id":130,"title":131,"slug":132},{"id":179,"title":180,"slug":181},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":350},[],{"uuid":352,"title":331,"description":353,"canonical_path":4,"image":354,"width":48,"height":49,"image_alt":355,"kind":51,"patterns":356,"component_categories":369,"app":376},"6d86ed20-84ee-40b1-9ea2-80be6aea8076","Dashboard with an open modal where the user enters their credit card details to set up a subscription payment.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Froadmap_checkout_92d881d3_nicelydone.jpg","Checkout from Roadmap",[357,362,364],{"id":358,"label":359,"slug":360,"rank":57,"group":361},131,"Payment Form","payment-form",{"id":334,"label":335,"slug":336},{"id":330,"label":331,"slug":332,"rank":59,"group":363},{"id":334,"label":335,"slug":336},{"id":365,"label":366,"slug":367,"rank":54,"group":368},96,"Billing Settings","billing-settings",{"id":148,"label":199,"slug":200},[370,371,372,373,374,375],{"id":122,"title":123,"slug":124},{"id":209,"title":210,"slug":211},{"id":126,"title":127,"slug":128},{"id":130,"title":131,"slug":132},{"id":179,"title":180,"slug":181},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":377},[],[],[380,382,384,386,388,390,392,394,396,398,400,402,404,407,410,413,416,419,421,425,429,433],{"label":156,"to":381},"\u002Fexamples\u002Fscreens\u002Fedit",{"label":144,"to":383},"\u002Fexamples\u002Fscreens\u002Ftimeline",{"label":331,"to":385},"\u002Fexamples\u002Fscreens\u002Fcheckout",{"label":196,"to":387},"\u002Fexamples\u002Fscreens\u002Fteam-management",{"label":253,"to":389},"\u002Fexamples\u002Fscreens\u002Faccount-settings",{"label":366,"to":391},"\u002Fexamples\u002Fscreens\u002Fbilling-settings",{"label":339,"to":393},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":94,"to":395},"\u002Fexamples\u002Fscreens\u002Fdashboard",{"label":149,"to":397},"\u002Fexamples\u002Fscreens\u002Fdrag-and-drop",{"label":110,"to":399},"\u002Fexamples\u002Fscreens\u002Fempty-state",{"label":55,"to":401},"\u002Fexamples\u002Fscreens\u002Fforgot-password",{"label":102,"to":403},"\u002Fexamples\u002Fscreens\u002Fgetting-started",{"label":405,"to":406},"Roadmap marketing pages","\u002Fexamples\u002Fapps\u002Froadmap\u002Fmarketing",{"label":408,"to":409},"Roadmap user flows","\u002Fexamples\u002Fapps\u002Froadmap\u002Fflows",{"label":411,"to":412},"Roadmap UI components","\u002Fexamples\u002Fapps\u002Froadmap\u002Fcomponents",{"label":414,"to":415},"Task Management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ftask-management",{"label":417,"to":418},"Productivity app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fproductivity",{"label":420,"to":18},"All SaaS app examples",{"label":422,"to":423,"description":424},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":426,"to":427,"description":428},"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":430,"to":431,"description":432},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":434,"to":435,"description":436},"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":438,"updated_at":439},"2017-01-17T15:35:00.000Z","2026-09-13T13:02:39.000Z"]