[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Foctopus\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":361,"links":362,"dates":420},"\u002Fexamples\u002Fapps\u002Foctopus\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Octopus product screens examples - Nicelydone","Browse Octopus screen design examples. Preview the interface screenshots and explore related UI patterns. A lightning-fast visual sitemap builder","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Foctopus_sign-up_modals-and-popovers_18fae82d_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},"Octopus design examples","\u002Fexamples\u002Fapps\u002Foctopus",{"label":23,"to":4},"Octopus 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},"Octopus","octopus","A lightning-fast visual sitemap builder","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Foctopus-c04eea5e.png","https:\u002F\u002Foctopus.do",[35,39],{"id":36,"title":37,"slug":38},8,"Design","design",{"id":40,"title":41,"slug":42},7,"Web Development","web-development",[44,105,128,149,163,180,203,232,260,284,306,333],{"uuid":45,"title":46,"description":47,"canonical_path":4,"image":11,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":52,"component_categories":78,"app":103},"7f1b5a03-3740-4725-b88d-97b74e3ebcb2","Untitled project | Octopus.do","Design editor where a modal prompts the user to sign up or log in to save their project, displaying locked pro export options like PDF and XML.",3072,1654,"Untitled project | Octopus.do from Octopus","screen",[53,62,70],{"id":54,"label":55,"slug":56,"rank":57,"group":58},5,"Sign Up","sign-up",0,{"id":59,"label":60,"slug":61},1,"Access & Account","access-and-account",{"id":63,"label":64,"slug":65,"rank":59,"group":66},88,"Feature Gate","feature-gate",{"id":67,"label":68,"slug":69},9,"Plans & Limits","plans-and-limits",{"id":71,"label":72,"slug":73,"rank":74,"group":75},55,"Design Editor","design-editor",2,{"id":54,"label":76,"slug":77},"Media & Tools","media-and-tools",[79,83,87,91,95,99],{"id":80,"title":81,"slug":82},260,"Badge","badge",{"id":84,"title":85,"slug":86},277,"Button group","button-group",{"id":88,"title":89,"slug":90},174,"Card","card",{"id":92,"title":93,"slug":94},240,"Horizontal navigation","horizontal-navigation",{"id":96,"title":97,"slug":98},284,"Modal","modal",{"id":100,"title":101,"slug":102},175,"Button","button",{"slug":30,"title":29,"logo":32,"categories":104},[],{"uuid":106,"title":46,"description":107,"canonical_path":4,"image":108,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":109,"component_categories":120,"app":126},"8fe37376-7714-4926-abc6-dc122c1cdd7f","Signup modal interrupting a user's session in a visual sitemap builder, prompting them to register with email and password to save their project.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Foctopus_sign-in_modals-and-popovers_50295715_nicelydone.png",[110,112],{"id":54,"label":55,"slug":56,"rank":57,"group":111},{"id":59,"label":60,"slug":61},{"id":113,"label":114,"slug":115,"rank":59,"group":116},114,"Confirmation","confirmation",{"id":117,"label":118,"slug":119},12,"States & Feedback","states-and-feedback",[121,122,123,124,125],{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"id":92,"title":93,"slug":94},{"id":96,"title":97,"slug":98},{"id":100,"title":101,"slug":102},{"slug":30,"title":29,"logo":32,"categories":127},[],{"uuid":129,"title":46,"description":130,"canonical_path":4,"image":131,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":132,"component_categories":142,"app":147},"e569508a-cbbc-4a5b-8257-4f0cbc598ff7","Design editor canvas with an active password reset modal prompting the user to enter their email to receive recovery instructions.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Foctopus_password-reset_eebd2a5d_nicelydone.png",[133,137],{"id":74,"label":134,"slug":135,"rank":57,"group":136},"Forgot Password","forgot-password",{"id":59,"label":60,"slug":61},{"id":138,"label":139,"slug":140,"rank":59,"group":141},58,"Media Editor","media-editor",{"id":54,"label":76,"slug":77},[143,144,145,146],{"id":80,"title":81,"slug":82},{"id":88,"title":89,"slug":90},{"id":96,"title":97,"slug":98},{"id":100,"title":101,"slug":102},{"slug":30,"title":29,"logo":32,"categories":148},[],{"uuid":150,"title":46,"description":151,"canonical_path":4,"image":152,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":153,"component_categories":156,"app":161},"fd07285c-3b1d-47cd-b3d8-59747a1927eb","Design editor canvas where a modal prompts the user to log in or sign up to save their guest project to a profile.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Foctopus_sign-up_modals-and-popovers_60e758c8_nicelydone.png",[154],{"id":74,"label":134,"slug":135,"rank":57,"group":155},{"id":59,"label":60,"slug":61},[157,158,159,160],{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"id":92,"title":93,"slug":94},{"id":96,"title":97,"slug":98},{"slug":30,"title":29,"logo":32,"categories":162},[],{"uuid":164,"title":46,"description":165,"canonical_path":4,"image":166,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":167,"component_categories":172,"app":178},"948d2ba3-b9ef-4156-9bf0-d19418d22969","Onboarding modal where the user provides profile details like name, country, company, and role to complete their account registration.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Foctopus_sign-up_modals-and-popovers_c969a86e_nicelydone.png",[168],{"id":59,"label":169,"slug":170,"rank":57,"group":171},"Account Setup","account-setup",{"id":59,"label":60,"slug":61},[173,174,175,176,177],{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"id":92,"title":93,"slug":94},{"id":96,"title":97,"slug":98},{"id":100,"title":101,"slug":102},{"slug":30,"title":29,"logo":32,"categories":179},[],{"uuid":181,"title":46,"description":182,"canonical_path":4,"image":183,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":184,"component_categories":196,"app":201},"e37baebf-0ab7-406c-bffe-613433b01c8d","Project management modal where the user can switch between existing projects, create new ones, or access account settings.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Foctopus_list_modals-and-popovers_186edf30_nicelydone.png",[185,191],{"id":40,"label":186,"slug":187,"rank":57,"group":188},"Add & Create","add-and-create",{"id":74,"label":189,"slug":190},"Actions","actions",{"id":192,"label":193,"slug":194,"rank":59,"group":195},24,"Share","share",{"id":74,"label":189,"slug":190},[197,198,199,200],{"id":80,"title":81,"slug":82},{"id":92,"title":93,"slug":94},{"id":96,"title":97,"slug":98},{"id":100,"title":101,"slug":102},{"slug":30,"title":29,"logo":32,"categories":202},[],{"uuid":204,"title":46,"description":205,"canonical_path":4,"image":206,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":207,"component_categories":221,"app":230},"535bb240-809a-4920-8590-ea0055c80afe","Settings modal where the user is prompted to upgrade to a Team account to unlock team projects and member management.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Foctopus_team_upgrade-your-account_modals-and-popovers_a537d379_nicelydone.png",[208,216],{"id":209,"label":210,"slug":211,"rank":57,"group":212},104,"Team Management","team-management",{"id":213,"label":214,"slug":215},10,"Settings & Admin","settings-and-admin",{"id":217,"label":218,"slug":219,"rank":59,"group":220},92,"Upgrade Prompt","upgrade-prompt",{"id":67,"label":68,"slug":69},[222,226,227,228,229],{"id":223,"title":224,"slug":225},226,"Skeleton","skeleton",{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"id":96,"title":97,"slug":98},{"id":100,"title":101,"slug":102},{"slug":30,"title":29,"logo":32,"categories":231},[],{"uuid":233,"title":46,"description":234,"canonical_path":4,"image":235,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":236,"component_categories":254,"app":258},"d9cc285c-2f89-4b8c-b55b-287dd353b64c","Settings modal where the user updates their profile details like name, email, password, and avatar icon.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Foctopus_settings_modals-and-popovers_f2d4f6fd_nicelydone.png",[237,242,250],{"id":238,"label":239,"slug":240,"rank":57,"group":241},94,"Account Settings","account-settings",{"id":213,"label":214,"slug":215},{"id":243,"label":244,"slug":245,"rank":59,"group":246},3,"Profile","profile",{"id":247,"label":248,"slug":249},11,"Social & Collaboration","social-and-collaboration",{"id":247,"label":251,"slug":252,"rank":74,"group":253},"Edit","edit",{"id":74,"label":189,"slug":190},[255,256,257],{"id":92,"title":93,"slug":94},{"id":96,"title":97,"slug":98},{"id":100,"title":101,"slug":102},{"slug":30,"title":29,"logo":32,"categories":259},[],{"uuid":261,"title":46,"description":262,"canonical_path":4,"image":263,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":264,"component_categories":277,"app":282},"2a90879c-d84c-4e64-9269-3b17253679ae","Settings modal where the user views their current free plan usage and is prompted to upgrade.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Foctopus_plans-pricing-product_modals-and-popovers_3c5cb52f_nicelydone.png",[265,267,272],{"id":217,"label":218,"slug":219,"rank":57,"group":266},{"id":67,"label":68,"slug":69},{"id":268,"label":269,"slug":270,"rank":59,"group":271},102,"Settings","settings",{"id":213,"label":214,"slug":215},{"id":273,"label":274,"slug":275,"rank":74,"group":276},93,"Usage Limit","usage-limit",{"id":67,"label":68,"slug":69},[278,279,280,281],{"id":84,"title":85,"slug":86},{"id":92,"title":93,"slug":94},{"id":96,"title":97,"slug":98},{"id":100,"title":101,"slug":102},{"slug":30,"title":29,"logo":32,"categories":283},[],{"uuid":285,"title":46,"description":286,"canonical_path":4,"image":287,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":288,"component_categories":296,"app":304},"fbe9e313-622a-4f32-87ee-515446fdd320","In-app pricing modal where the user compares Free, Pro, Team, and Agency plans with a monthly\u002Fannual toggle and a feature breakdown table.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Foctopus_plans-pricing-product_modals-and-popovers_23a43b15_nicelydone.png",[289,294],{"id":290,"label":291,"slug":292,"rank":57,"group":293},89,"Pricing","pricing",{"id":67,"label":68,"slug":69},{"id":63,"label":64,"slug":65,"rank":59,"group":295},{"id":67,"label":68,"slug":69},[297,301,302,303],{"id":298,"title":299,"slug":300},169,"Avatar","avatar",{"id":92,"title":93,"slug":94},{"id":96,"title":97,"slug":98},{"id":100,"title":101,"slug":102},{"slug":30,"title":29,"logo":32,"categories":305},[],{"uuid":307,"title":46,"description":308,"canonical_path":4,"image":309,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":310,"component_categories":326,"app":331},"3238d76a-553a-4bea-9462-a8df7de156ab","Design editor where the user is presented with a checkout modal to subscribe to an annual Pro plan via card or PayPal.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Foctopus_checkout_modals-and-popovers_e0f5673e_nicelydone.png",[311,319,324],{"id":312,"label":313,"slug":314,"rank":57,"group":315},130,"Checkout","checkout",{"id":316,"label":317,"slug":318},14,"Payments & Checkout","payments-and-checkout",{"id":320,"label":321,"slug":322,"rank":59,"group":323},131,"Payment Form","payment-form",{"id":316,"label":317,"slug":318},{"id":290,"label":291,"slug":292,"rank":74,"group":325},{"id":67,"label":68,"slug":69},[327,328,329,330],{"id":298,"title":299,"slug":300},{"id":88,"title":89,"slug":90},{"id":96,"title":97,"slug":98},{"id":100,"title":101,"slug":102},{"slug":30,"title":29,"logo":32,"categories":332},[],{"uuid":334,"title":46,"description":335,"canonical_path":4,"image":336,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":337,"component_categories":354,"app":359},"eb1f9364-a9e1-4670-8007-19d241cb66ef","Design editor where the user builds a visual sitemap by organizing pages and content blocks into a hierarchical tree structure.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Foctopus_detail-page-single-page_ecfeb354_nicelydone.png",[338,340,344,346,348],{"id":71,"label":72,"slug":73,"rank":57,"group":339},{"id":54,"label":76,"slug":77},{"id":213,"label":341,"slug":342,"rank":59,"group":343},"Drag & Drop","drag-and-drop",{"id":74,"label":189,"slug":190},{"id":247,"label":251,"slug":252,"rank":74,"group":345},{"id":74,"label":189,"slug":190},{"id":192,"label":193,"slug":194,"rank":243,"group":347},{"id":74,"label":189,"slug":190},{"id":349,"label":350,"slug":351,"rank":352,"group":353},25,"Upload & Download","upload-and-download",4,{"id":74,"label":189,"slug":190},[355,356,357,358],{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"id":92,"title":93,"slug":94},{"id":100,"title":101,"slug":102},{"slug":30,"title":29,"logo":32,"categories":360},[],[],[363,365,367,369,371,373,375,377,379,381,383,385,387,390,393,396,399,402,404,408,412,416],{"label":72,"to":364},"\u002Fexamples\u002Fscreens\u002Fdesign-editor",{"label":251,"to":366},"\u002Fexamples\u002Fscreens\u002Fedit",{"label":64,"to":368},"\u002Fexamples\u002Fscreens\u002Ffeature-gate",{"label":134,"to":370},"\u002Fexamples\u002Fscreens\u002Fforgot-password",{"label":291,"to":372},"\u002Fexamples\u002Fscreens\u002Fpricing",{"label":193,"to":374},"\u002Fexamples\u002Fscreens\u002Fshare",{"label":55,"to":376},"\u002Fexamples\u002Fscreens\u002Fsign-up",{"label":218,"to":378},"\u002Fexamples\u002Fscreens\u002Fupgrade-prompt",{"label":239,"to":380},"\u002Fexamples\u002Fscreens\u002Faccount-settings",{"label":169,"to":382},"\u002Fexamples\u002Fscreens\u002Faccount-setup",{"label":186,"to":384},"\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":313,"to":386},"\u002Fexamples\u002Fscreens\u002Fcheckout",{"label":388,"to":389},"Octopus marketing pages","\u002Fexamples\u002Fapps\u002Foctopus\u002Fmarketing",{"label":391,"to":392},"Octopus user flows","\u002Fexamples\u002Fapps\u002Foctopus\u002Fflows",{"label":394,"to":395},"Octopus UI components","\u002Fexamples\u002Fapps\u002Foctopus\u002Fcomponents",{"label":397,"to":398},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":400,"to":401},"Web Development app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fweb-development",{"label":403,"to":18},"All SaaS app examples",{"label":405,"to":406,"description":407},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":409,"to":410,"description":411},"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":413,"to":414,"description":415},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":417,"to":418,"description":419},"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":421,"updated_at":422},"2021-02-01T19:04:31.000Z","2026-09-13T13:02:39.000Z"]