[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Frunnable":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":34,"examples":45,"showcases":46,"links":298,"dates":330},"\u002Fexamples\u002Fapps\u002Frunnable","detail","apps",true,{"title":9,"description":10,"og_image":11},"Runnable design examples - Nicelydone","Explore Runnable UI design examples. Running apps for every code branch","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Frunnable_sign-in_630ef9bb_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},"Runnable design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":33},"SaaS app examples",[24],{"title":25,"links":26},"Explore Runnable",[27,30],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Frunnable\u002Fscreens",{"label":31,"to":32},"marketing pages","\u002Fexamples\u002Fapps\u002Frunnable\u002Fmarketing",[],{"title":35,"slug":36,"description":37,"logo":38,"url":39,"categories":40},"Runnable","runnable","Running apps for every code branch","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Frunnable-ccc7ac3f.png","https:\u002F\u002Frunnable.com",[41],{"id":42,"title":43,"slug":44},48,"Developer Tools","developer-tools",[],[47,295],{"family":48,"examples":49},"screens",[50,79,100,117,146,172,180,204,231,257,265,273],{"uuid":51,"title":52,"description":53,"canonical_path":29,"image":11,"width":54,"height":55,"image_alt":56,"kind":57,"patterns":58,"component_categories":68,"app":77},"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",[59],{"id":60,"label":61,"slug":62,"rank":63,"group":64},4,"Sign In","sign-in",0,{"id":65,"label":66,"slug":67},1,"Access & Account","access-and-account",[69,73],{"id":70,"title":71,"slug":72},174,"Card","card",{"id":74,"title":75,"slug":76},175,"Button","button",{"slug":36,"title":35,"logo":38,"categories":78},[],{"uuid":80,"title":81,"description":82,"canonical_path":29,"image":83,"width":54,"height":55,"image_alt":84,"kind":57,"patterns":85,"component_categories":95,"app":98},"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",[86,91],{"id":87,"label":88,"slug":89,"rank":63,"group":90},5,"Sign Up","sign-up",{"id":65,"label":66,"slug":67},{"id":65,"label":92,"slug":93,"rank":65,"group":94},"Account Setup","account-setup",{"id":65,"label":66,"slug":67},[96,97],{"id":70,"title":71,"slug":72},{"id":74,"title":75,"slug":76},{"slug":36,"title":35,"logo":38,"categories":99},[],{"uuid":101,"title":81,"description":102,"canonical_path":29,"image":103,"width":54,"height":104,"image_alt":84,"kind":57,"patterns":105,"component_categories":108,"app":115},"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,[106],{"id":60,"label":61,"slug":62,"rank":63,"group":107},{"id":65,"label":66,"slug":67},[109,113,114],{"id":110,"title":111,"slug":112},169,"Avatar","avatar",{"id":70,"title":71,"slug":72},{"id":74,"title":75,"slug":76},{"slug":36,"title":35,"logo":38,"categories":116},[],{"uuid":118,"title":119,"description":120,"canonical_path":29,"image":121,"width":54,"height":104,"image_alt":122,"kind":57,"patterns":123,"component_categories":140,"app":144},"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",[124,132],{"id":125,"label":126,"slug":127,"rank":63,"group":128},104,"Team Management","team-management",{"id":129,"label":130,"slug":131},10,"Settings & Admin","settings-and-admin",{"id":133,"label":134,"slug":135,"rank":65,"group":136},77,"Welcome","welcome",{"id":137,"label":138,"slug":139},7,"Onboarding & Education","onboarding-and-education",[141,142,143],{"id":110,"title":111,"slug":112},{"id":70,"title":71,"slug":72},{"id":74,"title":75,"slug":76},{"slug":36,"title":35,"logo":38,"categories":145},[],{"uuid":147,"title":119,"description":148,"canonical_path":29,"image":149,"width":54,"height":104,"image_alt":122,"kind":57,"patterns":150,"component_categories":167,"app":170},"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",[151,159,164],{"id":152,"label":153,"slug":154,"rank":63,"group":155},120,"Loading","loading",{"id":156,"label":157,"slug":158},12,"States & Feedback","states-and-feedback",{"id":160,"label":161,"slug":162,"rank":65,"group":163},73,"Guided Tour","guided-tour",{"id":137,"label":138,"slug":139},{"id":133,"label":134,"slug":135,"rank":165,"group":166},2,{"id":137,"label":138,"slug":139},[168,169],{"id":70,"title":71,"slug":72},{"id":74,"title":75,"slug":76},{"slug":36,"title":35,"logo":38,"categories":171},[],{"uuid":173,"title":119,"description":174,"canonical_path":29,"image":175,"width":54,"height":104,"image_alt":122,"kind":57,"patterns":176,"component_categories":177,"app":178},"86edf183-77a6-417a-a216-a08ee02392ce","Onboarding Confirmation","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Frunnable_onboarding-3_e9e4c77e_nicelydone.jpg",[],[],{"slug":36,"title":35,"logo":38,"categories":179},[],{"uuid":181,"title":119,"description":182,"canonical_path":29,"image":183,"width":54,"height":104,"image_alt":122,"kind":57,"patterns":184,"component_categories":195,"app":202},"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",[185,190],{"id":186,"label":187,"slug":188,"rank":63,"group":189},75,"Setup Wizard","setup-wizard",{"id":137,"label":138,"slug":139},{"id":191,"label":192,"slug":193,"rank":65,"group":194},72,"Getting Started","getting-started",{"id":137,"label":138,"slug":139},[196,200,201],{"id":197,"title":198,"slug":199},227,"Stepper","stepper",{"id":70,"title":71,"slug":72},{"id":74,"title":75,"slug":76},{"slug":36,"title":35,"logo":38,"categories":203},[],{"uuid":205,"title":119,"description":206,"canonical_path":29,"image":207,"width":54,"height":104,"image_alt":122,"kind":57,"patterns":208,"component_categories":211,"app":229},"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",[209],{"id":186,"label":187,"slug":188,"rank":63,"group":210},{"id":137,"label":138,"slug":139},[212,216,220,224,228],{"id":213,"title":214,"slug":215},233,"Tabs","tabs",{"id":217,"title":218,"slug":219},260,"Badge","badge",{"id":221,"title":222,"slug":223},284,"Modal","modal",{"id":225,"title":226,"slug":227},214,"Popover","popover",{"id":74,"title":75,"slug":76},{"slug":36,"title":35,"logo":38,"categories":230},[],{"uuid":232,"title":119,"description":233,"canonical_path":29,"image":234,"width":54,"height":104,"image_alt":122,"kind":57,"patterns":235,"component_categories":251,"app":255},"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",[236,238,246],{"id":186,"label":187,"slug":188,"rank":63,"group":237},{"id":137,"label":138,"slug":139},{"id":239,"label":240,"slug":241,"rank":65,"group":242},86,"Templates","templates",{"id":243,"label":244,"slug":245},8,"Pages & Content","pages-and-content",{"id":247,"label":248,"slug":249,"rank":165,"group":250},122,"Success","success",{"id":156,"label":157,"slug":158},[252,253,254],{"id":225,"title":226,"slug":227},{"id":74,"title":75,"slug":76},{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":256},[],{"uuid":258,"title":119,"description":259,"canonical_path":29,"image":260,"width":54,"height":104,"image_alt":122,"kind":57,"patterns":261,"component_categories":262,"app":263},"b5296916-8b41-402c-b81f-ed62d91cf6cb","Onboarding Dashboard Sidebar navigation Templates","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Frunnable_onboarding-7_5ba5ecc8_nicelydone.jpg",[],[],{"slug":36,"title":35,"logo":38,"categories":264},[],{"uuid":266,"title":119,"description":267,"canonical_path":29,"image":268,"width":54,"height":104,"image_alt":122,"kind":57,"patterns":269,"component_categories":270,"app":271},"ba3c688c-e236-4699-9092-a9744da6566b","Form Configuration","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Frunnable_onboarding-8_aa507527_nicelydone.jpg",[],[],{"slug":36,"title":35,"logo":38,"categories":272},[],{"uuid":274,"title":119,"description":275,"canonical_path":29,"image":276,"width":54,"height":104,"image_alt":122,"kind":57,"patterns":277,"component_categories":290,"app":293},"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",[278,280,285],{"id":247,"label":248,"slug":249,"rank":63,"group":279},{"id":156,"label":157,"slug":158},{"id":281,"label":282,"slug":283,"rank":65,"group":284},97,"Integrations","integrations",{"id":129,"label":130,"slug":131},{"id":286,"label":287,"slug":288,"rank":165,"group":289},99,"Notification Settings","notification-settings",{"id":129,"label":130,"slug":131},[291,292],{"id":221,"title":222,"slug":223},{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":294},[],{"family":296,"examples":297},"pages",[],[299,301,303,306,309,312,314,318,322,326],{"label":300,"to":29},"Runnable product screens",{"label":302,"to":32},"Runnable marketing pages",{"label":304,"to":305},"Runnable user flows","\u002Fexamples\u002Fapps\u002Frunnable\u002Fflows",{"label":307,"to":308},"Runnable UI components","\u002Fexamples\u002Fapps\u002Frunnable\u002Fcomponents",{"label":310,"to":311},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":313,"to":18},"All SaaS app examples",{"label":315,"to":316,"description":317},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":319,"to":320,"description":321},"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":323,"to":324,"description":325},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":327,"to":328,"description":329},"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":331,"updated_at":332},"2016-11-21T08:00:00.000Z","2026-09-13T13:02:39.000Z"]