[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fcoachmark":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":264,"links":265,"dates":305},"\u002Fexamples\u002Fcomponents\u002Fcoachmark","collection","components",true,{"example_count":9,"app_count":10},17,9,{"id":12,"title":13,"description":14},181,"Coachmark","See how interfaces call attention to a specific control or feature. Explore how a short explanation and navigation actions are placed near the element being introduced.",{"title":16,"description":17,"og_image":18},"Coachmark UI examples - Nicelydone","Coachmark UI design examples from SaaS apps. See how interfaces call attention to a specific control or feature. Explore how a short explanation and…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8e4ab44c-c974-4f2b-a7b6-acf34e9dfdb5.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Coachmark UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Coachmark UI design examples from SaaS apps. See how interfaces call attention to a specific control or feature. Explore how a short explanation and navigation actions are placed near the element being…",[32],{"title":33,"description":14,"links":34},"About Coachmark",[],[36],"17 UI components",[38,72,98,117,138,158,191,216,239],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"80d9e671-6cbb-4982-b759-39a5ccfbe89d","Zaro UI component","A modal window presenting an onboarding step for an application, highlighting integrations and core functionalities.","\u002Fexamples\u002Fapps\u002Fzaro\u002Fcomponents",1279,824,"UI component from Zaro","component",[48],{"id":12,"title":13,"slug":49},"coachmark",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"zaro","Zaro","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdcfeb606-2235-48bf-83e3-948e2ac20719.png","AI workspace with agents and apps for business automation",[56,60,64,68],{"id":57,"title":58,"slug":59},23,"Collaboration","collaboration",{"id":61,"title":62,"slug":63},80,"Artificial Intelligence","artificial-intelligence",{"id":65,"title":66,"slug":67},22,"Knowledge Management","knowledge-management",{"id":69,"title":70,"slug":71},46,"Analytics","analytics",{"uuid":73,"title":74,"description":75,"canonical_path":76,"image":77,"width":78,"height":79,"image_alt":80,"kind":46,"categories":81,"app":83},"ec2eb314-3f1b-4ede-97a4-cbbdc347fb64","Onboarding Coachmark","A dark-themed coachmark tooltip pointing to a formatting toolbar. It includes an illustration of the toolbar, a title, a description, progress dots, and a 'Finish' button.","\u002Fexamples\u002Fapps\u002Feraser\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F22886eae-ce3b-4ed1-b721-4964e6dcc71e.png",1108,929,"Onboarding Coachmark from Eraser",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"eraser","Eraser","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Feraser-5d273b5d.png","Documents & diagrams for engineering teams",[89,90,94],{"id":57,"title":58,"slug":59},{"id":91,"title":92,"slug":93},48,"Developer Tools","developer-tools",{"id":95,"title":96,"slug":97},8,"Design","design",{"uuid":99,"title":100,"description":101,"canonical_path":102,"image":103,"width":104,"height":105,"image_alt":106,"kind":46,"categories":107,"app":109},"0a9df38c-5be4-406f-b8b2-3f6d5c2f78c1","Onboarding coachmark","A dark-themed onboarding coachmark overlaying a light-themed AI generation interface. The coachmark welcomes the user and prompts them to create a style model, with a primary CTA and a skip button. The underlying interface shows an image description input and generation controls.","\u002Fexamples\u002Fapps\u002Fexactly\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd7b9b495-1d78-49b9-9239-6ea7edbd0f1b.png",1751,676,"Onboarding coachmark from Exactly",[108],{"id":12,"title":13,"slug":49},{"slug":110,"title":111,"logo":112,"baseline":113,"categories":114},"exactly","Exactly","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fexactly-8f7f0061.png","Create images in seconds with an AI that understands your style",[115,116],{"id":61,"title":62,"slug":63},{"id":95,"title":96,"slug":97},{"uuid":118,"title":119,"description":120,"canonical_path":121,"image":122,"width":123,"height":124,"image_alt":125,"kind":46,"categories":126,"app":128},"f3a0794d-b5bd-4958-a653-8a34f34e2ee9","Wiza UI component","A modal with filter options and a progress indicator.","\u002Fexamples\u002Fapps\u002Fwiza\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F035b1054-61da-4707-9674-2da402ac19a1.png",625,745,"UI component from Wiza",[127],{"id":12,"title":13,"slug":49},{"slug":129,"title":130,"logo":131,"baseline":132,"categories":133},"wiza","Wiza","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fwiza-21efd5aa.png","Wiza makes prospecting magical",[134],{"id":135,"title":136,"slug":137},53,"CRM","crm",{"uuid":139,"title":140,"description":141,"canonical_path":142,"image":143,"width":144,"height":145,"image_alt":146,"kind":46,"categories":147,"app":149},"7a0bb19e-9d3a-4d0b-84c3-cab1c5e6d08b","Figma UI component","A modal with a progress bar and navigation buttons.","\u002Fexamples\u002Fapps\u002Ffigma\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffc39934a-56e1-414b-8ac1-553df29f5eb3.png",782,513,"UI component from Figma",[148],{"id":12,"title":13,"slug":49},{"slug":150,"title":151,"logo":152,"baseline":153,"categories":154},"figma","Figma","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffigma-569108c3.png","The collaborative interface design tool",[155,156,157],{"id":95,"title":96,"slug":97},{"id":57,"title":58,"slug":59},{"id":91,"title":92,"slug":93},{"uuid":159,"title":160,"description":161,"canonical_path":162,"image":163,"width":164,"height":165,"image_alt":166,"kind":46,"categories":167,"app":169},"551881a1-2210-4dbc-8a89-e3a351feb318","Dyte UI component","A modal for a meeting type selection.","\u002Fexamples\u002Fapps\u002Fdyte\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa181385c-b212-4938-ad8c-a4a5af30c0fd.png",1499,732,"UI component from Dyte",[168],{"id":12,"title":13,"slug":49},{"slug":170,"title":171,"logo":172,"baseline":173,"categories":174},"dyte","Dyte","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdyte-eac67577.png","Build powerful live experiences in your product",[175,179,183,187],{"id":176,"title":177,"slug":178},70,"Video streaming","video-streaming",{"id":180,"title":181,"slug":182},37,"Developer APIs","developer-apis",{"id":184,"title":185,"slug":186},82,"Communication","communication",{"id":188,"title":189,"slug":190},100,"Video","video",{"uuid":192,"title":193,"description":194,"canonical_path":195,"image":196,"width":197,"height":198,"image_alt":199,"kind":46,"categories":200,"app":202},"0a6eed6c-9715-45af-a0e5-e1422eca0e16","Feature Onboarding Tooltip","A purple tooltip pointing to a 'Show proposal' button, explaining the benefits of scheduling meetings with teammates. It includes a list of features and two action buttons: 'I understand' and 'Learn more'.","\u002Fexamples\u002Fapps\u002Frise\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcf7d4931-d2ec-4327-ac4c-c1723efeb8bd.png",658,519,"Feature Onboarding Tooltip from Rise",[201],{"id":12,"title":13,"slug":49},{"slug":203,"title":204,"logo":205,"baseline":206,"categories":207},"rise","Rise","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Frise-393c82cc.png","The calendar that works for you",[208,212],{"id":209,"title":210,"slug":211},101,"Calendar","calendar",{"id":213,"title":214,"slug":215},30,"Productivity","productivity",{"uuid":217,"title":74,"description":218,"canonical_path":219,"image":220,"width":221,"height":222,"image_alt":223,"kind":46,"categories":224,"app":226},"16105494-76fd-4164-9466-777400e14ace","A popover pointing to a navigation item, guiding the user to start exploring data analysis. It features an avatar, a title, descriptive text, and a 'Skip tour' action.","\u002Fexamples\u002Fapps\u002Fbinarbase\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F31c014b4-4467-4dd8-ba53-a12042705852.png",1338,604,"Onboarding Coachmark from BinarBase",[225],{"id":12,"title":13,"slug":49},{"slug":227,"title":228,"logo":229,"baseline":230,"categories":231},"binarbase","BinarBase","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fbinarbase-d8295ef9.png","Data for Everyone. Powered by AI.",[232,233,234,238],{"id":69,"title":70,"slug":71},{"id":61,"title":62,"slug":63},{"id":235,"title":236,"slug":237},57,"Big data","big-data",{"id":65,"title":66,"slug":67},{"uuid":240,"title":241,"description":242,"canonical_path":243,"image":244,"width":245,"height":246,"image_alt":247,"kind":46,"categories":248,"app":250},"d1db8134-6fcc-4e0b-8ba0-73a1d85dc413","Product tour tooltip","A dark tooltip pointing to a table column header, explaining its function. It includes a title, description, progress dots, a close icon, and a 'Next' button.","\u002Fexamples\u002Fapps\u002Fnotion\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7ce4c511-6543-4967-a106-94657a5a521a.png",692,494,"Product tour tooltip from Notion",[249],{"id":12,"title":13,"slug":49},{"slug":251,"title":252,"logo":253,"baseline":254,"categories":255},"notion","Notion","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fnotion-67e349e9.png","A unified workspace for modern teams",[256,260,261,262,263],{"id":257,"title":258,"slug":259},29,"Task Management","task-management",{"id":213,"title":214,"slug":215},{"id":65,"title":66,"slug":67},{"id":57,"title":58,"slug":59},{"id":61,"title":62,"slug":63},[],[266,269,272,275,278,281,284,287,290,293,296,299,302],{"label":267,"to":268},"Guided Tour","\u002Fexamples\u002Fscreens\u002Fguided-tour",{"label":270,"to":271},"AI Assistant","\u002Fexamples\u002Fscreens\u002Fai-assistant",{"label":273,"to":274},"Empty State","\u002Fexamples\u002Fscreens\u002Fempty-state",{"label":276,"to":277},"Design Editor","\u002Fexamples\u002Fscreens\u002Fdesign-editor",{"label":279,"to":280},"Zaro design examples","\u002Fexamples\u002Fapps\u002Fzaro",{"label":282,"to":283},"Eraser design examples","\u002Fexamples\u002Fapps\u002Feraser",{"label":285,"to":286},"Exactly design examples","\u002Fexamples\u002Fapps\u002Fexactly",{"label":288,"to":289},"Wiza design examples","\u002Fexamples\u002Fapps\u002Fwiza",{"label":291,"to":292},"Figma design examples","\u002Fexamples\u002Fapps\u002Ffigma",{"label":294,"to":295},"Dyte design examples","\u002Fexamples\u002Fapps\u002Fdyte",{"label":297,"to":298},"Rise design examples","\u002Fexamples\u002Fapps\u002Frise",{"label":300,"to":301},"BinarBase design examples","\u002Fexamples\u002Fapps\u002Fbinarbase",{"label":303,"to":304},"Notion design examples","\u002Fexamples\u002Fapps\u002Fnotion",{"published_at":306,"updated_at":307},"2022-08-21T20:07:35.000Z","2026-09-22T00:10:35.000Z"]