[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fhypermode":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":40,"examples":56,"showcases":57,"links":317,"dates":350},"\u002Fexamples\u002Fapps\u002Fhypermode","detail","apps",true,{"title":9,"description":10,"og_image":11},"Hypermode design examples - Nicelydone","Explore Hypermode UI design examples. The platform for agentic flows","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F72d58974-03ae-4176-99c4-67c0a2144df9.png",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":4},"Hypermode design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":39},"SaaS app examples",[24],{"title":25,"links":26},"Explore Hypermode",[27,30,33,36],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Fhypermode\u002Fscreens",{"label":31,"to":32},"user flows","\u002Fexamples\u002Fapps\u002Fhypermode\u002Fflows",{"label":34,"to":35},"UI components","\u002Fexamples\u002Fapps\u002Fhypermode\u002Fcomponents",{"label":37,"to":38},"marketing pages","\u002Fexamples\u002Fapps\u002Fhypermode\u002Fmarketing",[],{"title":41,"slug":42,"description":43,"logo":44,"url":45,"twitter_username":46,"categories":47},"Hypermode","hypermode","The platform for agentic flows","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F5aad555b-6b06-4919-947c-e79a9e24ebaf.png","https:\u002F\u002Fhypermode.com","hypermodeinc",[48,52],{"id":49,"title":50,"slug":51},80,"Artificial Intelligence","artificial-intelligence",{"id":53,"title":54,"slug":55},48,"Developer Tools","developer-tools",[],[58,308,311,314],{"family":59,"examples":60},"screens",[61,90,102,119,130,142,161,209,230,246,266,290],{"uuid":62,"title":63,"description":64,"canonical_path":29,"image":11,"width":65,"height":66,"image_alt":67,"kind":68,"patterns":69,"component_categories":83,"app":88},"72d58974-03ae-4176-99c4-67c0a2144df9","Hypermode – The AI development platform","Sign-in screen where the user authenticates with GitHub or Google to access or create their account.",3024,1714,"Hypermode – The AI development platform from Hypermode","screen",[70,79],{"id":71,"label":72,"slug":73,"rank":74,"group":75},4,"Sign In","sign-in",0,{"id":76,"label":77,"slug":78},1,"Access & Account","access-and-account",{"id":76,"label":80,"slug":81,"rank":76,"group":82},"Account Setup","account-setup",{"id":76,"label":77,"slug":78},[84],{"id":85,"title":86,"slug":87},175,"Button","button",{"slug":42,"title":41,"logo":44,"categories":89},[],{"uuid":91,"title":92,"description":93,"canonical_path":29,"image":94,"width":65,"height":66,"image_alt":95,"kind":68,"patterns":96,"component_categories":99,"app":100},"e8f0873c-6f99-4f8b-a2ed-a68843959b45","Sign in - Google Accounts","This screen is a modal dialog for the sign-in flow. It prompts the user to sign in to 'Hypermde' using their Google account. It displays the Google 'Sign in with Google' option, the Hypermode logo, a pre-selected Google email address (with a dropdown for other accounts), and important legal text regarding data sharing. The user can choose to 'Cancel' or 'Continue' with the sign-in process.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fe8f0873c-6f99-4f8b-a2ed-a68843959b45.png","Sign in - Google Accounts from Hypermode",[97],{"id":71,"label":72,"slug":73,"rank":74,"group":98},{"id":76,"label":77,"slug":78},[],{"slug":42,"title":41,"logo":44,"categories":101},[],{"uuid":103,"title":63,"description":104,"canonical_path":29,"image":105,"width":65,"height":66,"image_alt":67,"kind":68,"patterns":106,"component_categories":115,"app":117},"fd6304c0-8d68-4dc7-9dd6-cd6d7703bc39","Onboarding step where the user names their first workspace to get started in Hypermode.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ffd6304c0-8d68-4dc7-9dd6-cd6d7703bc39.png",[107],{"id":108,"label":109,"slug":110,"rank":74,"group":111},75,"Setup Wizard","setup-wizard",{"id":112,"label":113,"slug":114},7,"Onboarding & Education","onboarding-and-education",[116],{"id":85,"title":86,"slug":87},{"slug":42,"title":41,"logo":44,"categories":118},[],{"uuid":120,"title":63,"description":121,"canonical_path":29,"image":122,"width":65,"height":66,"image_alt":67,"kind":68,"patterns":123,"component_categories":126,"app":128},"e8daf599-e373-419e-b2eb-b84b774fcee9","Onboarding step where the user names their new workspace to get started in Hypermode.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fe8daf599-e373-419e-b2eb-b84b774fcee9.png",[124],{"id":76,"label":80,"slug":81,"rank":74,"group":125},{"id":76,"label":77,"slug":78},[127],{"id":85,"title":86,"slug":87},{"slug":42,"title":41,"logo":44,"categories":129},[],{"uuid":131,"title":63,"description":121,"canonical_path":29,"image":132,"width":65,"height":66,"image_alt":67,"kind":68,"patterns":133,"component_categories":138,"app":140},"148788a9-72c8-4a8a-87e9-a96c9eabcf75","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F148788a9-72c8-4a8a-87e9-a96c9eabcf75.png",[134,136],{"id":76,"label":80,"slug":81,"rank":74,"group":135},{"id":76,"label":77,"slug":78},{"id":108,"label":109,"slug":110,"rank":76,"group":137},{"id":112,"label":113,"slug":114},[139],{"id":85,"title":86,"slug":87},{"slug":42,"title":41,"logo":44,"categories":141},[],{"uuid":143,"title":63,"description":144,"canonical_path":29,"image":145,"width":65,"height":66,"image_alt":67,"kind":68,"patterns":146,"component_categories":157,"app":159},"6eb3e2a2-2804-436d-8f96-e4eea309b729","Onboarding step where the user names their new workspace while the form submits.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F6eb3e2a2-2804-436d-8f96-e4eea309b729.png",[147,149],{"id":76,"label":80,"slug":81,"rank":74,"group":148},{"id":76,"label":77,"slug":78},{"id":150,"label":151,"slug":152,"rank":76,"group":153},120,"Loading","loading",{"id":154,"label":155,"slug":156},12,"States & Feedback","states-and-feedback",[158],{"id":85,"title":86,"slug":87},{"slug":42,"title":41,"logo":44,"categories":160},[],{"uuid":162,"title":63,"description":163,"canonical_path":29,"image":164,"width":65,"height":66,"image_alt":67,"kind":68,"patterns":165,"component_categories":193,"app":207},"7388773e-f976-47e4-ab95-74dba13629d6","AI chat interface where the user starts a new thread with a personal assistant agent, featuring prompt suggestions and an upgrade prompt in the sidebar.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F7388773e-f976-47e4-ab95-74dba13629d6.png",[166,174,179,185],{"id":167,"label":168,"slug":169,"rank":74,"group":170},28,"AI Chat","ai-chat",{"id":171,"label":172,"slug":173},3,"AI","ai",{"id":175,"label":176,"slug":177,"rank":76,"group":178},27,"AI Assistant","ai-assistant",{"id":171,"label":172,"slug":173},{"id":180,"label":181,"slug":182,"rank":183,"group":184},115,"Empty State","empty-state",2,{"id":154,"label":155,"slug":156},{"id":186,"label":187,"slug":188,"rank":171,"group":189},92,"Upgrade Prompt","upgrade-prompt",{"id":190,"label":191,"slug":192},9,"Plans & Limits","plans-and-limits",[194,198,202,206],{"id":195,"title":196,"slug":197},240,"Horizontal navigation","horizontal-navigation",{"id":199,"title":200,"slug":201},169,"Avatar","avatar",{"id":203,"title":204,"slug":205},260,"Badge","badge",{"id":85,"title":86,"slug":87},{"slug":42,"title":41,"logo":44,"categories":208},[],{"uuid":210,"title":63,"description":211,"canonical_path":29,"image":212,"width":65,"height":66,"image_alt":67,"kind":68,"patterns":213,"component_categories":223,"app":228},"d74941a8-d893-4be4-b387-4df637ee13d7","AI chat interface where the user is interacting with a personal assistant agent, currently waiting for a mid-stream response.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fd74941a8-d893-4be4-b387-4df637ee13d7.png",[214,219,221],{"id":215,"label":216,"slug":217,"rank":74,"group":218},26,"AI Agent","ai-agent",{"id":171,"label":172,"slug":173},{"id":167,"label":168,"slug":169,"rank":76,"group":220},{"id":171,"label":172,"slug":173},{"id":175,"label":176,"slug":177,"rank":183,"group":222},{"id":171,"label":172,"slug":173},[224,225,226,227],{"id":195,"title":196,"slug":197},{"id":199,"title":200,"slug":201},{"id":203,"title":204,"slug":205},{"id":85,"title":86,"slug":87},{"slug":42,"title":41,"logo":44,"categories":229},[],{"uuid":231,"title":63,"description":232,"canonical_path":29,"image":233,"width":65,"height":66,"image_alt":67,"kind":68,"patterns":234,"component_categories":239,"app":244},"bd9db27f-3a62-41d0-a7db-157a8014ee48","AI chat interface where the user views a response from their personal assistant agent detailing its capabilities like deep-dive briefings and real-time extraction.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fbd9db27f-3a62-41d0-a7db-157a8014ee48.png",[235,237],{"id":167,"label":168,"slug":169,"rank":74,"group":236},{"id":171,"label":172,"slug":173},{"id":215,"label":216,"slug":217,"rank":76,"group":238},{"id":171,"label":172,"slug":173},[240,241,242,243],{"id":195,"title":196,"slug":197},{"id":199,"title":200,"slug":201},{"id":203,"title":204,"slug":205},{"id":85,"title":86,"slug":87},{"slug":42,"title":41,"logo":44,"categories":245},[],{"uuid":247,"title":63,"description":248,"canonical_path":29,"image":249,"width":65,"height":66,"image_alt":67,"kind":68,"patterns":250,"component_categories":259,"app":264},"fa5ecd8d-3f72-4ede-b4a0-6510f05d136a","AI chat interface where the user views a detailed response from the Sidekick agent about ways to partner with it and can ask follow-up questions.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ffa5ecd8d-3f72-4ede-b4a0-6510f05d136a.png",[251,253,255,257],{"id":167,"label":168,"slug":169,"rank":74,"group":252},{"id":171,"label":172,"slug":173},{"id":175,"label":176,"slug":177,"rank":76,"group":254},{"id":171,"label":172,"slug":173},{"id":215,"label":216,"slug":217,"rank":183,"group":256},{"id":171,"label":172,"slug":173},{"id":186,"label":187,"slug":188,"rank":171,"group":258},{"id":190,"label":191,"slug":192},[260,261,262,263],{"id":195,"title":196,"slug":197},{"id":199,"title":200,"slug":201},{"id":203,"title":204,"slug":205},{"id":85,"title":86,"slug":87},{"slug":42,"title":41,"logo":44,"categories":265},[],{"uuid":267,"title":63,"description":268,"canonical_path":29,"image":269,"width":65,"height":66,"image_alt":67,"kind":68,"patterns":270,"component_categories":279,"app":288},"2dacc252-011c-4147-b882-25483cbfed06","AI chat interface where the user interacts with a personal assistant agent named Sidekick, featuring a dark sidebar with a Pro upgrade prompt and a main conversation area showing a 'Thinking...' generation state.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F2dacc252-011c-4147-b882-25483cbfed06.png",[271,273,275,277],{"id":167,"label":168,"slug":169,"rank":74,"group":272},{"id":171,"label":172,"slug":173},{"id":175,"label":176,"slug":177,"rank":76,"group":274},{"id":171,"label":172,"slug":173},{"id":215,"label":216,"slug":217,"rank":183,"group":276},{"id":171,"label":172,"slug":173},{"id":186,"label":187,"slug":188,"rank":171,"group":278},{"id":190,"label":191,"slug":192},[280,284,285,286,287],{"id":281,"title":282,"slug":283},174,"Card","card",{"id":195,"title":196,"slug":197},{"id":199,"title":200,"slug":201},{"id":203,"title":204,"slug":205},{"id":85,"title":86,"slug":87},{"slug":42,"title":41,"logo":44,"categories":289},[],{"uuid":291,"title":63,"description":292,"canonical_path":29,"image":293,"width":65,"height":66,"image_alt":67,"kind":68,"patterns":294,"component_categories":301,"app":306},"9146fd23-870a-4d55-8a8c-137013094a56","AI chat interface where the user converses with a personal assistant agent named Sidekick about its capabilities.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F9146fd23-870a-4d55-8a8c-137013094a56.png",[295,297,299],{"id":167,"label":168,"slug":169,"rank":74,"group":296},{"id":171,"label":172,"slug":173},{"id":175,"label":176,"slug":177,"rank":76,"group":298},{"id":171,"label":172,"slug":173},{"id":215,"label":216,"slug":217,"rank":183,"group":300},{"id":171,"label":172,"slug":173},[302,303,304,305],{"id":195,"title":196,"slug":197},{"id":199,"title":200,"slug":201},{"id":203,"title":204,"slug":205},{"id":85,"title":86,"slug":87},{"slug":42,"title":41,"logo":44,"categories":307},[],{"family":309,"examples":310},"flows",[],{"family":312,"examples":313},"components",[],{"family":315,"examples":316},"pages",[],[318,320,322,324,326,329,332,334,338,342,346],{"label":319,"to":29},"Hypermode product screens",{"label":321,"to":38},"Hypermode marketing pages",{"label":323,"to":32},"Hypermode user flows",{"label":325,"to":35},"Hypermode UI components",{"label":327,"to":328},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"label":330,"to":331},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":333,"to":18},"All SaaS app examples",{"label":335,"to":336,"description":337},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":339,"to":340,"description":341},"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":343,"to":344,"description":345},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":347,"to":348,"description":349},"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":351,"updated_at":352},"2025-06-30T10:13:00.000Z","2026-09-13T13:02:39.000Z"]