[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fheroic-labs\u002Fscreens":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":47,"showcases":359,"links":360,"dates":421},"\u002Fexamples\u002Fapps\u002Fheroic-labs\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Heroic Labs product screens examples - Nicelydone","Browse Heroic Labs screen design examples. Preview the interface screenshots and explore related UI patterns. Backend for game developers","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fheroic-labs_sign-in_6ac09537_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},"Heroic Labs design examples","\u002Fexamples\u002Fapps\u002Fheroic-labs",{"label":23,"to":4},"Heroic Labs 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},"Heroic Labs","heroic-labs","Backend for game developers","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fheroic-labs-b010467c.png","https:\u002F\u002Fheroiclabs.com",[35,39,43],{"id":36,"title":37,"slug":38},48,"Developer Tools","developer-tools",{"id":40,"title":41,"slug":42},50,"Mobile Games","mobile-games",{"id":44,"title":45,"slug":46},45,"Open Source","open-source",[48,81,96,115,144,176,200,234,251,284,307,338],{"uuid":49,"title":50,"description":51,"canonical_path":4,"image":11,"width":52,"height":53,"image_alt":54,"kind":55,"patterns":56,"component_categories":66,"app":79},"04979fc2-360a-426e-ab53-5fa29211a154","Sign in","Sign-in screen where the user authenticates with Google, Github, or email, with a tabbed option to switch to sign up.",2800,1560,"Sign in from Heroic Labs","screen",[57],{"id":58,"label":59,"slug":60,"rank":61,"group":62},2,"Forgot Password","forgot-password",0,{"id":63,"label":64,"slug":65},1,"Access & Account","access-and-account",[67,71,75],{"id":68,"title":69,"slug":70},233,"Tabs","tabs",{"id":72,"title":73,"slug":74},174,"Card","card",{"id":76,"title":77,"slug":78},175,"Button","button",{"slug":30,"title":29,"logo":32,"categories":80},[],{"uuid":82,"title":83,"description":84,"canonical_path":4,"image":85,"width":52,"height":86,"image_alt":87,"kind":55,"patterns":88,"component_categories":91,"app":94},"30fc50f3-05df-4eed-ae00-c7edb77b3a87","Password reset","Password recovery screen where the user enters their email address to receive a reset link.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fheroic-labs_password-reset_3916afc5_nicelydone.jpg",1544,"Password reset from Heroic Labs",[89],{"id":58,"label":59,"slug":60,"rank":61,"group":90},{"id":63,"label":64,"slug":65},[92,93],{"id":72,"title":73,"slug":74},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":95},[],{"uuid":97,"title":98,"description":99,"canonical_path":4,"image":100,"width":52,"height":101,"image_alt":102,"kind":55,"patterns":103,"component_categories":109,"app":113},"acd9f37a-b657-41da-be11-c470b8b7583e","Sign up","Signup page where the user can create a new account using Google, GitHub, or an email and password.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fheroic-labs_sign-up_9dfb9f49_nicelydone.jpg",1686,"Sign up from Heroic Labs",[104],{"id":105,"label":106,"slug":107,"rank":61,"group":108},5,"Sign Up","sign-up",{"id":63,"label":64,"slug":65},[110,111,112],{"id":68,"title":69,"slug":70},{"id":72,"title":73,"slug":74},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":114},[],{"uuid":116,"title":98,"description":117,"canonical_path":4,"image":118,"width":52,"height":119,"image_alt":102,"kind":55,"patterns":120,"component_categories":135,"app":142},"6166fce0-44c2-4f7d-afd2-9f717c0c0290","Onboarding step where the user sets up their profile by adding an avatar, name, company, and country, with an option to subscribe to the newsletter.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fheroic-labs_sign-up-2_95e0358a_nicelydone.jpg",1752,[121,123,127],{"id":105,"label":106,"slug":107,"rank":61,"group":122},{"id":63,"label":64,"slug":65},{"id":63,"label":124,"slug":125,"rank":63,"group":126},"Account Setup","account-setup",{"id":63,"label":64,"slug":65},{"id":128,"label":129,"slug":130,"rank":58,"group":131},3,"Profile","profile",{"id":132,"label":133,"slug":134},11,"Social & Collaboration","social-and-collaboration",[136,137,141],{"id":68,"title":69,"slug":70},{"id":138,"title":139,"slug":140},169,"Avatar","avatar",{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":143},[],{"uuid":145,"title":146,"description":147,"canonical_path":4,"image":148,"width":52,"height":86,"image_alt":149,"kind":55,"patterns":150,"component_categories":166,"app":174},"fcda7e7c-3afe-455d-b7da-74ccf15a0e3c","Home","List view where the user manages their games, currently showing an empty state with a prompt to create a new game.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fheroic-labs_home_1206f759_nicelydone.jpg","Home from Heroic Labs",[151,159],{"id":152,"label":153,"slug":154,"rank":61,"group":155},115,"Empty State","empty-state",{"id":156,"label":157,"slug":158},12,"States & Feedback","states-and-feedback",{"id":160,"label":146,"slug":161,"rank":63,"group":162},81,"home",{"id":163,"label":164,"slug":165},8,"Pages & Content","pages-and-content",[167,171,172,173],{"id":168,"title":169,"slug":170},240,"Horizontal navigation","horizontal-navigation",{"id":72,"title":73,"slug":74},{"id":138,"title":139,"slug":140},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":175},[],{"uuid":177,"title":178,"description":179,"canonical_path":4,"image":180,"width":52,"height":86,"image_alt":181,"kind":55,"patterns":182,"component_categories":193,"app":198},"5ef71e17-40a5-4bd9-816b-c1320f52f244","Dropdown","Dashboard empty state where the user is prompted to create their first game.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fheroic-labs_dropdown_09dc735d_nicelydone.jpg","Dropdown from Heroic Labs",[183,185],{"id":152,"label":153,"slug":154,"rank":61,"group":184},{"id":156,"label":157,"slug":158},{"id":186,"label":187,"slug":188,"rank":63,"group":189},41,"Dashboard","dashboard",{"id":190,"label":191,"slug":192},4,"Data & Analysis","data-and-analysis",[194,195,196,197],{"id":168,"title":169,"slug":170},{"id":72,"title":73,"slug":74},{"id":138,"title":139,"slug":140},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":199},[],{"uuid":201,"title":202,"description":203,"canonical_path":4,"image":204,"width":52,"height":86,"image_alt":205,"kind":55,"patterns":206,"component_categories":221,"app":232},"852f875a-48b0-4803-8b87-61b14e1b41be","Create","Modal overlay where the user starts creating a new game by entering its name as the first step of a four-part wizard.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fheroic-labs_create_21c6a6bc_nicelydone.jpg","Create from Heroic Labs",[207,214],{"id":208,"label":209,"slug":210,"rank":61,"group":211},7,"Add & Create","add-and-create",{"id":58,"label":212,"slug":213},"Actions","actions",{"id":215,"label":216,"slug":217,"rank":63,"group":218},75,"Setup Wizard","setup-wizard",{"id":208,"label":219,"slug":220},"Onboarding & Education","onboarding-and-education",[222,226,230,231],{"id":223,"title":224,"slug":225},284,"Modal","modal",{"id":227,"title":228,"slug":229},227,"Stepper","stepper",{"id":168,"title":169,"slug":170},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":233},[],{"uuid":235,"title":202,"description":236,"canonical_path":4,"image":237,"width":52,"height":86,"image_alt":205,"kind":55,"patterns":238,"component_categories":243,"app":249},"96cf5a25-0506-4dbc-9416-51c3cf01dafc","Create modal where the user configures a new game project by specifying the engine, genre, and release date in a multi-step wizard.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fheroic-labs_create-2_86836439_nicelydone.jpg",[239,241],{"id":215,"label":216,"slug":217,"rank":61,"group":240},{"id":208,"label":219,"slug":220},{"id":208,"label":209,"slug":210,"rank":63,"group":242},{"id":58,"label":212,"slug":213},[244,245,246,247,248],{"id":223,"title":224,"slug":225},{"id":227,"title":228,"slug":229},{"id":68,"title":69,"slug":70},{"id":138,"title":139,"slug":140},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":250},[],{"uuid":252,"title":202,"description":253,"canonical_path":4,"image":254,"width":52,"height":86,"image_alt":205,"kind":55,"patterns":255,"component_categories":276,"app":282},"2b48d62c-c6fe-49f5-b879-750dfc0ac667","Game creation wizard on the third step where the user can invite team members by entering their email addresses or nicknames.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fheroic-labs_create-3_4518a312_nicelydone.jpg",[256,261,269,271],{"id":257,"label":258,"slug":259,"rank":61,"group":260},133,"Invite Teammates","invite-teammates",{"id":58,"label":212,"slug":213},{"id":262,"label":263,"slug":264,"rank":63,"group":265},104,"Team Management","team-management",{"id":266,"label":267,"slug":268},10,"Settings & Admin","settings-and-admin",{"id":215,"label":216,"slug":217,"rank":58,"group":270},{"id":208,"label":219,"slug":220},{"id":272,"label":273,"slug":274,"rank":128,"group":275},114,"Confirmation","confirmation",{"id":156,"label":157,"slug":158},[277,278,279,280,281],{"id":223,"title":224,"slug":225},{"id":227,"title":228,"slug":229},{"id":168,"title":169,"slug":170},{"id":138,"title":139,"slug":140},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":283},[],{"uuid":285,"title":202,"description":286,"canonical_path":4,"image":287,"width":52,"height":86,"image_alt":205,"kind":55,"patterns":288,"component_categories":300,"app":305},"47f78feb-47ad-4dc4-abd3-c9bee76043cb","Creation modal where the user completes the new game setup by receiving their API key and starting the project.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fheroic-labs_create-4_91723b84_nicelydone.jpg",[289,291,296,298],{"id":215,"label":216,"slug":217,"rank":61,"group":290},{"id":208,"label":219,"slug":220},{"id":292,"label":293,"slug":294,"rank":63,"group":295},95,"API Keys","api-keys",{"id":266,"label":267,"slug":268},{"id":63,"label":124,"slug":125,"rank":58,"group":297},{"id":63,"label":64,"slug":65},{"id":272,"label":273,"slug":274,"rank":128,"group":299},{"id":156,"label":157,"slug":158},[301,302,303,304],{"id":223,"title":224,"slug":225},{"id":227,"title":228,"slug":229},{"id":168,"title":169,"slug":170},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":306},[],{"uuid":308,"title":309,"description":310,"canonical_path":4,"image":311,"width":52,"height":86,"image_alt":312,"kind":55,"patterns":313,"component_categories":330,"app":336},"e5753fb6-b21e-4092-80c1-aa1145f7e00b","Settings","Settings page where the user configures game profile details, manages destructive actions, and generates server and API keys.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fheroic-labs_settings_60a7a44f_nicelydone.jpg","Settings from Heroic Labs",[314,316,320,325],{"id":292,"label":293,"slug":294,"rank":61,"group":315},{"id":266,"label":267,"slug":268},{"id":132,"label":317,"slug":318,"rank":63,"group":319},"Edit","edit",{"id":58,"label":212,"slug":213},{"id":321,"label":322,"slug":323,"rank":58,"group":324},9,"Delete","delete",{"id":58,"label":212,"slug":213},{"id":326,"label":327,"slug":328,"rank":128,"group":329},47,"Table","table",{"id":190,"label":191,"slug":192},[331,335],{"id":332,"title":333,"slug":334},277,"Button group","button-group",{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":337},[],{"uuid":339,"title":340,"description":341,"canonical_path":4,"image":342,"width":52,"height":86,"image_alt":343,"kind":55,"patterns":344,"component_categories":354,"app":357},"609c381d-fb74-49ab-8a1e-97e58be69430","Team","Settings page where the user invites new collaborators via email or nickname and manages existing team members.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fheroic-labs_team_de99dd9e_nicelydone.jpg","Team from Heroic Labs",[345,347,349],{"id":262,"label":263,"slug":264,"rank":61,"group":346},{"id":266,"label":267,"slug":268},{"id":257,"label":258,"slug":259,"rank":63,"group":348},{"id":58,"label":212,"slug":213},{"id":350,"label":351,"slug":352,"rank":58,"group":353},100,"Roles & Permissions","roles-and-permissions",{"id":266,"label":267,"slug":268},[355,356],{"id":138,"title":139,"slug":140},{"id":76,"title":77,"slug":78},{"slug":30,"title":29,"logo":32,"categories":358},[],[],[361,363,365,367,369,371,373,375,377,379,381,383,385,388,391,394,397,400,403,405,409,413,417],{"label":216,"to":362},"\u002Fexamples\u002Fscreens\u002Fsetup-wizard",{"label":124,"to":364},"\u002Fexamples\u002Fscreens\u002Faccount-setup",{"label":209,"to":366},"\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":293,"to":368},"\u002Fexamples\u002Fscreens\u002Fapi-keys",{"label":273,"to":370},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":153,"to":372},"\u002Fexamples\u002Fscreens\u002Fempty-state",{"label":59,"to":374},"\u002Fexamples\u002Fscreens\u002Fforgot-password",{"label":258,"to":376},"\u002Fexamples\u002Fscreens\u002Finvite-teammates",{"label":106,"to":378},"\u002Fexamples\u002Fscreens\u002Fsign-up",{"label":263,"to":380},"\u002Fexamples\u002Fscreens\u002Fteam-management",{"label":187,"to":382},"\u002Fexamples\u002Fscreens\u002Fdashboard",{"label":322,"to":384},"\u002Fexamples\u002Fscreens\u002Fdelete",{"label":386,"to":387},"Heroic Labs marketing pages","\u002Fexamples\u002Fapps\u002Fheroic-labs\u002Fmarketing",{"label":389,"to":390},"Heroic Labs user flows","\u002Fexamples\u002Fapps\u002Fheroic-labs\u002Fflows",{"label":392,"to":393},"Heroic Labs UI components","\u002Fexamples\u002Fapps\u002Fheroic-labs\u002Fcomponents",{"label":395,"to":396},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":398,"to":399},"Mobile Games app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmobile-games",{"label":401,"to":402},"Open Source app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fopen-source",{"label":404,"to":18},"All SaaS app examples",{"label":406,"to":407,"description":408},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":410,"to":411,"description":412},"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":414,"to":415,"description":416},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":418,"to":419,"description":420},"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":422,"updated_at":423},"2016-07-22T08:00:00.000Z","2026-09-13T13:02:39.000Z"]