[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fmarvel":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":37,"examples":57,"showcases":58,"links":424,"dates":461},"\u002Fexamples\u002Fapps\u002Fmarvel","detail","apps",true,{"title":9,"description":10,"og_image":11},"Marvel design examples - Nicelydone","Explore Marvel UI design examples. Design and Prototyping for everyone","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_sign-in_51e9f684_nicelydone.png",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":4},"Marvel design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":36},"SaaS app examples",[24],{"title":25,"links":26},"Explore Marvel",[27,30,33],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Fmarvel\u002Fscreens",{"label":31,"to":32},"user flows","\u002Fexamples\u002Fapps\u002Fmarvel\u002Fflows",{"label":34,"to":35},"marketing pages","\u002Fexamples\u002Fapps\u002Fmarvel\u002Fmarketing",[],{"title":38,"slug":39,"description":40,"logo":41,"url":42,"twitter_username":43,"categories":44},"Marvel","marvel","Design and Prototyping for everyone","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmarvel-d04e151b.png","https:\u002F\u002Fmarvelapp.com","marvelapp",[45,49,53],{"id":46,"title":47,"slug":48},8,"Design","design",{"id":50,"title":51,"slug":52},23,"Collaboration","collaboration",{"id":54,"title":55,"slug":56},104,"User Research","user-research",[],[59,418,421],{"family":60,"examples":61},"screens",[62,87,104,121,167,185,216,255,295,318,353,385],{"uuid":63,"title":64,"description":65,"canonical_path":29,"image":11,"width":66,"height":67,"image_alt":68,"kind":69,"patterns":70,"component_categories":80,"app":85},"364d214f-0b56-44a3-9cf4-6680d6dbbe54","Marvel | Sign in","Sign-in screen where the user authenticates with email, Google, or Enterprise SSO, alongside a promotional spotlight for a new user testing player.",3072,1726,"Marvel | Sign in from Marvel","screen",[71],{"id":72,"label":73,"slug":74,"rank":75,"group":76},4,"Sign In","sign-in",0,{"id":77,"label":78,"slug":79},1,"Access & Account","access-and-account",[81],{"id":82,"title":83,"slug":84},175,"Button","button",{"slug":39,"title":38,"logo":41,"categories":86},[],{"uuid":88,"title":89,"description":90,"canonical_path":29,"image":91,"width":66,"height":92,"image_alt":93,"kind":69,"patterns":94,"component_categories":100,"app":102},"ba72fb26-9dde-4d40-9d5a-4dc34b1d7c7d","Reset your password – Marvel","Password recovery screen where the user enters their email address to receive a reset link, accompanied by a promotional panel for a new user testing feature.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_password-reset_3598fecf_nicelydone.png",1654,"Reset your password – Marvel from Marvel",[95],{"id":96,"label":97,"slug":98,"rank":75,"group":99},2,"Forgot Password","forgot-password",{"id":77,"label":78,"slug":79},[101],{"id":82,"title":83,"slug":84},{"slug":39,"title":38,"logo":41,"categories":103},[],{"uuid":105,"title":106,"description":107,"canonical_path":29,"image":108,"width":66,"height":109,"image_alt":110,"kind":69,"patterns":111,"component_categories":117,"app":119},"13a6b732-41bb-40ed-8bd6-51abc443a81b","Marvel | Create your free account","Signup screen where the user creates a free account using their email and password or via Google OAuth.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_create_42f4aa48_nicelydone.png",2106,"Marvel | Create your free account from Marvel",[112],{"id":113,"label":114,"slug":115,"rank":75,"group":116},5,"Sign Up","sign-up",{"id":77,"label":78,"slug":79},[118],{"id":82,"title":83,"slug":84},{"slug":39,"title":38,"logo":41,"categories":120},[],{"uuid":122,"title":123,"description":124,"canonical_path":29,"image":125,"width":66,"height":92,"image_alt":126,"kind":69,"patterns":127,"component_categories":143,"app":165},"dfb00caf-a5d5-43dd-9c72-73a3bf4b57ad","Projects | Marvel","Projects view displaying an empty state with a prompt to check the team for existing work, alongside an onboarding request for the user's role to personalize their experience.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_home-product-logged_onboarding_663513fd_nicelydone.png","Projects | Marvel from Marvel",[128,136],{"id":129,"label":130,"slug":131,"rank":75,"group":132},115,"Empty State","empty-state",{"id":133,"label":134,"slug":135},12,"States & Feedback","states-and-feedback",{"id":137,"label":138,"slug":139,"rank":77,"group":140},41,"Dashboard","dashboard",{"id":72,"label":141,"slug":142},"Data & Analysis","data-and-analysis",[144,148,152,156,160,164],{"id":145,"title":146,"slug":147},284,"Modal","modal",{"id":149,"title":150,"slug":151},174,"Card","card",{"id":153,"title":154,"slug":155},233,"Tabs","tabs",{"id":157,"title":158,"slug":159},260,"Badge","badge",{"id":161,"title":162,"slug":163},169,"Avatar","avatar",{"id":82,"title":83,"slug":84},{"slug":39,"title":38,"logo":41,"categories":166},[],{"uuid":168,"title":169,"description":170,"canonical_path":29,"image":171,"width":66,"height":92,"image_alt":172,"kind":69,"patterns":173,"component_categories":181,"app":183},"16603c4e-c2ce-40d4-a80d-8515572fc347","Create a prototype project | Marvel","Creation screen where the user names their new prototype project and selects a device resolution type from an open dropdown.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_create_432d3916_nicelydone.png","Create a prototype project | Marvel from Marvel",[174],{"id":175,"label":176,"slug":177,"rank":75,"group":178},7,"Add & Create","add-and-create",{"id":96,"label":179,"slug":180},"Actions","actions",[182],{"id":82,"title":83,"slug":84},{"slug":39,"title":38,"logo":41,"categories":184},[],{"uuid":186,"title":38,"description":187,"canonical_path":29,"image":188,"width":66,"height":189,"image_alt":190,"kind":69,"patterns":191,"component_categories":210,"app":214},"a91284e6-6a5f-4618-9fa5-fd90ee996650","Paywall modal where the user is prompted to upgrade their plan to access invite-only projects, featuring four pricing tiers and a detailed comparison table.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_plans-pricing-product_54b4297a_nicelydone.png",3754,"Marvel from Marvel",[192,200,205],{"id":193,"label":194,"slug":195,"rank":75,"group":196},88,"Feature Gate","feature-gate",{"id":197,"label":198,"slug":199},9,"Plans & Limits","plans-and-limits",{"id":201,"label":202,"slug":203,"rank":77,"group":204},89,"Pricing","pricing",{"id":197,"label":198,"slug":199},{"id":206,"label":207,"slug":208,"rank":96,"group":209},92,"Upgrade Prompt","upgrade-prompt",{"id":197,"label":198,"slug":199},[211,212,213],{"id":149,"title":150,"slug":151},{"id":157,"title":158,"slug":159},{"id":82,"title":83,"slug":84},{"slug":39,"title":38,"logo":41,"categories":215},[],{"uuid":217,"title":218,"description":219,"canonical_path":29,"image":220,"width":66,"height":221,"image_alt":222,"kind":69,"patterns":223,"component_categories":238,"app":253},"f298e512-d121-4c27-bf61-be81842d017a","Homepage proto | Marvel","Empty project view prompting the user to upload designs, get a Sketch plugin, or try an example prototype, with a banner offering a tutorial video.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_empty-state_onboarding_upload_cd0839eb_nicelydone.png",1834,"Homepage proto | Marvel from Marvel",[224,226,233],{"id":129,"label":130,"slug":131,"rank":75,"group":225},{"id":133,"label":134,"slug":135},{"id":227,"label":228,"slug":229,"rank":77,"group":230},81,"Home","home",{"id":46,"label":231,"slug":232},"Pages & Content","pages-and-content",{"id":234,"label":235,"slug":236,"rank":96,"group":237},25,"Upload & Download","upload-and-download",{"id":96,"label":179,"slug":180},[239,243,247,251,252],{"id":240,"title":241,"slug":242},240,"Horizontal navigation","horizontal-navigation",{"id":244,"title":245,"slug":246},223,"Slider","slider",{"id":248,"title":249,"slug":250},277,"Button group","button-group",{"id":161,"title":162,"slug":163},{"id":82,"title":83,"slug":84},{"slug":39,"title":38,"logo":41,"categories":254},[],{"uuid":256,"title":38,"description":257,"canonical_path":29,"image":258,"width":66,"height":92,"image_alt":190,"kind":69,"patterns":259,"component_categories":280,"app":293},"bc06db3c-b499-41c5-90b6-7cda40269184","Design editor canvas where the user can drag UI components from a floating library panel and adjust their properties in a right-hand inspector panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_create_63e160b3_nicelydone.png",[260,267,272,274],{"id":261,"label":262,"slug":263,"rank":75,"group":264},55,"Design Editor","design-editor",{"id":113,"label":265,"slug":266},"Media & Tools","media-and-tools",{"id":268,"label":269,"slug":270,"rank":77,"group":271},11,"Edit","edit",{"id":96,"label":179,"slug":180},{"id":234,"label":235,"slug":236,"rank":96,"group":273},{"id":96,"label":179,"slug":180},{"id":275,"label":276,"slug":277,"rank":278,"group":279},22,"Search","search",3,{"id":96,"label":179,"slug":180},[281,285,289,290,291,292],{"id":282,"title":283,"slug":284},257,"Input number","input-number",{"id":286,"title":287,"slug":288},214,"Popover","popover",{"id":244,"title":245,"slug":246},{"id":248,"title":249,"slug":250},{"id":149,"title":150,"slug":151},{"id":82,"title":83,"slug":84},{"slug":39,"title":38,"logo":41,"categories":294},[],{"uuid":296,"title":38,"description":297,"canonical_path":29,"image":298,"width":66,"height":92,"image_alt":190,"kind":69,"patterns":299,"component_categories":310,"app":316},"a4923746-7a59-40f1-b231-f09165abf5e2","Design editor where the user is manipulating a button group component on the canvas and adjusting its properties in the right inspector panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_create_aa938687_nicelydone.png",[300,302,304,306],{"id":261,"label":262,"slug":263,"rank":75,"group":301},{"id":113,"label":265,"slug":266},{"id":268,"label":269,"slug":270,"rank":77,"group":303},{"id":96,"label":179,"slug":180},{"id":234,"label":235,"slug":236,"rank":96,"group":305},{"id":96,"label":179,"slug":180},{"id":50,"label":307,"slug":308,"rank":278,"group":309},"Select","select",{"id":96,"label":179,"slug":180},[311,312,313,314,315],{"id":282,"title":283,"slug":284},{"id":286,"title":287,"slug":288},{"id":244,"title":245,"slug":246},{"id":248,"title":249,"slug":250},{"id":149,"title":150,"slug":151},{"slug":39,"title":38,"logo":41,"categories":317},[],{"uuid":319,"title":218,"description":320,"canonical_path":29,"image":321,"width":66,"height":92,"image_alt":222,"kind":69,"patterns":322,"component_categories":345,"app":351},"f7bd21f2-020c-4e2d-974a-364d1c1bbbb4","Detail page for a design project where the user can view, upload, share, and play screen prototypes in a grid layout.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_list_upload_8b71e737_nicelydone.png",[323,328,330,335,340],{"id":324,"label":325,"slug":326,"rank":75,"group":327},80,"Files","files",{"id":46,"label":231,"slug":232},{"id":234,"label":235,"slug":236,"rank":77,"group":329},{"id":96,"label":179,"slug":180},{"id":331,"label":332,"slug":333,"rank":96,"group":334},24,"Share","share",{"id":96,"label":179,"slug":180},{"id":336,"label":337,"slug":338,"rank":278,"group":339},79,"Browse","browse",{"id":46,"label":231,"slug":232},{"id":341,"label":342,"slug":343,"rank":72,"group":344},82,"Media Detail","media-detail",{"id":46,"label":231,"slug":232},[346,347,348,349,350],{"id":240,"title":241,"slug":242},{"id":244,"title":245,"slug":246},{"id":149,"title":150,"slug":151},{"id":161,"title":162,"slug":163},{"id":82,"title":83,"slug":84},{"slug":39,"title":38,"logo":41,"categories":352},[],{"uuid":354,"title":218,"description":355,"canonical_path":29,"image":356,"width":66,"height":92,"image_alt":222,"kind":69,"patterns":357,"component_categories":376,"app":383},"e0592121-efe7-4ab7-bb45-d3fb99c244c6","List view of a design project where the user has selected multiple screens to reveal a bulk action toolbar for organizing or deleting.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_list_bulk-actions_3104472e_nicelydone.png",[358,360,368,370,374],{"id":50,"label":307,"slug":308,"rank":75,"group":359},{"id":96,"label":179,"slug":180},{"id":361,"label":362,"slug":363,"rank":77,"group":364},126,"Bulk Actions","bulk-actions",{"id":365,"label":366,"slug":367},13,"Workflow & Automation","workflow-and-automation",{"id":324,"label":325,"slug":326,"rank":96,"group":369},{"id":46,"label":231,"slug":232},{"id":197,"label":371,"slug":372,"rank":278,"group":373},"Delete","delete",{"id":96,"label":179,"slug":180},{"id":234,"label":235,"slug":236,"rank":72,"group":375},{"id":96,"label":179,"slug":180},[377,378,379,380,381,382],{"id":240,"title":241,"slug":242},{"id":244,"title":245,"slug":246},{"id":248,"title":249,"slug":250},{"id":149,"title":150,"slug":151},{"id":161,"title":162,"slug":163},{"id":82,"title":83,"slug":84},{"slug":39,"title":38,"logo":41,"categories":384},[],{"uuid":386,"title":387,"description":388,"canonical_path":29,"image":389,"width":66,"height":92,"image_alt":390,"kind":69,"patterns":391,"component_categories":411,"app":416},"79c69c8a-5135-46a9-bc6a-45bd88ea2c1c","Homepage proto | Share | Marvel","Full-screen overlay where the user can invite workspace members to collaborate or configure link sharing options like password protection and invite-only access.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmarvel_share_team_dd2bddb5_nicelydone.png","Homepage proto | Share | Marvel from Marvel",[392,397,404,409],{"id":393,"label":394,"slug":395,"rank":75,"group":396},133,"Invite Teammates","invite-teammates",{"id":96,"label":179,"slug":180},{"id":54,"label":398,"slug":399,"rank":77,"group":400},"Team Management","team-management",{"id":401,"label":402,"slug":403},10,"Settings & Admin","settings-and-admin",{"id":405,"label":406,"slug":407,"rank":96,"group":408},100,"Roles & Permissions","roles-and-permissions",{"id":401,"label":402,"slug":403},{"id":206,"label":207,"slug":208,"rank":278,"group":410},{"id":197,"label":198,"slug":199},[412,413,414,415],{"id":153,"title":154,"slug":155},{"id":157,"title":158,"slug":159},{"id":161,"title":162,"slug":163},{"id":82,"title":83,"slug":84},{"slug":39,"title":38,"logo":41,"categories":417},[],{"family":419,"examples":420},"flows",[],{"family":422,"examples":423},"pages",[],[425,427,429,431,434,437,440,443,445,449,453,457],{"label":426,"to":29},"Marvel product screens",{"label":428,"to":35},"Marvel marketing pages",{"label":430,"to":32},"Marvel user flows",{"label":432,"to":433},"Marvel UI components","\u002Fexamples\u002Fapps\u002Fmarvel\u002Fcomponents",{"label":435,"to":436},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":438,"to":439},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"label":441,"to":442},"User Research app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fuser-research",{"label":444,"to":18},"All SaaS app examples",{"label":446,"to":447,"description":448},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":450,"to":451,"description":452},"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":454,"to":455,"description":456},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":458,"to":459,"description":460},"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":462,"updated_at":463},"2016-06-20T15:21:40.000Z","2026-09-13T13:02:39.000Z"]