[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fclover":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":306,"dates":338},"\u002Fexamples\u002Fapps\u002Fclover","detail","apps",true,{"title":9,"description":10,"og_image":11},"Clover design examples - Nicelydone","Explore Clover UI design examples. The all-in-one notebook for creatives.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fclover_sign-in_dd130de1_nicelydone.png",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":4},"Clover design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":33},"SaaS app examples",[24],{"title":25,"links":26},"Explore Clover",[27,30],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Fclover\u002Fscreens",{"label":31,"to":32},"marketing pages","\u002Fexamples\u002Fapps\u002Fclover\u002Fmarketing",[],{"title":35,"slug":36,"description":37,"logo":38,"url":39,"categories":40},"Clover","clover","The all-in-one notebook for creatives.","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fclover-400862d8.png","https:\u002F\u002Fcloverapp.co",[41],{"id":42,"title":43,"slug":44},22,"Knowledge Management","knowledge-management",[],[47,303],{"family":48,"examples":49},"screens",[50,75,88,108,137,156,170,203,221,248,264,284],{"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":73},"5bb95d1a-d6f0-4ea7-985b-436e1951256f","Clover - Sign In","Sign-in screen where early testers authenticate with email and password, featuring a prompt to join the waitlist for updates.",3072,1654,"Clover - Sign In from Clover","screen",[59],{"id":60,"label":61,"slug":62,"rank":63,"group":64},2,"Forgot Password","forgot-password",0,{"id":65,"label":66,"slug":67},1,"Access & Account","access-and-account",[69],{"id":70,"title":71,"slug":72},175,"Button","button",{"slug":36,"title":35,"logo":38,"categories":74},[],{"uuid":76,"title":77,"description":78,"canonical_path":29,"image":79,"width":54,"height":55,"image_alt":80,"kind":57,"patterns":81,"component_categories":84,"app":86},"ea1313e4-c657-43af-a5c6-bbca96ce42a2","Clover - Forgot Password","Password recovery screen where the user enters their email address to request a reset link.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fclover_password-reset_d0717f5a_nicelydone.png","Clover - Forgot Password from Clover",[82],{"id":60,"label":61,"slug":62,"rank":63,"group":83},{"id":65,"label":66,"slug":67},[85],{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":87},[],{"uuid":89,"title":90,"description":91,"canonical_path":29,"image":92,"width":54,"height":55,"image_alt":93,"kind":57,"patterns":94,"component_categories":104,"app":106},"79aef37f-51b5-4e73-9de2-4bc1ed3bcce7","Clover - Where Ideas Grow","Signup screen where the user sets up their account by entering their full name and a password.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fclover_sign-up_001ef607_nicelydone.png","Clover - Where Ideas Grow from Clover",[95,99],{"id":65,"label":96,"slug":97,"rank":63,"group":98},"Account Setup","account-setup",{"id":65,"label":66,"slug":67},{"id":100,"label":101,"slug":102,"rank":65,"group":103},5,"Sign Up","sign-up",{"id":65,"label":66,"slug":67},[105],{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":107},[],{"uuid":109,"title":90,"description":110,"canonical_path":29,"image":111,"width":54,"height":55,"image_alt":93,"kind":57,"patterns":112,"component_categories":129,"app":135},"82c1ed63-225b-4fb9-8815-74e262753203","Onboarding step where the user names their workspace and sets a workspace icon.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fclover_onboarding_c9f9b3b9_nicelydone.png",[113,121],{"id":114,"label":115,"slug":116,"rank":63,"group":117},74,"Onboarding Checklist","onboarding-checklist",{"id":118,"label":119,"slug":120},7,"Onboarding & Education","onboarding-and-education",{"id":122,"label":123,"slug":124,"rank":65,"group":125},71,"Workspace Switcher","workspace-switcher",{"id":126,"label":127,"slug":128},6,"Navigation & Commands","navigation-and-commands",[130,134],{"id":131,"title":132,"slug":133},169,"Avatar","avatar",{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":136},[],{"uuid":138,"title":90,"description":139,"canonical_path":29,"image":140,"width":54,"height":55,"image_alt":93,"kind":57,"patterns":141,"component_categories":152,"app":154},"a79df9a3-198f-475f-8de1-5a24452ed8f2","Onboarding step where the user customizes their editor by selecting a light or dark theme and a highlight color.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fclover_onboarding-password-reset_b4bec89a_nicelydone.png",[142,144],{"id":65,"label":96,"slug":97,"rank":63,"group":143},{"id":65,"label":66,"slug":67},{"id":145,"label":146,"slug":147,"rank":65,"group":148},102,"Settings","settings",{"id":149,"label":150,"slug":151},10,"Settings & Admin","settings-and-admin",[153],{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":155},[],{"uuid":157,"title":90,"description":158,"canonical_path":29,"image":159,"width":54,"height":55,"image_alt":93,"kind":57,"patterns":160,"component_categories":166,"app":168},"9d7ed2ac-8ca2-4b28-bcbd-3812e57e86a4","Onboarding screen where the user reads an alpha disclaimer and clicks start to enter the workspace.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fclover_onboarding_c2b3e0f8_nicelydone.png",[161],{"id":162,"label":163,"slug":164,"rank":63,"group":165},77,"Welcome","welcome",{"id":118,"label":119,"slug":120},[167],{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":169},[],{"uuid":171,"title":172,"description":173,"canonical_path":29,"image":174,"width":54,"height":55,"image_alt":175,"kind":57,"patterns":176,"component_categories":199,"app":201},"7ea23641-5ad9-4806-99b1-7d8071f64681","Welcome to Clover! - Bertrand","Design editor where the user learns how to navigate the infinite canvas, use drawing tools, and add text blocks via an interactive welcome document.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fclover_home-product-logged-detail-page-single-page_3b66e4da_nicelydone.png","Welcome to Clover! - Bertrand from Clover",[177,179,186,191],{"id":162,"label":163,"slug":164,"rank":63,"group":178},{"id":118,"label":119,"slug":120},{"id":180,"label":181,"slug":182,"rank":65,"group":183},55,"Design Editor","design-editor",{"id":100,"label":184,"slug":185},"Media & Tools","media-and-tools",{"id":187,"label":188,"slug":189,"rank":60,"group":190},72,"Getting Started","getting-started",{"id":118,"label":119,"slug":120},{"id":192,"label":193,"slug":194,"rank":195,"group":196},24,"Share","share",3,{"id":60,"label":197,"slug":198},"Actions","actions",[200],{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":202},[],{"uuid":204,"title":172,"description":205,"canonical_path":29,"image":206,"width":54,"height":55,"image_alt":175,"kind":57,"patterns":207,"component_categories":214,"app":219},"e0b84e46-c6bb-48b2-aa71-f606562e23e9","Whiteboard canvas editor where the user explores a welcome document explaining how to use the surface, text, and drawing tools, with a share menu open.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fclover_share-dropdown-other-states_e46fc1ae_nicelydone.png",[208,210,212],{"id":162,"label":163,"slug":164,"rank":63,"group":209},{"id":118,"label":119,"slug":120},{"id":180,"label":181,"slug":182,"rank":65,"group":211},{"id":100,"label":184,"slug":185},{"id":192,"label":193,"slug":194,"rank":60,"group":213},{"id":60,"label":197,"slug":198},[215],{"id":216,"title":217,"slug":218},214,"Popover","popover",{"slug":36,"title":35,"logo":38,"categories":220},[],{"uuid":222,"title":172,"description":223,"canonical_path":29,"image":224,"width":54,"height":55,"image_alt":175,"kind":57,"patterns":225,"component_categories":240,"app":246},"74220b93-fee8-4c14-83ac-f3af0fc7fff3","Whiteboard editor where the user learns how to navigate the canvas, write text, and use drawing tools during onboarding.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fclover_settings_42d180be_nicelydone.png",[226,231,236,238],{"id":227,"label":228,"slug":229,"rank":63,"group":230},73,"Guided Tour","guided-tour",{"id":118,"label":119,"slug":120},{"id":232,"label":233,"slug":234,"rank":65,"group":235},56,"Drawing","drawing",{"id":100,"label":184,"slug":185},{"id":162,"label":163,"slug":164,"rank":60,"group":237},{"id":118,"label":119,"slug":120},{"id":180,"label":181,"slug":182,"rank":195,"group":239},{"id":100,"label":184,"slug":185},[241,245],{"id":242,"title":243,"slug":244},277,"Button group","button-group",{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":247},[],{"uuid":249,"title":172,"description":250,"canonical_path":29,"image":251,"width":54,"height":55,"image_alt":175,"kind":57,"patterns":252,"component_categories":259,"app":262},"c6ec38d4-6e08-4a02-b6cf-b556b740860e","Whiteboard editor where the user views an interactive welcome document explaining canvas navigation, writing, and drawing tools.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fclover_actions_40f71696_nicelydone.png",[253,255,257],{"id":162,"label":163,"slug":164,"rank":63,"group":254},{"id":118,"label":119,"slug":120},{"id":180,"label":181,"slug":182,"rank":65,"group":256},{"id":100,"label":184,"slug":185},{"id":192,"label":193,"slug":194,"rank":60,"group":258},{"id":60,"label":197,"slug":198},[260,261],{"id":242,"title":243,"slug":244},{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":263},[],{"uuid":265,"title":172,"description":266,"canonical_path":29,"image":267,"width":54,"height":55,"image_alt":175,"kind":57,"patterns":268,"component_categories":278,"app":282},"8a5c8ac5-5c21-4b56-a8ef-bf203705931c","Whiteboard editor where the user is formatting a text block using a floating toolbar amidst sticky notes and hand-drawn arrows.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fclover_content-editor_63f3196e_nicelydone.png",[269,271,276],{"id":180,"label":181,"slug":182,"rank":63,"group":270},{"id":100,"label":184,"slug":185},{"id":272,"label":273,"slug":274,"rank":65,"group":275},11,"Edit","edit",{"id":60,"label":197,"slug":198},{"id":192,"label":193,"slug":194,"rank":60,"group":277},{"id":60,"label":197,"slug":198},[279,280,281],{"id":242,"title":243,"slug":244},{"id":131,"title":132,"slug":133},{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":283},[],{"uuid":285,"title":172,"description":286,"canonical_path":29,"image":287,"width":54,"height":55,"image_alt":175,"kind":57,"patterns":288,"component_categories":295,"app":301},"2c84a1ee-02b9-43e4-ae06-bcc206be48aa","Design editor where the user organizes brainstorming ideas on an infinite canvas with text blocks, sticky notes, and drawing tools, currently interacting with an object's context menu.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fclover_actions_6d43c3fe_nicelydone.png",[289,291,293],{"id":180,"label":181,"slug":182,"rank":63,"group":290},{"id":100,"label":184,"slug":185},{"id":272,"label":273,"slug":274,"rank":65,"group":292},{"id":60,"label":197,"slug":198},{"id":192,"label":193,"slug":194,"rank":60,"group":294},{"id":60,"label":197,"slug":198},[296,300],{"id":297,"title":298,"slug":299},240,"Horizontal navigation","horizontal-navigation",{"id":131,"title":132,"slug":133},{"slug":36,"title":35,"logo":38,"categories":302},[],{"family":304,"examples":305},"pages",[],[307,309,311,314,317,320,322,326,330,334],{"label":308,"to":29},"Clover product screens",{"label":310,"to":32},"Clover marketing pages",{"label":312,"to":313},"Clover user flows","\u002Fexamples\u002Fapps\u002Fclover\u002Fflows",{"label":315,"to":316},"Clover UI components","\u002Fexamples\u002Fapps\u002Fclover\u002Fcomponents",{"label":318,"to":319},"Knowledge Management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fknowledge-management",{"label":321,"to":18},"All SaaS app examples",{"label":323,"to":324,"description":325},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":327,"to":328,"description":329},"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":331,"to":332,"description":333},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":335,"to":336,"description":337},"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":339,"updated_at":340},"2020-12-08T19:10:00.000Z","2026-09-13T13:02:39.000Z"]