[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Frunnable\u002Fscreens":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":39,"showcases":285,"links":286,"dates":341},"\u002Fexamples\u002Fapps\u002Frunnable\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Runnable product screens examples - Nicelydone","Browse Runnable screen design examples. Preview the interface screenshots and explore related UI patterns. Running apps for every code branch","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Frunnable_sign-in_630ef9bb_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},"Runnable design examples","\u002Fexamples\u002Fapps\u002Frunnable",{"label":23,"to":4},"Runnable 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},"Runnable","runnable","Running apps for every code branch","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Frunnable-ccc7ac3f.png","https:\u002F\u002Frunnable.com",[35],{"id":36,"title":37,"slug":38},48,"Developer Tools","developer-tools",[40,69,90,107,136,162,170,194,221,247,255,263],{"uuid":41,"title":42,"description":43,"canonical_path":4,"image":11,"width":44,"height":45,"image_alt":46,"kind":47,"patterns":48,"component_categories":58,"app":67},"48791089-8ede-4fa5-9b36-1d6eb6da023e","Sign in","Sign-in screen where the user authenticates with their GitHub account to access the platform.",2880,1520,"Sign in from Runnable","screen",[49],{"id":50,"label":51,"slug":52,"rank":53,"group":54},4,"Sign In","sign-in",0,{"id":55,"label":56,"slug":57},1,"Access & Account","access-and-account",[59,63],{"id":60,"title":61,"slug":62},174,"Card","card",{"id":64,"title":65,"slug":66},175,"Button","button",{"slug":30,"title":29,"logo":32,"categories":68},[],{"uuid":70,"title":71,"description":72,"canonical_path":4,"image":73,"width":44,"height":45,"image_alt":74,"kind":47,"patterns":75,"component_categories":85,"app":88},"193740f4-7446-4813-9889-3a8acd36751f","Sign up","Signup page where the user can create an account using GitHub or Bitbucket to start a 14-day free trial.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Frunnable_sign-up_8349e3d8_nicelydone.jpg","Sign up from Runnable",[76,81],{"id":77,"label":78,"slug":79,"rank":53,"group":80},5,"Sign Up","sign-up",{"id":55,"label":56,"slug":57},{"id":55,"label":82,"slug":83,"rank":55,"group":84},"Account Setup","account-setup",{"id":55,"label":56,"slug":57},[86,87],{"id":60,"title":61,"slug":62},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":89},[],{"uuid":91,"title":71,"description":92,"canonical_path":4,"image":93,"width":44,"height":94,"image_alt":74,"kind":47,"patterns":95,"component_categories":98,"app":105},"c787aea9-d9d0-4b9b-b28e-31ef14afef33","Sign-in screen where the user authenticates with their GitHub credentials to authorize access for the Runnable application.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Frunnable_sign-up-2_e4aa08f5_nicelydone.jpg",1526,[96],{"id":50,"label":51,"slug":52,"rank":53,"group":97},{"id":55,"label":56,"slug":57},[99,103,104],{"id":100,"title":101,"slug":102},169,"Avatar","avatar",{"id":60,"title":61,"slug":62},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":106},[],{"uuid":108,"title":109,"description":110,"canonical_path":4,"image":111,"width":44,"height":94,"image_alt":112,"kind":47,"patterns":113,"component_categories":130,"app":134},"dd765238-598b-4282-b263-6af1b3a8d2ea","Onboarding","Onboarding step where the user selects a team workspace, like 'bertwitt', or indicates they don't see their team to proceed.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Frunnable_onboarding_15fee8ea_nicelydone.jpg","Onboarding from Runnable",[114,122],{"id":115,"label":116,"slug":117,"rank":53,"group":118},104,"Team Management","team-management",{"id":119,"label":120,"slug":121},10,"Settings & Admin","settings-and-admin",{"id":123,"label":124,"slug":125,"rank":55,"group":126},77,"Welcome","welcome",{"id":127,"label":128,"slug":129},7,"Onboarding & Education","onboarding-and-education",[131,132,133],{"id":100,"title":101,"slug":102},{"id":60,"title":61,"slug":62},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":135},[],{"uuid":137,"title":109,"description":138,"canonical_path":4,"image":139,"width":44,"height":94,"image_alt":112,"kind":47,"patterns":140,"component_categories":157,"app":160},"1d471f24-d40d-4cd2-89e8-a4c9f260eec4","Onboarding loading screen where the user waits for their infrastructure to spin up while being offered a product tour video.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Frunnable_onboarding-2_5e5cdc47_nicelydone.jpg",[141,149,154],{"id":142,"label":143,"slug":144,"rank":53,"group":145},120,"Loading","loading",{"id":146,"label":147,"slug":148},12,"States & Feedback","states-and-feedback",{"id":150,"label":151,"slug":152,"rank":55,"group":153},73,"Guided Tour","guided-tour",{"id":127,"label":128,"slug":129},{"id":123,"label":124,"slug":125,"rank":155,"group":156},2,{"id":127,"label":128,"slug":129},[158,159],{"id":60,"title":61,"slug":62},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":161},[],{"uuid":163,"title":109,"description":164,"canonical_path":4,"image":165,"width":44,"height":94,"image_alt":112,"kind":47,"patterns":166,"component_categories":167,"app":168},"86edf183-77a6-417a-a216-a08ee02392ce","Onboarding Confirmation","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Frunnable_onboarding-3_e9e4c77e_nicelydone.jpg",[],[],{"slug":30,"title":29,"logo":32,"categories":169},[],{"uuid":171,"title":109,"description":172,"canonical_path":4,"image":173,"width":44,"height":94,"image_alt":112,"kind":47,"patterns":174,"component_categories":185,"app":192},"4f8dbd33-4e29-4042-964f-11c614b204a5","Onboarding step where the user configures their application by choosing to start a demo with Node.js, Python, or Ruby, or by connecting existing repositories.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Frunnable_onboarding-4_18d74586_nicelydone.jpg",[175,180],{"id":176,"label":177,"slug":178,"rank":53,"group":179},75,"Setup Wizard","setup-wizard",{"id":127,"label":128,"slug":129},{"id":181,"label":182,"slug":183,"rank":55,"group":184},72,"Getting Started","getting-started",{"id":127,"label":128,"slug":129},[186,190,191],{"id":187,"title":188,"slug":189},227,"Stepper","stepper",{"id":60,"title":61,"slug":62},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":193},[],{"uuid":195,"title":109,"description":196,"canonical_path":4,"image":197,"width":44,"height":94,"image_alt":112,"kind":47,"patterns":198,"component_categories":201,"app":219},"1b62e931-2162-451c-901d-462dffb14e86","Configuration wizard step where the user selects the stack type, version, and branch for their repository before initiating a build, guided by an onboarding coach mark.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Frunnable_onboarding-5_12ff1b0d_nicelydone.jpg",[199],{"id":176,"label":177,"slug":178,"rank":53,"group":200},{"id":127,"label":128,"slug":129},[202,206,210,214,218],{"id":203,"title":204,"slug":205},233,"Tabs","tabs",{"id":207,"title":208,"slug":209},260,"Badge","badge",{"id":211,"title":212,"slug":213},284,"Modal","modal",{"id":215,"title":216,"slug":217},214,"Popover","popover",{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":220},[],{"uuid":222,"title":109,"description":223,"canonical_path":4,"image":224,"width":44,"height":94,"image_alt":112,"kind":47,"patterns":225,"component_categories":241,"app":245},"2bc4af37-3391-4be2-b937-d7f7c33e3d79","Detail page where the user views the configuration settings for a ruby-starter template and is guided by an onboarding coach mark after successfully creating a container.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Frunnable_onboarding-6_be42f3af_nicelydone.jpg",[226,228,236],{"id":176,"label":177,"slug":178,"rank":53,"group":227},{"id":127,"label":128,"slug":129},{"id":229,"label":230,"slug":231,"rank":55,"group":232},86,"Templates","templates",{"id":233,"label":234,"slug":235},8,"Pages & Content","pages-and-content",{"id":237,"label":238,"slug":239,"rank":155,"group":240},122,"Success","success",{"id":146,"label":147,"slug":148},[242,243,244],{"id":215,"title":216,"slug":217},{"id":64,"title":65,"slug":66},{"id":60,"title":61,"slug":62},{"slug":30,"title":29,"logo":32,"categories":246},[],{"uuid":248,"title":109,"description":249,"canonical_path":4,"image":250,"width":44,"height":94,"image_alt":112,"kind":47,"patterns":251,"component_categories":252,"app":253},"b5296916-8b41-402c-b81f-ed62d91cf6cb","Onboarding Dashboard Sidebar navigation Templates","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Frunnable_onboarding-7_5ba5ecc8_nicelydone.jpg",[],[],{"slug":30,"title":29,"logo":32,"categories":254},[],{"uuid":256,"title":109,"description":257,"canonical_path":4,"image":258,"width":44,"height":94,"image_alt":112,"kind":47,"patterns":259,"component_categories":260,"app":261},"ba3c688c-e236-4699-9092-a9744da6566b","Form Configuration","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Frunnable_onboarding-8_aa507527_nicelydone.jpg",[],[],{"slug":30,"title":29,"logo":32,"categories":262},[],{"uuid":264,"title":109,"description":265,"canonical_path":4,"image":266,"width":44,"height":94,"image_alt":112,"kind":47,"patterns":267,"component_categories":280,"app":283},"9405a3e2-d7e8-4ddf-8c8f-298791902591","Modal overlay confirming a successful deployment and prompting the user to enable GitHub pull request notifications via a toggle switch.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Frunnable_onboarding-9_af5435ae_nicelydone.jpg",[268,270,275],{"id":237,"label":238,"slug":239,"rank":53,"group":269},{"id":146,"label":147,"slug":148},{"id":271,"label":272,"slug":273,"rank":55,"group":274},97,"Integrations","integrations",{"id":119,"label":120,"slug":121},{"id":276,"label":277,"slug":278,"rank":155,"group":279},99,"Notification Settings","notification-settings",{"id":119,"label":120,"slug":121},[281,282],{"id":211,"title":212,"slug":213},{"id":60,"title":61,"slug":62},{"slug":30,"title":29,"logo":32,"categories":284},[],[],[287,289,291,293,295,297,299,301,303,305,307,309,311,314,317,320,323,325,329,333,337],{"label":177,"to":288},"\u002Fexamples\u002Fscreens\u002Fsetup-wizard",{"label":51,"to":290},"\u002Fexamples\u002Fscreens\u002Fsign-in",{"label":238,"to":292},"\u002Fexamples\u002Fscreens\u002Fsuccess",{"label":124,"to":294},"\u002Fexamples\u002Fscreens\u002Fwelcome",{"label":82,"to":296},"\u002Fexamples\u002Fscreens\u002Faccount-setup",{"label":182,"to":298},"\u002Fexamples\u002Fscreens\u002Fgetting-started",{"label":151,"to":300},"\u002Fexamples\u002Fscreens\u002Fguided-tour",{"label":272,"to":302},"\u002Fexamples\u002Fscreens\u002Fintegrations",{"label":143,"to":304},"\u002Fexamples\u002Fscreens\u002Floading",{"label":277,"to":306},"\u002Fexamples\u002Fscreens\u002Fnotification-settings",{"label":78,"to":308},"\u002Fexamples\u002Fscreens\u002Fsign-up",{"label":116,"to":310},"\u002Fexamples\u002Fscreens\u002Fteam-management",{"label":312,"to":313},"Runnable marketing pages","\u002Fexamples\u002Fapps\u002Frunnable\u002Fmarketing",{"label":315,"to":316},"Runnable user flows","\u002Fexamples\u002Fapps\u002Frunnable\u002Fflows",{"label":318,"to":319},"Runnable UI components","\u002Fexamples\u002Fapps\u002Frunnable\u002Fcomponents",{"label":321,"to":322},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":324,"to":18},"All SaaS app examples",{"label":326,"to":327,"description":328},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":330,"to":331,"description":332},"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":334,"to":335,"description":336},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":338,"to":339,"description":340},"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":342,"updated_at":343},"2016-11-21T08:00:00.000Z","2026-09-13T13:02:39.000Z"]