[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ftreehouse\u002Fscreens":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":43,"showcases":373,"links":374,"dates":432},"\u002Fexamples\u002Fapps\u002Ftreehouse\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Treehouse product screens examples - Nicelydone","Browse Treehouse screen design examples. Preview the interface screenshots and explore related UI patterns. Effective, affordable tech education","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ftreehouse_sign-in_4b34a76e_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},"Treehouse design examples","\u002Fexamples\u002Fapps\u002Ftreehouse",{"label":23,"to":4},"Treehouse 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},"Treehouse","treehouse","Effective, affordable tech education","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftreehouse-79f84fed.png","https:\u002F\u002Fteamtreehouse.com",[35,39],{"id":36,"title":37,"slug":38},32,"Education","education",{"id":40,"title":41,"slug":42},33,"E-Learning","e-learning",[44,77,115,155,182,199,207,220,267,292,320,351],{"uuid":45,"title":46,"description":47,"canonical_path":4,"image":11,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":52,"component_categories":62,"app":75},"d1e24f77-f791-465b-998c-0c7e4b7d3f06","Sign in","Sign-in screen where the user authenticates with their email and password, featuring a promotional section for the mobile application.",2800,1914,"Sign in from Treehouse","screen",[53],{"id":54,"label":55,"slug":56,"rank":57,"group":58},4,"Sign In","sign-in",0,{"id":59,"label":60,"slug":61},1,"Access & Account","access-and-account",[63,67,71],{"id":64,"title":65,"slug":66},240,"Horizontal navigation","horizontal-navigation",{"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":82,"height":83,"image_alt":84,"kind":51,"patterns":85,"component_categories":94,"app":113},"30eff4f5-06dc-4d3a-b000-1e4d2b110ea2","Plans","Pricing page where the user picks between a Basic and Pro subscription plan, views customer testimonials, and reads frequently asked questions.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ftreehouse_plans_f00b6c2e_nicelydone.jpg",2780,6384,"Plans from Treehouse",[86],{"id":87,"label":88,"slug":89,"rank":57,"group":90},143,"Pricing Page","pricing-page",{"id":91,"label":92,"slug":93},15,"Marketing Page Types","marketing-page-types",[95,99,103,107,111,112],{"id":96,"title":97,"slug":98},258,"Header","header",{"id":100,"title":101,"slug":102},232,"Testimonial","testimonial",{"id":104,"title":105,"slug":106},189,"FAQ","faq",{"id":108,"title":109,"slug":110},202,"Footer","footer",{"id":68,"title":69,"slug":70},{"id":72,"title":73,"slug":74},{"slug":30,"title":29,"logo":32,"categories":114},[],{"uuid":116,"title":117,"description":118,"canonical_path":4,"image":119,"width":120,"height":121,"image_alt":122,"kind":51,"patterns":123,"component_categories":145,"app":153},"db67ca7b-f21f-4411-9a25-2bb76f67e183","Checkout","Signup and checkout page where the user selects a billing cycle, enters personal details, and provides payment information to start a free trial.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ftreehouse_checkout_d67965b8_nicelydone.jpg",2770,3414,"Checkout from Treehouse",[124,131,136],{"id":125,"label":117,"slug":126,"rank":57,"group":127},130,"checkout",{"id":128,"label":129,"slug":130},14,"Payments & Checkout","payments-and-checkout",{"id":132,"label":133,"slug":134,"rank":59,"group":135},131,"Payment Form","payment-form",{"id":128,"label":129,"slug":130},{"id":137,"label":138,"slug":139,"rank":140,"group":141},91,"Trial","trial",2,{"id":142,"label":143,"slug":144},9,"Plans & Limits","plans-and-limits",[146,150,151,152],{"id":147,"title":148,"slug":149},260,"Badge","badge",{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"id":72,"title":73,"slug":74},{"slug":30,"title":29,"logo":32,"categories":154},[],{"uuid":156,"title":157,"description":158,"canonical_path":4,"image":159,"width":82,"height":160,"image_alt":161,"kind":51,"patterns":162,"component_categories":178,"app":180},"377fb9d7-a780-4c47-9411-dd27ab909fc5","Onboarding","Onboarding step where the user selects their coding experience level from three options or chooses to skip the survey.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ftreehouse_onboarding_1e1a4e9e_nicelydone.jpg",1544,"Onboarding from Treehouse",[163,171],{"id":164,"label":165,"slug":166,"rank":57,"group":167},75,"Setup Wizard","setup-wizard",{"id":168,"label":169,"slug":170},7,"Onboarding & Education","onboarding-and-education",{"id":172,"label":173,"slug":174,"rank":59,"group":175},42,"Form","form",{"id":54,"label":176,"slug":177},"Data & Analysis","data-and-analysis",[179],{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":181},[],{"uuid":183,"title":157,"description":184,"canonical_path":4,"image":185,"width":82,"height":160,"image_alt":161,"kind":51,"patterns":186,"component_categories":194,"app":197},"06e3cefa-bbc1-4f4d-9c0f-59c802bf9ffc","Onboarding step where the user selects what they want to build from options like mobile apps, web apps, or websites to personalize their course recommendations.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ftreehouse_onboarding-2_baf16fee_nicelydone.jpg",[187,189],{"id":164,"label":165,"slug":166,"rank":57,"group":188},{"id":168,"label":169,"slug":170},{"id":190,"label":191,"slug":192,"rank":59,"group":193},77,"Welcome","welcome",{"id":168,"label":169,"slug":170},[195,196],{"id":68,"title":69,"slug":70},{"id":72,"title":73,"slug":74},{"slug":30,"title":29,"logo":32,"categories":198},[],{"uuid":200,"title":157,"description":201,"canonical_path":4,"image":202,"width":82,"height":160,"image_alt":161,"kind":51,"patterns":203,"component_categories":204,"app":205},"b3325dfb-b417-4f1c-8785-71ef707763ac","Onboarding Form Modal screen","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ftreehouse_onboarding-3_dddfc4bd_nicelydone.jpg",[],[],{"slug":30,"title":29,"logo":32,"categories":206},[],{"uuid":208,"title":157,"description":209,"canonical_path":4,"image":210,"width":82,"height":211,"image_alt":161,"kind":51,"patterns":212,"component_categories":215,"app":218},"ae045362-be97-4bd1-9037-e60488695c2a","Onboarding step where the user is recommended a specific development track based on their survey answers, featuring an introductory video and a primary action to begin the course.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ftreehouse_onboarding-4_39bac644_nicelydone.jpg",1948,[213],{"id":190,"label":191,"slug":192,"rank":57,"group":214},{"id":168,"label":169,"slug":170},[216,217],{"id":68,"title":69,"slug":70},{"id":72,"title":73,"slug":74},{"slug":30,"title":29,"logo":32,"categories":219},[],{"uuid":221,"title":222,"description":223,"canonical_path":4,"image":224,"width":82,"height":225,"image_alt":226,"kind":51,"patterns":227,"component_categories":252,"app":265},"ae0f1f68-a5bd-49f3-b5a3-5dda19f35012","Single","Detail page where the user watches a video lesson on HTML and CSS, with access to teacher's notes, questions, and a workspace environment.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ftreehouse_single-2_7ead8f3a_nicelydone.jpg",3684,"Single from Treehouse",[228,236,244],{"id":229,"label":230,"slug":231,"rank":57,"group":232},82,"Media Detail","media-detail",{"id":233,"label":234,"slug":235},8,"Pages & Content","pages-and-content",{"id":237,"label":238,"slug":239,"rank":59,"group":240},61,"Video Player","video-player",{"id":241,"label":242,"slug":243},5,"Media & Tools","media-and-tools",{"id":245,"label":246,"slug":247,"rank":140,"group":248},118,"Help","help",{"id":249,"label":250,"slug":251},12,"States & Feedback","states-and-feedback",[253,257,258,262,263,264],{"id":254,"title":255,"slug":256},233,"Tabs","tabs",{"id":147,"title":148,"slug":149},{"id":259,"title":260,"slug":261},169,"Avatar","avatar",{"id":64,"title":65,"slug":66},{"id":72,"title":73,"slug":74},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":266},[],{"uuid":268,"title":269,"description":270,"canonical_path":4,"image":271,"width":82,"height":272,"image_alt":273,"kind":51,"patterns":274,"component_categories":284,"app":290},"dd8cde24-1884-4183-bf83-f43275513377","Home","Home page where a student can resume their recommended PHP Development track and see prompts to take a survey or download the mobile app.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ftreehouse_home_70de176c_nicelydone.jpg",2514,"Home from Treehouse",[275,279],{"id":276,"label":269,"slug":277,"rank":57,"group":278},81,"home",{"id":233,"label":234,"slug":235},{"id":280,"label":281,"slug":282,"rank":59,"group":283},41,"Dashboard","dashboard",{"id":54,"label":176,"slug":177},[285,286,287,288,289],{"id":254,"title":255,"slug":256},{"id":259,"title":260,"slug":261},{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"id":72,"title":73,"slug":74},{"slug":30,"title":29,"logo":32,"categories":291},[],{"uuid":293,"title":294,"description":295,"canonical_path":4,"image":296,"width":82,"height":160,"image_alt":297,"kind":51,"patterns":298,"component_categories":311,"app":318},"b5bd8081-62c4-4416-8904-f85b84f523cc","Dropdown","Home dashboard where the user views their getting started track, dismisses a mobile app promo banner, and accesses account settings via an open profile dropdown.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ftreehouse_dropdown_07f231f3_nicelydone.jpg","Dropdown from Treehouse",[299,301,309],{"id":276,"label":269,"slug":277,"rank":57,"group":300},{"id":233,"label":234,"slug":235},{"id":302,"label":303,"slug":304,"rank":59,"group":305},3,"Profile","profile",{"id":306,"label":307,"slug":308},11,"Social & Collaboration","social-and-collaboration",{"id":280,"label":281,"slug":282,"rank":140,"group":310},{"id":54,"label":176,"slug":177},[312,313,314,315,316,317],{"id":254,"title":255,"slug":256},{"id":147,"title":148,"slug":149},{"id":259,"title":260,"slug":261},{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"id":72,"title":73,"slug":74},{"slug":30,"title":29,"logo":32,"categories":319},[],{"uuid":321,"title":322,"description":323,"canonical_path":4,"image":324,"width":82,"height":325,"image_alt":326,"kind":51,"patterns":327,"component_categories":344,"app":349},"6cf99ce8-71b4-483e-b5d6-42ff3610bf20","Settings","Settings page where the user views their profile information, including email and company, and can navigate to other account preferences.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ftreehouse_settings_b62a0b74_nicelydone.jpg",1662,"Settings from Treehouse",[328,330,338],{"id":302,"label":303,"slug":304,"rank":57,"group":329},{"id":306,"label":307,"slug":308},{"id":331,"label":332,"slug":333,"rank":59,"group":334},94,"Account Settings","account-settings",{"id":335,"label":336,"slug":337},10,"Settings & Admin","settings-and-admin",{"id":306,"label":339,"slug":340,"rank":140,"group":341},"Edit","edit",{"id":140,"label":342,"slug":343},"Actions","actions",[345,346,347,348],{"id":259,"title":260,"slug":261},{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"id":72,"title":73,"slug":74},{"slug":30,"title":29,"logo":32,"categories":350},[],{"uuid":352,"title":322,"description":353,"canonical_path":4,"image":354,"width":82,"height":355,"image_alt":326,"kind":51,"patterns":356,"component_categories":367,"app":371},"03196aee-2567-4bfe-8c67-2132cb153445","Settings page where the user compares Basic, Pro, and Techdegree plans, views their current enrollment status, and can upgrade or change their subscription.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ftreehouse_settings-2_8f54fb0d_nicelydone.jpg",3686,[357,362],{"id":358,"label":359,"slug":360,"rank":57,"group":361},89,"Pricing","pricing",{"id":142,"label":143,"slug":144},{"id":363,"label":364,"slug":365,"rank":59,"group":366},96,"Billing Settings","billing-settings",{"id":335,"label":336,"slug":337},[368,369,370],{"id":147,"title":148,"slug":149},{"id":259,"title":260,"slug":261},{"id":72,"title":73,"slug":74},{"slug":30,"title":29,"logo":32,"categories":372},[],[],[375,377,379,381,383,385,387,389,391,393,395,397,399,402,405,408,411,414,416,420,424,428],{"label":281,"to":376},"\u002Fexamples\u002Fscreens\u002Fdashboard",{"label":269,"to":378},"\u002Fexamples\u002Fscreens\u002Fhome",{"label":303,"to":380},"\u002Fexamples\u002Fscreens\u002Fprofile",{"label":165,"to":382},"\u002Fexamples\u002Fscreens\u002Fsetup-wizard",{"label":191,"to":384},"\u002Fexamples\u002Fscreens\u002Fwelcome",{"label":332,"to":386},"\u002Fexamples\u002Fscreens\u002Faccount-settings",{"label":364,"to":388},"\u002Fexamples\u002Fscreens\u002Fbilling-settings",{"label":117,"to":390},"\u002Fexamples\u002Fscreens\u002Fcheckout",{"label":339,"to":392},"\u002Fexamples\u002Fscreens\u002Fedit",{"label":173,"to":394},"\u002Fexamples\u002Fscreens\u002Fform",{"label":246,"to":396},"\u002Fexamples\u002Fscreens\u002Fhelp",{"label":230,"to":398},"\u002Fexamples\u002Fscreens\u002Fmedia-detail",{"label":400,"to":401},"Treehouse marketing pages","\u002Fexamples\u002Fapps\u002Ftreehouse\u002Fmarketing",{"label":403,"to":404},"Treehouse user flows","\u002Fexamples\u002Fapps\u002Ftreehouse\u002Fflows",{"label":406,"to":407},"Treehouse UI components","\u002Fexamples\u002Fapps\u002Ftreehouse\u002Fcomponents",{"label":409,"to":410},"Education app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Feducation",{"label":412,"to":413},"E-Learning app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fe-learning",{"label":415,"to":18},"All SaaS app examples",{"label":417,"to":418,"description":419},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":421,"to":422,"description":423},"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":425,"to":426,"description":427},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":429,"to":430,"description":431},"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":433,"updated_at":434},"2016-06-21T08:40:00.000Z","2026-09-13T13:02:39.000Z"]