[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fmode":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":34,"examples":53,"showcases":54,"links":352,"dates":390},"\u002Fexamples\u002Fapps\u002Fmode","detail","apps",true,{"title":9,"description":10,"og_image":11},"Mode design examples - Nicelydone","Explore Mode UI design examples. Analysis tools that speak your language","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fmode_sign-in_d3aad471_nicelydone.jpg",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":4},"Mode design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":33},"SaaS app examples",[24],{"title":25,"links":26},"Explore Mode",[27,30],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Fmode\u002Fscreens",{"label":31,"to":32},"marketing pages","\u002Fexamples\u002Fapps\u002Fmode\u002Fmarketing",[],{"title":35,"slug":36,"description":37,"logo":38,"url":39,"categories":40},"Mode","mode","Analysis tools that speak your language","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmode-3320af52.png","https:\u002F\u002Fmodeanalytics.com",[41,45,49],{"id":42,"title":43,"slug":44},46,"Analytics","analytics",{"id":46,"title":47,"slug":48},48,"Developer Tools","developer-tools",{"id":50,"title":51,"slug":52},57,"Big data","big-data",[],[55,349],{"family":56,"examples":57},"screens",[58,87,104,114,144,154,194,220,240,278,292,311],{"uuid":59,"title":60,"description":61,"canonical_path":29,"image":11,"width":62,"height":63,"image_alt":64,"kind":65,"patterns":66,"component_categories":76,"app":85},"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",[67],{"id":68,"label":69,"slug":70,"rank":71,"group":72},4,"Sign In","sign-in",0,{"id":73,"label":74,"slug":75},1,"Access & Account","access-and-account",[77,81],{"id":78,"title":79,"slug":80},174,"Card","card",{"id":82,"title":83,"slug":84},175,"Button","button",{"slug":36,"title":35,"logo":38,"categories":86},[],{"uuid":88,"title":89,"description":90,"canonical_path":29,"image":91,"width":62,"height":63,"image_alt":92,"kind":65,"patterns":93,"component_categories":99,"app":102},"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",[94],{"id":95,"label":96,"slug":97,"rank":71,"group":98},2,"Forgot Password","forgot-password",{"id":73,"label":74,"slug":75},[100,101],{"id":78,"title":79,"slug":80},{"id":82,"title":83,"slug":84},{"slug":36,"title":35,"logo":38,"categories":103},[],{"uuid":105,"title":106,"description":107,"canonical_path":29,"image":108,"width":62,"height":63,"image_alt":109,"kind":65,"patterns":110,"component_categories":111,"app":112},"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":36,"title":35,"logo":38,"categories":113},[],{"uuid":115,"title":116,"description":117,"canonical_path":29,"image":118,"width":62,"height":63,"image_alt":119,"kind":65,"patterns":120,"component_categories":136,"app":142},"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",[121,129],{"id":122,"label":123,"slug":124,"rank":71,"group":125},115,"Empty State","empty-state",{"id":126,"label":127,"slug":128},12,"States & Feedback","states-and-feedback",{"id":130,"label":116,"slug":131,"rank":73,"group":132},81,"home",{"id":133,"label":134,"slug":135},8,"Pages & Content","pages-and-content",[137,141],{"id":138,"title":139,"slug":140},233,"Tabs","tabs",{"id":82,"title":83,"slug":84},{"slug":36,"title":35,"logo":38,"categories":143},[],{"uuid":145,"title":146,"description":147,"canonical_path":29,"image":148,"width":62,"height":63,"image_alt":149,"kind":65,"patterns":150,"component_categories":151,"app":152},"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":36,"title":35,"logo":38,"categories":153},[],{"uuid":155,"title":156,"description":157,"canonical_path":29,"image":158,"width":62,"height":159,"image_alt":160,"kind":65,"patterns":161,"component_categories":184,"app":192},"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",[162,170,178],{"id":163,"label":164,"slug":165,"rank":71,"group":166},94,"Account Settings","account-settings",{"id":167,"label":168,"slug":169},10,"Settings & Admin","settings-and-admin",{"id":171,"label":172,"slug":173,"rank":73,"group":174},3,"Profile","profile",{"id":175,"label":176,"slug":177},11,"Social & Collaboration","social-and-collaboration",{"id":175,"label":179,"slug":180,"rank":95,"group":181},"Edit","edit",{"id":95,"label":182,"slug":183},"Actions","actions",[185,186,187,191],{"id":78,"title":79,"slug":80},{"id":138,"title":139,"slug":140},{"id":188,"title":189,"slug":190},169,"Avatar","avatar",{"id":82,"title":83,"slug":84},{"slug":36,"title":35,"logo":38,"categories":193},[],{"uuid":195,"title":156,"description":196,"canonical_path":29,"image":197,"width":62,"height":63,"image_alt":160,"kind":65,"patterns":198,"component_categories":210,"app":218},"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",[199,201,203,208],{"id":163,"label":164,"slug":165,"rank":71,"group":200},{"id":167,"label":168,"slug":169},{"id":171,"label":172,"slug":173,"rank":73,"group":202},{"id":175,"label":176,"slug":177},{"id":204,"label":205,"slug":206,"rank":95,"group":207},25,"Upload & Download","upload-and-download",{"id":95,"label":182,"slug":183},{"id":175,"label":179,"slug":180,"rank":171,"group":209},{"id":95,"label":182,"slug":183},[211,215,216,217],{"id":212,"title":213,"slug":214},240,"Horizontal navigation","horizontal-navigation",{"id":138,"title":139,"slug":140},{"id":188,"title":189,"slug":190},{"id":82,"title":83,"slug":84},{"slug":36,"title":35,"logo":38,"categories":219},[],{"uuid":221,"title":222,"description":223,"canonical_path":29,"image":224,"width":62,"height":63,"image_alt":225,"kind":65,"patterns":226,"component_categories":236,"app":238},"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",[227,231],{"id":73,"label":228,"slug":229,"rank":71,"group":230},"Account Setup","account-setup",{"id":73,"label":74,"slug":75},{"id":232,"label":233,"slug":234,"rank":73,"group":235},116,"Error","error",{"id":126,"label":127,"slug":128},[237],{"id":188,"title":189,"slug":190},{"slug":36,"title":35,"logo":38,"categories":239},[],{"uuid":241,"title":222,"description":242,"canonical_path":29,"image":243,"width":62,"height":244,"image_alt":225,"kind":65,"patterns":245,"component_categories":262,"app":276},"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,[246,251,256],{"id":247,"label":248,"slug":249,"rank":71,"group":250},104,"Team Management","team-management",{"id":167,"label":168,"slug":169},{"id":252,"label":253,"slug":254,"rank":73,"group":255},100,"Roles & Permissions","roles-and-permissions",{"id":167,"label":168,"slug":169},{"id":257,"label":139,"slug":140,"rank":95,"group":258},69,{"id":259,"label":260,"slug":261},6,"Navigation & Commands","navigation-and-commands",[263,267,271,272,273,274,275],{"id":264,"title":265,"slug":266},177,"Breadcrumb","breadcrumb",{"id":268,"title":269,"slug":270},260,"Badge","badge",{"id":212,"title":213,"slug":214},{"id":78,"title":79,"slug":80},{"id":138,"title":139,"slug":140},{"id":188,"title":189,"slug":190},{"id":82,"title":83,"slug":84},{"slug":36,"title":35,"logo":38,"categories":277},[],{"uuid":279,"title":222,"description":280,"canonical_path":29,"image":281,"width":62,"height":63,"image_alt":225,"kind":65,"patterns":282,"component_categories":285,"app":290},"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",[283],{"id":247,"label":248,"slug":249,"rank":71,"group":284},{"id":167,"label":168,"slug":169},[286,287,288,289],{"id":212,"title":213,"slug":214},{"id":78,"title":79,"slug":80},{"id":188,"title":189,"slug":190},{"id":82,"title":83,"slug":84},{"slug":36,"title":35,"logo":38,"categories":291},[],{"uuid":293,"title":294,"description":295,"canonical_path":29,"image":296,"width":62,"height":297,"image_alt":298,"kind":65,"patterns":299,"component_categories":304,"app":309},"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",[300],{"id":301,"label":294,"slug":302,"rank":71,"group":303},97,"integrations",{"id":167,"label":168,"slug":169},[305,306,307,308],{"id":212,"title":213,"slug":214},{"id":138,"title":139,"slug":140},{"id":188,"title":189,"slug":190},{"id":82,"title":83,"slug":84},{"slug":36,"title":35,"logo":38,"categories":310},[],{"uuid":312,"title":313,"description":314,"canonical_path":29,"image":315,"width":62,"height":63,"image_alt":316,"kind":65,"patterns":317,"component_categories":338,"app":347},"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",[318,326,331,336],{"id":319,"label":320,"slug":321,"rank":71,"group":322},53,"Code Editor","code-editor",{"id":323,"label":324,"slug":325},5,"Media & Tools","media-and-tools",{"id":327,"label":328,"slug":329,"rank":73,"group":330},19,"Report","report",{"id":95,"label":182,"slug":183},{"id":332,"label":333,"slug":334,"rank":95,"group":335},22,"Search","search",{"id":95,"label":182,"slug":183},{"id":257,"label":139,"slug":140,"rank":171,"group":337},{"id":259,"label":260,"slug":261},[339,343,344,345,346],{"id":340,"title":341,"slug":342},168,"Accordion","accordion",{"id":212,"title":213,"slug":214},{"id":138,"title":139,"slug":140},{"id":188,"title":189,"slug":190},{"id":82,"title":83,"slug":84},{"slug":36,"title":35,"logo":38,"categories":348},[],{"family":350,"examples":351},"pages",[],[353,355,357,360,363,366,369,372,374,378,382,386],{"label":354,"to":29},"Mode product screens",{"label":356,"to":32},"Mode marketing pages",{"label":358,"to":359},"Mode user flows","\u002Fexamples\u002Fapps\u002Fmode\u002Fflows",{"label":361,"to":362},"Mode UI components","\u002Fexamples\u002Fapps\u002Fmode\u002Fcomponents",{"label":364,"to":365},"Analytics app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fanalytics",{"label":367,"to":368},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":370,"to":371},"Big data app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fbig-data",{"label":373,"to":18},"All SaaS app examples",{"label":375,"to":376,"description":377},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":379,"to":380,"description":381},"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":383,"to":384,"description":385},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":387,"to":388,"description":389},"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":391,"updated_at":392},"2016-10-12T08:00:00.000Z","2026-09-13T13:02:39.000Z"]