[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fteachable\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":44,"showcases":210,"links":211,"dates":245},"\u002Fexamples\u002Fapps\u002Fteachable\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Teachable UI components examples - Nicelydone","Browse Teachable UI component design examples. Preview individual interface elements and explore related component categories. Create and sell online…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5f4cf218-1bfd-4561-bb16-d1b304738231.png",[13,16,19,22],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":21},"Teachable design examples","\u002Fexamples\u002Fapps\u002Fteachable",{"label":23,"to":4},"Teachable UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Teachable UI component design examples. Preview individual interface elements and explore related component categories. Create and sell online courses and coaching",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"categories":35},"Teachable","teachable","Create and sell online courses and coaching","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fteachable-32bcb802.png","https:\u002F\u002Fteachable.com",[36,40],{"id":37,"title":38,"slug":39},33,"E-Learning","e-learning",{"id":41,"title":42,"slug":43},32,"Education","education",[45,60,73,86,98,113,125,140,155,170,182,197],{"uuid":46,"title":47,"description":48,"canonical_path":4,"image":11,"width":49,"height":50,"image_alt":51,"kind":52,"categories":53,"app":58},"d6f661f2-c192-4757-b073-fa56e48eb3fd","Teachable UI component","Color palette selection modal",2344,975,"UI component from Teachable","component",[54],{"id":55,"title":56,"slug":57},183,"Color picker","color-picker",{"slug":31,"title":30,"logo":33,"categories":59},[],{"uuid":61,"title":47,"description":62,"canonical_path":4,"image":63,"width":64,"height":65,"image_alt":51,"kind":52,"categories":66,"app":71},"a18f788f-bb1a-4031-852a-aefe1f52f00f","A modal prompting the user to upgrade their plan to add an owner.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F57e8689d-ddef-4b5b-bfeb-4cf0adc62048.png",1908,960,[67],{"id":68,"title":69,"slug":70},255,"Upgrade your plan","upgrade-your-plan",{"slug":31,"title":30,"logo":33,"categories":72},[],{"uuid":74,"title":47,"description":75,"canonical_path":4,"image":76,"width":77,"height":78,"image_alt":51,"kind":52,"categories":79,"app":84},"a3110bd3-fc30-403f-bf44-cb7cf8142cfe","A modal for adding content with various options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F77bf0f04-967f-49df-bddf-d2ec8382aa0e.png",856,1506,[80],{"id":81,"title":82,"slug":83},246,"Toolbox","toolbox",{"slug":31,"title":30,"logo":33,"categories":85},[],{"uuid":87,"title":88,"description":89,"canonical_path":4,"image":90,"width":91,"height":92,"image_alt":93,"kind":52,"categories":94,"app":96},"70956c85-25c1-446c-8305-aaf8b7b3c06e","Upgrade Upsell Modal","A modal dialog prompting the user to upgrade their plan to access the Upsells feature. It includes an illustration, a title, a descriptive paragraph, and a primary call-to-action button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9934ac6b-dcc9-4098-8f40-5004338da8cd.png",965,1003,"Upgrade Upsell Modal from Teachable",[95],{"id":68,"title":69,"slug":70},{"slug":31,"title":30,"logo":33,"categories":97},[],{"uuid":99,"title":100,"description":101,"canonical_path":4,"image":102,"width":103,"height":104,"image_alt":105,"kind":52,"categories":106,"app":111},"5a8fc646-8ef4-4495-acdc-83e18af3066f","Question Block Editor","A rich text editor block for creating an open-ended question, including a toolbar for formatting, an option to add an image, and toggle switches for requiring an answer and enabling file uploads.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff921b7d7-14be-4afb-a5dc-f61f0edacd0a.png",1596,1419,"Question Block Editor from Teachable",[107],{"id":108,"title":109,"slug":110},221,"Rich text editor","rich-text-editor",{"slug":31,"title":30,"logo":33,"categories":112},[],{"uuid":114,"title":115,"description":116,"canonical_path":4,"image":117,"width":118,"height":119,"image_alt":120,"kind":52,"categories":121,"app":123},"ecbdd484-d3cc-4f68-a9af-e58b757b556d","Feature gate alert","A tabbed interface for adding a video, showing an inline alert that blocks the embed feature until the user upgrades their plan.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc9f7ac71-6b24-49f3-88e5-827040e63a4e.png",1464,626,"Feature gate alert from Teachable",[122],{"id":68,"title":69,"slug":70},{"slug":31,"title":30,"logo":33,"categories":124},[],{"uuid":126,"title":127,"description":128,"canonical_path":4,"image":129,"width":130,"height":131,"image_alt":132,"kind":52,"categories":133,"app":138},"3fcec90d-1e5c-48c5-a818-7f15d1e14f2b","Rich text editor with AI assistant","A rich text editor component featuring a formatting toolbar and a prominent AI assistant button in the header.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd83a4f36-c5b4-4404-82d5-856a3975d5c6.png",1716,1522,"Rich text editor with AI assistant from Teachable",[134],{"id":135,"title":136,"slug":137},294,"Artificial intelligence","ai",{"slug":31,"title":30,"logo":33,"categories":139},[],{"uuid":141,"title":142,"description":143,"canonical_path":4,"image":144,"width":145,"height":146,"image_alt":147,"kind":52,"categories":148,"app":153},"242ec096-790d-4f79-a6e4-2f10511e9910","Knowledge Base Link Banner","A full-width informational banner with a blue border and light blue background, containing a help icon and a link to the knowledge base.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe08b9144-b631-4355-952a-1509e3e67df6.png",1544,340,"Knowledge Base Link Banner from Teachable",[149],{"id":150,"title":151,"slug":152},254,"Tooltip","tooltip-element",{"slug":31,"title":30,"logo":33,"categories":154},[],{"uuid":156,"title":157,"description":158,"canonical_path":4,"image":159,"width":160,"height":161,"image_alt":162,"kind":52,"categories":163,"app":168},"ca8bca1a-3a92-4a06-8d19-43609c670c86","Admin Sidebar Navigation","A dark-themed vertical sidebar navigation menu for an admin dashboard. It includes a school title, primary navigation links with icons, a 'Products' section with an add button, and a user profile footer with a more options menu.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F47edceec-f1c5-4c35-ab7d-31de5ccbc8e7.png",446,1685,"Admin Sidebar Navigation from Teachable",[164],{"id":165,"title":166,"slug":167},209,"Vertical navigation","vertical-navigation",{"slug":31,"title":30,"logo":33,"categories":169},[],{"uuid":171,"title":172,"description":173,"canonical_path":4,"image":174,"width":175,"height":176,"image_alt":177,"kind":52,"categories":178,"app":180},"3991a6a6-74b8-48e8-a627-1067d03f34b7","Upgrade Prompt Banner","A horizontal banner prompting the user to upgrade from a free plan to a paid plan. It features an illustration on the left, a title and description in the center, and an 'Upgrade now' button on the right.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8fa5726e-b34d-4cb5-9f48-80236e65e543.png",2304,436,"Upgrade Prompt Banner from Teachable",[179],{"id":68,"title":69,"slug":70},{"slug":31,"title":30,"logo":33,"categories":181},[],{"uuid":183,"title":184,"description":185,"canonical_path":4,"image":186,"width":187,"height":188,"image_alt":189,"kind":52,"categories":190,"app":195},"300c48f1-50b2-4e08-8f78-8f139b5b40c8","Image upload dropzone","A bordered area for uploading an image, featuring an icon, instructions on aspect ratio and size, and an upload button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcd9b1279-e518-4053-ac4a-ab898a15518c.png",748,608,"Image upload dropzone from Teachable",[191],{"id":192,"title":193,"slug":194},188,"File upload input","file-upload-input",{"slug":31,"title":30,"logo":33,"categories":196},[],{"uuid":198,"title":47,"description":199,"canonical_path":4,"image":200,"width":201,"height":202,"image_alt":51,"kind":52,"categories":203,"app":208},"9cda455b-92f2-49e5-8296-45d6ab08116c","FAQ section with expandable questions","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6a286d1e-bb55-4db8-ae40-3a7afbf013af.png",1995,1593,[204],{"id":205,"title":206,"slug":207},189,"FAQ","faq",{"slug":31,"title":30,"logo":33,"categories":209},[],[],[212,215,218,221,224,227,229,233,237,241],{"label":213,"to":214},"Teachable product screens","\u002Fexamples\u002Fapps\u002Fteachable\u002Fscreens",{"label":216,"to":217},"Teachable marketing pages","\u002Fexamples\u002Fapps\u002Fteachable\u002Fmarketing",{"label":219,"to":220},"Teachable user flows","\u002Fexamples\u002Fapps\u002Fteachable\u002Fflows",{"label":222,"to":223},"E-Learning app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fe-learning",{"label":225,"to":226},"Education app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Feducation",{"label":228,"to":18},"All SaaS app examples",{"label":230,"to":231,"description":232},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":234,"to":235,"description":236},"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":238,"to":239,"description":240},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":242,"to":243,"description":244},"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":246,"updated_at":247},"2020-11-29T10:10:45.000Z","2026-09-27T00:10:34.000Z"]