[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fwalkthrough":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":215,"links":216,"dates":250},"\u002Fexamples\u002Fcomponents\u002Fwalkthrough","collection","components",true,{"example_count":9,"app_count":10},14,7,{"id":12,"title":13,"description":14},239,"Walkthrough","See how interfaces introduce a task through a series of explanations. Explore how walkthrough content and navigation controls connect each step with the feature being introduced.",{"title":16,"description":17,"og_image":18},"Walkthrough UI examples - Nicelydone","Walkthrough UI design examples from SaaS apps. See how interfaces introduce a task through a series of explanations. Explore how walkthrough content and…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff417dc85-b38a-4420-85e1-b4af565e6740.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Walkthrough UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Walkthrough UI design examples from SaaS apps. See how interfaces introduce a task through a series of explanations. Explore how walkthrough content and navigation controls connect each step with the…",[32],{"title":33,"description":14,"links":34},"About Walkthrough",[],[36],"14 UI components",[38,72,93,118,147,172,192],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"b2c074b0-fd30-4ff1-9cc7-3ffe86494944","Product tour tooltip","A tooltip card providing instructions for a product tour, showing progress and an option to end the tour.","\u002Fexamples\u002Fapps\u002Ftines\u002Fcomponents",854,540,"Product tour tooltip from Tines","component",[48],{"id":12,"title":13,"slug":49},"walkthrough",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"tines","Tines","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftines-1ce70211.png","No-code automation for security teams",[56,60,64,68],{"id":57,"title":58,"slug":59},78,"Security","security",{"id":61,"title":62,"slug":63},96,"No code","no-code",{"id":65,"title":66,"slug":67},80,"Artificial Intelligence","artificial-intelligence",{"id":69,"title":70,"slug":71},105,"Workflow Automation","workflow-automation",{"uuid":73,"title":74,"description":75,"canonical_path":76,"image":77,"width":78,"height":79,"image_alt":80,"kind":46,"categories":81,"app":83},"d6ae4fa5-2daf-418b-a7b2-21aa5e4f1408","Lottie UI component","A modal for motion animation with a chat interface.","\u002Fexamples\u002Fapps\u002Flottie\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F48b16a71-b73f-4661-aa50-ecb272cf88b2.png",684,1438,"UI component from Lottie",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"lottie","Lottie","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Flottie-f67ad478.png","Great designs come alive with motion",[89],{"id":90,"title":91,"slug":92},8,"Design","design",{"uuid":94,"title":95,"description":96,"canonical_path":97,"image":98,"width":99,"height":100,"image_alt":101,"kind":46,"categories":102,"app":104},"aff83245-5e9b-4f5e-91c1-67e1a053de80","Dropbox UI component","A file management interface with a modal overlay.","\u002Fexamples\u002Fapps\u002Fdropbox\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa7980ceb-4fc3-4789-a578-ef7f825fd048.png",980,632,"UI component from Dropbox",[103],{"id":12,"title":13,"slug":49},{"slug":105,"title":106,"logo":107,"baseline":108,"categories":109},"dropbox","Dropbox","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdropbox-ae12c613.png","Keep life organized and work moving — all in one place",[110,114],{"id":111,"title":112,"slug":113},23,"Collaboration","collaboration",{"id":115,"title":116,"slug":117},71,"File sharing","file-sharing",{"uuid":119,"title":120,"description":121,"canonical_path":122,"image":123,"width":124,"height":125,"image_alt":126,"kind":46,"categories":127,"app":129},"ace162dc-5aca-4aba-b69c-42536d2cdd71","Plane UI component","A modal onboarding screen with a kanban board preview.","\u002Fexamples\u002Fapps\u002Fplane\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F62678d20-54bc-432c-ad3c-4725aa258302.png",2085,1555,"UI component from Plane",[128],{"id":12,"title":13,"slug":49},{"slug":130,"title":131,"logo":132,"baseline":133,"categories":134},"plane","Plane","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fplane-2z3nu5f0.png","Project management tool from the future.",[135,139,143],{"id":136,"title":137,"slug":138},86,"Product management","product-management",{"id":140,"title":141,"slug":142},22,"Knowledge Management","knowledge-management",{"id":144,"title":145,"slug":146},29,"Task Management","task-management",{"uuid":148,"title":149,"description":150,"canonical_path":151,"image":152,"width":153,"height":154,"image_alt":155,"kind":46,"categories":156,"app":158},"fcaf67ce-f1e1-4964-8dfc-8a8aac637b53","Dynaboard UI component","A modal with a video tutorial.","\u002Fexamples\u002Fapps\u002Fdynaboard\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbf9b1627-99f9-488e-b84c-3889e42032e1.png",898,657,"UI component from Dynaboard",[157],{"id":12,"title":13,"slug":49},{"slug":159,"title":160,"logo":161,"baseline":162,"categories":163},"dynaboard","Dynaboard","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdinaboard-51ea0211.png","Build a web app in 60 seconds",[164,165,168],{"id":61,"title":62,"slug":63},{"id":10,"title":166,"slug":167},"Web Development","web-development",{"id":169,"title":170,"slug":171},48,"Developer Tools","developer-tools",{"uuid":173,"title":40,"description":174,"canonical_path":175,"image":176,"width":177,"height":178,"image_alt":179,"kind":46,"categories":180,"app":182},"86bddabc-65b8-4ac9-8b69-1cdc5f67b016","A dark-themed tooltip pointing left, explaining the Inbox feature with Back and Next navigation buttons.","\u002Fexamples\u002Fapps\u002Fdistrobird\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F101c8546-3e2f-4718-8101-4303c44cbb6d.png",1073,581,"Product tour tooltip from Distrobird",[181],{"id":12,"title":13,"slug":49},{"slug":183,"title":184,"logo":185,"baseline":186,"categories":187},"distrobird","Distrobird","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdistrobird-nlj8xwd7.png","Manage your entire sales process in one place",[188],{"id":189,"title":190,"slug":191},53,"CRM","crm",{"uuid":193,"title":194,"description":195,"canonical_path":196,"image":197,"width":198,"height":199,"image_alt":200,"kind":46,"categories":201,"app":203},"ca08eda4-72fc-4712-bb6c-4a4f0b54433a","Glide UI component","A modal showing how to change the style of a collection component.","\u002Fexamples\u002Fapps\u002Fglide\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9456ff1f-4a7e-4136-9d57-2e8d86153d54.png",686,842,"UI component from Glide",[202],{"id":12,"title":13,"slug":49},{"slug":204,"title":205,"logo":206,"baseline":207,"categories":208},"glide","Glide","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fglide-688214ec.png","Create powerful apps and websites, without code",[209,210,214],{"id":10,"title":166,"slug":167},{"id":211,"title":212,"slug":213},54,"Mobile","mobile",{"id":61,"title":62,"slug":63},[],[217,220,223,226,229,232,235,238,241,244,247],{"label":218,"to":219},"Guided Tour","\u002Fexamples\u002Fscreens\u002Fguided-tour",{"label":221,"to":222},"Design Editor","\u002Fexamples\u002Fscreens\u002Fdesign-editor",{"label":224,"to":225},"Product Page","\u002Fexamples\u002Fpages\u002Fproduct-page",{"label":227,"to":228},"AI Editing","\u002Fexamples\u002Fscreens\u002Fai-editing",{"label":230,"to":231},"Tines design examples","\u002Fexamples\u002Fapps\u002Ftines",{"label":233,"to":234},"Lottie design examples","\u002Fexamples\u002Fapps\u002Flottie",{"label":236,"to":237},"Dropbox design examples","\u002Fexamples\u002Fapps\u002Fdropbox",{"label":239,"to":240},"Plane design examples","\u002Fexamples\u002Fapps\u002Fplane",{"label":242,"to":243},"Dynaboard design examples","\u002Fexamples\u002Fapps\u002Fdynaboard",{"label":245,"to":246},"Distrobird design examples","\u002Fexamples\u002Fapps\u002Fdistrobird",{"label":248,"to":249},"Glide design examples","\u002Fexamples\u002Fapps\u002Fglide",{"published_at":251,"updated_at":252},"2022-08-21T20:07:35.000Z","2026-09-17T12:10:20.000Z"]