[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fmode\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":339,"links":340,"dates":401},"\u002Fexamples\u002Fapps\u002Fmode\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Mode product screens examples - Nicelydone","Browse Mode screen design examples. Preview the interface screenshots and explore related UI patterns. Analysis tools that speak your language","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmode_sign-in_d3aad471_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},"Mode design examples","\u002Fexamples\u002Fapps\u002Fmode",{"label":23,"to":4},"Mode 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},"Mode","mode","Analysis tools that speak your language","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmode-3320af52.png","https:\u002F\u002Fmodeanalytics.com",[35,39,43],{"id":36,"title":37,"slug":38},46,"Analytics","analytics",{"id":40,"title":41,"slug":42},48,"Developer Tools","developer-tools",{"id":44,"title":45,"slug":46},57,"Big data","big-data",[48,77,94,124,164,190,210,248,267,305,315,325],{"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":75},"dcc0714f-70a5-4e28-927d-9134d3cb3509","Sign in","Sign-in screen where the user authenticates with their email and password or via Google and Office 365 single sign-on.",2880,1526,"Sign in from Mode","screen",[57],{"id":58,"label":59,"slug":60,"rank":61,"group":62},4,"Sign In","sign-in",0,{"id":63,"label":64,"slug":65},1,"Access & Account","access-and-account",[67,71],{"id":68,"title":69,"slug":70},174,"Card","card",{"id":72,"title":73,"slug":74},175,"Button","button",{"slug":30,"title":29,"logo":32,"categories":76},[],{"uuid":78,"title":79,"description":80,"canonical_path":4,"image":81,"width":52,"height":53,"image_alt":82,"kind":55,"patterns":83,"component_categories":89,"app":92},"31771226-e315-45cc-91d5-68f8b2eed42e","Password reset","Password recovery screen where the user enters their email address to receive reset instructions for their Mode account.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmode_password-reset_7fb3550e_nicelydone.jpg","Password reset from Mode",[84],{"id":85,"label":86,"slug":87,"rank":61,"group":88},2,"Forgot Password","forgot-password",{"id":63,"label":64,"slug":65},[90,91],{"id":68,"title":69,"slug":70},{"id":72,"title":73,"slug":74},{"slug":30,"title":29,"logo":32,"categories":93},[],{"uuid":95,"title":96,"description":97,"canonical_path":4,"image":98,"width":52,"height":53,"image_alt":99,"kind":55,"patterns":100,"component_categories":116,"app":122},"2cbcaf46-ea49-48ec-aa4e-9ed2b694b22d","Home","Home screen where the user's 'My Work' tab is empty, prompting them to create their first report.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmode_home_bbeb5574_nicelydone.jpg","Home from Mode",[101,109],{"id":102,"label":103,"slug":104,"rank":61,"group":105},115,"Empty State","empty-state",{"id":106,"label":107,"slug":108},12,"States & Feedback","states-and-feedback",{"id":110,"label":96,"slug":111,"rank":63,"group":112},81,"home",{"id":113,"label":114,"slug":115},8,"Pages & Content","pages-and-content",[117,121],{"id":118,"title":119,"slug":120},233,"Tabs","tabs",{"id":72,"title":73,"slug":74},{"slug":30,"title":29,"logo":32,"categories":123},[],{"uuid":125,"title":126,"description":127,"canonical_path":4,"image":128,"width":52,"height":129,"image_alt":130,"kind":55,"patterns":131,"component_categories":154,"app":162},"422c1c31-8e94-417f-90ca-917267c644c0","Settings","Settings page where the user configures their personal profile details, social links, and editor preferences.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmode_settings_ac923699_nicelydone.jpg",2224,"Settings from Mode",[132,140,148],{"id":133,"label":134,"slug":135,"rank":61,"group":136},94,"Account Settings","account-settings",{"id":137,"label":138,"slug":139},10,"Settings & Admin","settings-and-admin",{"id":141,"label":142,"slug":143,"rank":63,"group":144},3,"Profile","profile",{"id":145,"label":146,"slug":147},11,"Social & Collaboration","social-and-collaboration",{"id":145,"label":149,"slug":150,"rank":85,"group":151},"Edit","edit",{"id":85,"label":152,"slug":153},"Actions","actions",[155,156,157,161],{"id":68,"title":69,"slug":70},{"id":118,"title":119,"slug":120},{"id":158,"title":159,"slug":160},169,"Avatar","avatar",{"id":72,"title":73,"slug":74},{"slug":30,"title":29,"logo":32,"categories":163},[],{"uuid":165,"title":126,"description":166,"canonical_path":4,"image":167,"width":52,"height":53,"image_alt":130,"kind":55,"patterns":168,"component_categories":180,"app":188},"b20a8faa-cc95-4f58-829f-65b6aa6f8ee1","Settings page where the user configures their profile avatar by uploading an image, using initials, or connecting a Gravatar.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmode_settings-2_d2f4aba4_nicelydone.jpg",[169,171,173,178],{"id":133,"label":134,"slug":135,"rank":61,"group":170},{"id":137,"label":138,"slug":139},{"id":141,"label":142,"slug":143,"rank":63,"group":172},{"id":145,"label":146,"slug":147},{"id":174,"label":175,"slug":176,"rank":85,"group":177},25,"Upload & Download","upload-and-download",{"id":85,"label":152,"slug":153},{"id":145,"label":149,"slug":150,"rank":141,"group":179},{"id":85,"label":152,"slug":153},[181,185,186,187],{"id":182,"title":183,"slug":184},240,"Horizontal navigation","horizontal-navigation",{"id":118,"title":119,"slug":120},{"id":158,"title":159,"slug":160},{"id":72,"title":73,"slug":74},{"slug":30,"title":29,"logo":32,"categories":189},[],{"uuid":191,"title":192,"description":193,"canonical_path":4,"image":194,"width":52,"height":53,"image_alt":195,"kind":55,"patterns":196,"component_categories":206,"app":208},"ddf3f5d7-9120-4783-a60a-777b13312a59","Team","Create page where the user sets up a new organization by providing a name, alias, and an optional profile picture.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmode_team_25a3c18d_nicelydone.jpg","Team from Mode",[197,201],{"id":63,"label":198,"slug":199,"rank":61,"group":200},"Account Setup","account-setup",{"id":63,"label":64,"slug":65},{"id":202,"label":203,"slug":204,"rank":63,"group":205},116,"Error","error",{"id":106,"label":107,"slug":108},[207],{"id":158,"title":159,"slug":160},{"slug":30,"title":29,"logo":32,"categories":209},[],{"uuid":211,"title":192,"description":212,"canonical_path":4,"image":213,"width":52,"height":214,"image_alt":195,"kind":55,"patterns":215,"component_categories":232,"app":246},"f845b662-fb81-479a-96b8-4f679a50ac54","Settings page where the user manages full members for their organization and can invite new teammates.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmode_team-2_56ca17a9_nicelydone.jpg",1762,[216,221,226],{"id":217,"label":218,"slug":219,"rank":61,"group":220},104,"Team Management","team-management",{"id":137,"label":138,"slug":139},{"id":222,"label":223,"slug":224,"rank":63,"group":225},100,"Roles & Permissions","roles-and-permissions",{"id":137,"label":138,"slug":139},{"id":227,"label":119,"slug":120,"rank":85,"group":228},69,{"id":229,"label":230,"slug":231},6,"Navigation & Commands","navigation-and-commands",[233,237,241,242,243,244,245],{"id":234,"title":235,"slug":236},177,"Breadcrumb","breadcrumb",{"id":238,"title":239,"slug":240},260,"Badge","badge",{"id":182,"title":183,"slug":184},{"id":68,"title":69,"slug":70},{"id":118,"title":119,"slug":120},{"id":158,"title":159,"slug":160},{"id":72,"title":73,"slug":74},{"slug":30,"title":29,"logo":32,"categories":247},[],{"uuid":249,"title":250,"description":251,"canonical_path":4,"image":252,"width":52,"height":253,"image_alt":254,"kind":55,"patterns":255,"component_categories":260,"app":265},"21441c26-d303-453c-864a-600b77a4d562","Integrations","Settings page where the user selects a database provider from a list to configure a new integration.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmode_integrations_99280228_nicelydone.jpg",2566,"Integrations from Mode",[256],{"id":257,"label":250,"slug":258,"rank":61,"group":259},97,"integrations",{"id":137,"label":138,"slug":139},[261,262,263,264],{"id":182,"title":183,"slug":184},{"id":118,"title":119,"slug":120},{"id":158,"title":159,"slug":160},{"id":72,"title":73,"slug":74},{"slug":30,"title":29,"logo":32,"categories":266},[],{"uuid":268,"title":269,"description":270,"canonical_path":4,"image":271,"width":52,"height":53,"image_alt":272,"kind":55,"patterns":273,"component_categories":294,"app":303},"278d752e-168a-4912-9039-a34aca92f063","Single","Code editor where the user writes and executes SQL queries against a selected database schema to build a report.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmode_single_4e35c5f6_nicelydone.jpg","Single from Mode",[274,282,287,292],{"id":275,"label":276,"slug":277,"rank":61,"group":278},53,"Code Editor","code-editor",{"id":279,"label":280,"slug":281},5,"Media & Tools","media-and-tools",{"id":283,"label":284,"slug":285,"rank":63,"group":286},19,"Report","report",{"id":85,"label":152,"slug":153},{"id":288,"label":289,"slug":290,"rank":85,"group":291},22,"Search","search",{"id":85,"label":152,"slug":153},{"id":227,"label":119,"slug":120,"rank":141,"group":293},{"id":229,"label":230,"slug":231},[295,299,300,301,302],{"id":296,"title":297,"slug":298},168,"Accordion","accordion",{"id":182,"title":183,"slug":184},{"id":118,"title":119,"slug":120},{"id":158,"title":159,"slug":160},{"id":72,"title":73,"slug":74},{"slug":30,"title":29,"logo":32,"categories":304},[],{"uuid":306,"title":307,"description":308,"canonical_path":4,"image":309,"width":52,"height":53,"image_alt":310,"kind":55,"patterns":311,"component_categories":312,"app":313},"831024ec-7a4a-46b5-bc51-3af395a534bc","Sign up","Account creation Onboarding Form User management","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmode_sign-up_ddfdf62e_nicelydone.jpg","Sign up from Mode",[],[],{"slug":30,"title":29,"logo":32,"categories":314},[],{"uuid":316,"title":317,"description":318,"canonical_path":4,"image":319,"width":52,"height":53,"image_alt":320,"kind":55,"patterns":321,"component_categories":322,"app":323},"0ab7f6e8-2dae-467d-8566-9000bac783a6","Dropdown","Grid Onboarding Dashboard Account management Account settings Data analysis","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmode_dropdown_3af8805e_nicelydone.jpg","Dropdown from Mode",[],[],{"slug":30,"title":29,"logo":32,"categories":324},[],{"uuid":326,"title":192,"description":327,"canonical_path":4,"image":328,"width":52,"height":53,"image_alt":195,"kind":55,"patterns":329,"component_categories":332,"app":337},"a11c818c-6a18-411e-8c14-542be92248d5","Settings page where the user invites a new member to their workspace by providing an email address and a custom message, alongside a banner prompting them to connect a database to begin their trial.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmode_team-3_b7a8d3b6_nicelydone.jpg",[330],{"id":217,"label":218,"slug":219,"rank":61,"group":331},{"id":137,"label":138,"slug":139},[333,334,335,336],{"id":182,"title":183,"slug":184},{"id":68,"title":69,"slug":70},{"id":158,"title":159,"slug":160},{"id":72,"title":73,"slug":74},{"slug":30,"title":29,"logo":32,"categories":338},[],[],[341,343,345,347,349,351,353,355,357,359,361,363,365,368,371,374,377,380,383,385,389,393,397],{"label":134,"to":342},"\u002Fexamples\u002Fscreens\u002Faccount-settings",{"label":149,"to":344},"\u002Fexamples\u002Fscreens\u002Fedit",{"label":142,"to":346},"\u002Fexamples\u002Fscreens\u002Fprofile",{"label":119,"to":348},"\u002Fexamples\u002Fscreens\u002Ftabs",{"label":218,"to":350},"\u002Fexamples\u002Fscreens\u002Fteam-management",{"label":198,"to":352},"\u002Fexamples\u002Fscreens\u002Faccount-setup",{"label":276,"to":354},"\u002Fexamples\u002Fscreens\u002Fcode-editor",{"label":103,"to":356},"\u002Fexamples\u002Fscreens\u002Fempty-state",{"label":203,"to":358},"\u002Fexamples\u002Fscreens\u002Ferror",{"label":86,"to":360},"\u002Fexamples\u002Fscreens\u002Fforgot-password",{"label":96,"to":362},"\u002Fexamples\u002Fscreens\u002Fhome",{"label":250,"to":364},"\u002Fexamples\u002Fscreens\u002Fintegrations",{"label":366,"to":367},"Mode marketing pages","\u002Fexamples\u002Fapps\u002Fmode\u002Fmarketing",{"label":369,"to":370},"Mode user flows","\u002Fexamples\u002Fapps\u002Fmode\u002Fflows",{"label":372,"to":373},"Mode UI components","\u002Fexamples\u002Fapps\u002Fmode\u002Fcomponents",{"label":375,"to":376},"Analytics app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fanalytics",{"label":378,"to":379},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":381,"to":382},"Big data app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fbig-data",{"label":384,"to":18},"All SaaS app examples",{"label":386,"to":387,"description":388},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":390,"to":391,"description":392},"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":394,"to":395,"description":396},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":398,"to":399,"description":400},"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":402,"updated_at":403},"2016-10-12T08:00:00.000Z","2026-09-13T13:02:39.000Z"]