[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Foctopus":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":34,"examples":49,"showcases":50,"links":374,"dates":409},"\u002Fexamples\u002Fapps\u002Foctopus","detail","apps",true,{"title":9,"description":10,"og_image":11},"Octopus design examples - Nicelydone","Explore Octopus UI design examples. A lightning-fast visual sitemap builder","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Foctopus_sign-up_modals-and-popovers_18fae82d_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},"Octopus design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":33},"SaaS app examples",[24],{"title":25,"links":26},"Explore Octopus",[27,30],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Foctopus\u002Fscreens",{"label":31,"to":32},"marketing pages","\u002Fexamples\u002Fapps\u002Foctopus\u002Fmarketing",[],{"title":35,"slug":36,"description":37,"logo":38,"url":39,"categories":40},"Octopus","octopus","A lightning-fast visual sitemap builder","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Foctopus-c04eea5e.png","https:\u002F\u002Foctopus.do",[41,45],{"id":42,"title":43,"slug":44},8,"Design","design",{"id":46,"title":47,"slug":48},7,"Web Development","web-development",[],[51,371],{"family":52,"examples":53},"screens",[54,115,138,159,173,190,213,242,270,294,316,343],{"uuid":55,"title":56,"description":57,"canonical_path":29,"image":11,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":62,"component_categories":88,"app":113},"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",[63,72,80],{"id":64,"label":65,"slug":66,"rank":67,"group":68},5,"Sign Up","sign-up",0,{"id":69,"label":70,"slug":71},1,"Access & Account","access-and-account",{"id":73,"label":74,"slug":75,"rank":69,"group":76},88,"Feature Gate","feature-gate",{"id":77,"label":78,"slug":79},9,"Plans & Limits","plans-and-limits",{"id":81,"label":82,"slug":83,"rank":84,"group":85},55,"Design Editor","design-editor",2,{"id":64,"label":86,"slug":87},"Media & Tools","media-and-tools",[89,93,97,101,105,109],{"id":90,"title":91,"slug":92},260,"Badge","badge",{"id":94,"title":95,"slug":96},277,"Button group","button-group",{"id":98,"title":99,"slug":100},174,"Card","card",{"id":102,"title":103,"slug":104},240,"Horizontal navigation","horizontal-navigation",{"id":106,"title":107,"slug":108},284,"Modal","modal",{"id":110,"title":111,"slug":112},175,"Button","button",{"slug":36,"title":35,"logo":38,"categories":114},[],{"uuid":116,"title":56,"description":117,"canonical_path":29,"image":118,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":119,"component_categories":130,"app":136},"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",[120,122],{"id":64,"label":65,"slug":66,"rank":67,"group":121},{"id":69,"label":70,"slug":71},{"id":123,"label":124,"slug":125,"rank":69,"group":126},114,"Confirmation","confirmation",{"id":127,"label":128,"slug":129},12,"States & Feedback","states-and-feedback",[131,132,133,134,135],{"id":94,"title":95,"slug":96},{"id":98,"title":99,"slug":100},{"id":102,"title":103,"slug":104},{"id":106,"title":107,"slug":108},{"id":110,"title":111,"slug":112},{"slug":36,"title":35,"logo":38,"categories":137},[],{"uuid":139,"title":56,"description":140,"canonical_path":29,"image":141,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":142,"component_categories":152,"app":157},"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",[143,147],{"id":84,"label":144,"slug":145,"rank":67,"group":146},"Forgot Password","forgot-password",{"id":69,"label":70,"slug":71},{"id":148,"label":149,"slug":150,"rank":69,"group":151},58,"Media Editor","media-editor",{"id":64,"label":86,"slug":87},[153,154,155,156],{"id":90,"title":91,"slug":92},{"id":98,"title":99,"slug":100},{"id":106,"title":107,"slug":108},{"id":110,"title":111,"slug":112},{"slug":36,"title":35,"logo":38,"categories":158},[],{"uuid":160,"title":56,"description":161,"canonical_path":29,"image":162,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":163,"component_categories":166,"app":171},"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",[164],{"id":84,"label":144,"slug":145,"rank":67,"group":165},{"id":69,"label":70,"slug":71},[167,168,169,170],{"id":94,"title":95,"slug":96},{"id":98,"title":99,"slug":100},{"id":102,"title":103,"slug":104},{"id":106,"title":107,"slug":108},{"slug":36,"title":35,"logo":38,"categories":172},[],{"uuid":174,"title":56,"description":175,"canonical_path":29,"image":176,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":177,"component_categories":182,"app":188},"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",[178],{"id":69,"label":179,"slug":180,"rank":67,"group":181},"Account Setup","account-setup",{"id":69,"label":70,"slug":71},[183,184,185,186,187],{"id":94,"title":95,"slug":96},{"id":98,"title":99,"slug":100},{"id":102,"title":103,"slug":104},{"id":106,"title":107,"slug":108},{"id":110,"title":111,"slug":112},{"slug":36,"title":35,"logo":38,"categories":189},[],{"uuid":191,"title":56,"description":192,"canonical_path":29,"image":193,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":194,"component_categories":206,"app":211},"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",[195,201],{"id":46,"label":196,"slug":197,"rank":67,"group":198},"Add & Create","add-and-create",{"id":84,"label":199,"slug":200},"Actions","actions",{"id":202,"label":203,"slug":204,"rank":69,"group":205},24,"Share","share",{"id":84,"label":199,"slug":200},[207,208,209,210],{"id":90,"title":91,"slug":92},{"id":102,"title":103,"slug":104},{"id":106,"title":107,"slug":108},{"id":110,"title":111,"slug":112},{"slug":36,"title":35,"logo":38,"categories":212},[],{"uuid":214,"title":56,"description":215,"canonical_path":29,"image":216,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":217,"component_categories":231,"app":240},"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",[218,226],{"id":219,"label":220,"slug":221,"rank":67,"group":222},104,"Team Management","team-management",{"id":223,"label":224,"slug":225},10,"Settings & Admin","settings-and-admin",{"id":227,"label":228,"slug":229,"rank":69,"group":230},92,"Upgrade Prompt","upgrade-prompt",{"id":77,"label":78,"slug":79},[232,236,237,238,239],{"id":233,"title":234,"slug":235},226,"Skeleton","skeleton",{"id":94,"title":95,"slug":96},{"id":98,"title":99,"slug":100},{"id":106,"title":107,"slug":108},{"id":110,"title":111,"slug":112},{"slug":36,"title":35,"logo":38,"categories":241},[],{"uuid":243,"title":56,"description":244,"canonical_path":29,"image":245,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":246,"component_categories":264,"app":268},"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",[247,252,260],{"id":248,"label":249,"slug":250,"rank":67,"group":251},94,"Account Settings","account-settings",{"id":223,"label":224,"slug":225},{"id":253,"label":254,"slug":255,"rank":69,"group":256},3,"Profile","profile",{"id":257,"label":258,"slug":259},11,"Social & Collaboration","social-and-collaboration",{"id":257,"label":261,"slug":262,"rank":84,"group":263},"Edit","edit",{"id":84,"label":199,"slug":200},[265,266,267],{"id":102,"title":103,"slug":104},{"id":106,"title":107,"slug":108},{"id":110,"title":111,"slug":112},{"slug":36,"title":35,"logo":38,"categories":269},[],{"uuid":271,"title":56,"description":272,"canonical_path":29,"image":273,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":274,"component_categories":287,"app":292},"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",[275,277,282],{"id":227,"label":228,"slug":229,"rank":67,"group":276},{"id":77,"label":78,"slug":79},{"id":278,"label":279,"slug":280,"rank":69,"group":281},102,"Settings","settings",{"id":223,"label":224,"slug":225},{"id":283,"label":284,"slug":285,"rank":84,"group":286},93,"Usage Limit","usage-limit",{"id":77,"label":78,"slug":79},[288,289,290,291],{"id":94,"title":95,"slug":96},{"id":102,"title":103,"slug":104},{"id":106,"title":107,"slug":108},{"id":110,"title":111,"slug":112},{"slug":36,"title":35,"logo":38,"categories":293},[],{"uuid":295,"title":56,"description":296,"canonical_path":29,"image":297,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":298,"component_categories":306,"app":314},"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",[299,304],{"id":300,"label":301,"slug":302,"rank":67,"group":303},89,"Pricing","pricing",{"id":77,"label":78,"slug":79},{"id":73,"label":74,"slug":75,"rank":69,"group":305},{"id":77,"label":78,"slug":79},[307,311,312,313],{"id":308,"title":309,"slug":310},169,"Avatar","avatar",{"id":102,"title":103,"slug":104},{"id":106,"title":107,"slug":108},{"id":110,"title":111,"slug":112},{"slug":36,"title":35,"logo":38,"categories":315},[],{"uuid":317,"title":56,"description":318,"canonical_path":29,"image":319,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":320,"component_categories":336,"app":341},"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",[321,329,334],{"id":322,"label":323,"slug":324,"rank":67,"group":325},130,"Checkout","checkout",{"id":326,"label":327,"slug":328},14,"Payments & Checkout","payments-and-checkout",{"id":330,"label":331,"slug":332,"rank":69,"group":333},131,"Payment Form","payment-form",{"id":326,"label":327,"slug":328},{"id":300,"label":301,"slug":302,"rank":84,"group":335},{"id":77,"label":78,"slug":79},[337,338,339,340],{"id":308,"title":309,"slug":310},{"id":98,"title":99,"slug":100},{"id":106,"title":107,"slug":108},{"id":110,"title":111,"slug":112},{"slug":36,"title":35,"logo":38,"categories":342},[],{"uuid":344,"title":56,"description":345,"canonical_path":29,"image":346,"width":58,"height":59,"image_alt":60,"kind":61,"patterns":347,"component_categories":364,"app":369},"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",[348,350,354,356,358],{"id":81,"label":82,"slug":83,"rank":67,"group":349},{"id":64,"label":86,"slug":87},{"id":223,"label":351,"slug":352,"rank":69,"group":353},"Drag & Drop","drag-and-drop",{"id":84,"label":199,"slug":200},{"id":257,"label":261,"slug":262,"rank":84,"group":355},{"id":84,"label":199,"slug":200},{"id":202,"label":203,"slug":204,"rank":253,"group":357},{"id":84,"label":199,"slug":200},{"id":359,"label":360,"slug":361,"rank":362,"group":363},25,"Upload & Download","upload-and-download",4,{"id":84,"label":199,"slug":200},[365,366,367,368],{"id":94,"title":95,"slug":96},{"id":98,"title":99,"slug":100},{"id":102,"title":103,"slug":104},{"id":110,"title":111,"slug":112},{"slug":36,"title":35,"logo":38,"categories":370},[],{"family":372,"examples":373},"pages",[],[375,377,379,382,385,388,391,393,397,401,405],{"label":376,"to":29},"Octopus product screens",{"label":378,"to":32},"Octopus marketing pages",{"label":380,"to":381},"Octopus user flows","\u002Fexamples\u002Fapps\u002Foctopus\u002Fflows",{"label":383,"to":384},"Octopus UI components","\u002Fexamples\u002Fapps\u002Foctopus\u002Fcomponents",{"label":386,"to":387},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":389,"to":390},"Web Development app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fweb-development",{"label":392,"to":18},"All SaaS app examples",{"label":394,"to":395,"description":396},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":398,"to":399,"description":400},"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":402,"to":403,"description":404},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":406,"to":407,"description":408},"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":410,"updated_at":411},"2021-02-01T19:04:25.000Z","2026-09-13T13:02:39.000Z"]