[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fcontra\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":318,"links":319,"dates":377},"\u002Fexamples\u002Fapps\u002Fcontra\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Contra product screens examples - Nicelydone","Browse Contra screen design examples. Preview the interface screenshots and explore related UI patterns. A new way to work","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcontra_sign-in_1463373d_nicelydone.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},"Contra design examples","\u002Fexamples\u002Fapps\u002Fcontra",{"label":23,"to":4},"Contra 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},"Contra","contra","A new way to work","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcontra-90449cba.png","https:\u002F\u002Fcontra.com",[35,39],{"id":36,"title":37,"slug":38},18,"Marketplace","marketplace",{"id":40,"title":41,"slug":42},74,"Employment","employment",[44,73,90,115,162,190,208,232,248,269,285,298],{"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":71},"255a9fdf-12b4-4bb9-96aa-aee4c59db43c","Log in | Contra","Sign-in screen where the user enters their email to receive a magic login link, with a secondary prompt to sign up for a new account.",3072,1654,"Log in | Contra from Contra","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],{"id":64,"title":65,"slug":66},174,"Card","card",{"id":68,"title":69,"slug":70},175,"Button","button",{"slug":30,"title":29,"logo":32,"categories":72},[],{"uuid":74,"title":75,"description":76,"canonical_path":4,"image":77,"width":48,"height":49,"image_alt":78,"kind":51,"patterns":79,"component_categories":85,"app":88},"7f1a68f9-5ed9-4766-8421-ac1c89697f9e","Sign up | Contra","Sign-up screen where the user enters their name and email to join a professional network for flexible work.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcontra_sign-up_e7ce3a63_nicelydone.png","Sign up | Contra from Contra",[80],{"id":81,"label":82,"slug":83,"rank":57,"group":84},5,"Sign Up","sign-up",{"id":59,"label":60,"slug":61},[86,87],{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":89},[],{"uuid":91,"title":92,"description":93,"canonical_path":4,"image":94,"width":48,"height":49,"image_alt":95,"kind":51,"patterns":96,"component_categories":110,"app":113},"c2fe45bf-23d0-4963-958f-3e5b7d54d61d","Confirm your email | Contra","Verification screen where the user is instructed to check their email for a confirmation link, with an option to edit the address if needed.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcontra_sign-up_a6a6eb5e_nicelydone.png","Confirm your email | Contra from Contra",[97,102],{"id":98,"label":99,"slug":100,"rank":57,"group":101},6,"Verification","verification",{"id":59,"label":60,"slug":61},{"id":103,"label":104,"slug":105,"rank":59,"group":106},114,"Confirmation","confirmation",{"id":107,"label":108,"slug":109},12,"States & Feedback","states-and-feedback",[111,112],{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":114},[],{"uuid":116,"title":117,"description":118,"canonical_path":4,"image":119,"width":48,"height":49,"image_alt":120,"kind":51,"patterns":121,"component_categories":149,"app":160},"e33b6212-adf9-47ea-aec2-e9c507c7760d","Bertrand B | Contra","User profile page featuring a prominent floating checklist widget guiding the user through steps to unlock beta features.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcontra_onboarding_home-product-logged_8ef88a94_nicelydone.png","Bertrand B | Contra from Contra",[122,130,137,144],{"id":123,"label":124,"slug":125,"rank":57,"group":126},3,"Profile","profile",{"id":127,"label":128,"slug":129},11,"Social & Collaboration","social-and-collaboration",{"id":40,"label":131,"slug":132,"rank":59,"group":133},"Onboarding Checklist","onboarding-checklist",{"id":134,"label":135,"slug":136},7,"Onboarding & Education","onboarding-and-education",{"id":127,"label":138,"slug":139,"rank":140,"group":141},"Edit","edit",2,{"id":140,"label":142,"slug":143},"Actions","actions",{"id":145,"label":146,"slug":147,"rank":123,"group":148},72,"Getting Started","getting-started",{"id":134,"label":135,"slug":136},[150,154,158,159],{"id":151,"title":152,"slug":153},169,"Avatar","avatar",{"id":155,"title":156,"slug":157},240,"Horizontal navigation","horizontal-navigation",{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":161},[],{"uuid":163,"title":164,"description":165,"canonical_path":4,"image":166,"width":48,"height":167,"image_alt":168,"kind":51,"patterns":169,"component_categories":183,"app":188},"29a45754-6923-4a75-90a5-c7585acb9b4e","New project | Contra","Creation page where the user drafts a new project by adding a title, company, roles, tools, and collaborators before publishing.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcontra_create_2b946a22_nicelydone.png",1948,"New project | Contra from Contra",[170,175],{"id":171,"label":172,"slug":173,"rank":57,"group":174},133,"Invite Teammates","invite-teammates",{"id":140,"label":142,"slug":143},{"id":176,"label":177,"slug":178,"rank":59,"group":179},104,"Team Management","team-management",{"id":180,"label":181,"slug":182},10,"Settings & Admin","settings-and-admin",[184,185,186,187],{"id":151,"title":152,"slug":153},{"id":155,"title":156,"slug":157},{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":189},[],{"uuid":191,"title":164,"description":192,"canonical_path":4,"image":193,"width":48,"height":167,"image_alt":168,"kind":51,"patterns":194,"component_categories":201,"app":206},"a48d303d-a0e7-417c-986c-9270b12b9825","Creation page where the user inputs project details like company, year, roles, and tools used, and can add collaborators or content blocks.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcontra_create_5dfce5b2_nicelydone.png",[195,197,199],{"id":127,"label":138,"slug":139,"rank":57,"group":196},{"id":140,"label":142,"slug":143},{"id":171,"label":172,"slug":173,"rank":59,"group":198},{"id":140,"label":142,"slug":143},{"id":176,"label":177,"slug":178,"rank":140,"group":200},{"id":180,"label":181,"slug":182},[202,203,204,205],{"id":151,"title":152,"slug":153},{"id":155,"title":156,"slug":157},{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":207},[],{"uuid":209,"title":164,"description":210,"canonical_path":4,"image":211,"width":48,"height":49,"image_alt":168,"kind":51,"patterns":212,"component_categories":222,"app":230},"e802f7fc-b19f-493a-8a80-e42e2764bc8b","Create page where the user adds a new company or agency to their project via a modal form.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcontra_create_actions_modals-and-popovers_949549ce_nicelydone.png",[213,217],{"id":134,"label":214,"slug":215,"rank":57,"group":216},"Add & Create","add-and-create",{"id":140,"label":142,"slug":143},{"id":218,"label":219,"slug":220,"rank":59,"group":221},25,"Upload & Download","upload-and-download",{"id":140,"label":142,"slug":143},[223,227,228,229],{"id":224,"title":225,"slug":226},284,"Modal","modal",{"id":155,"title":156,"slug":157},{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":231},[],{"uuid":233,"title":164,"description":234,"canonical_path":4,"image":235,"width":48,"height":167,"image_alt":168,"kind":51,"patterns":236,"component_categories":241,"app":246},"7ddf54dd-5f75-43a2-8de5-e29c9d190d4e","Create page where the user builds a new project case study by entering details, tagging roles and tools, and inviting collaborators.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcontra_create_e4ec10de_nicelydone.png",[237,239],{"id":171,"label":172,"slug":173,"rank":57,"group":238},{"id":140,"label":142,"slug":143},{"id":176,"label":177,"slug":178,"rank":59,"group":240},{"id":180,"label":181,"slug":182},[242,243,244,245],{"id":151,"title":152,"slug":153},{"id":155,"title":156,"slug":157},{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":247},[],{"uuid":249,"title":164,"description":250,"canonical_path":4,"image":251,"width":48,"height":49,"image_alt":168,"kind":51,"patterns":252,"component_categories":262,"app":267},"57dfaaa9-bb83-4538-a153-972c274ecfc2","Project creation page where the user is prompted to add collaborators via a modal overlay to grow their network.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcontra_create_modals-and-popovers_team_74a8a03c_nicelydone.png",[253,255,257],{"id":171,"label":172,"slug":173,"rank":57,"group":254},{"id":140,"label":142,"slug":143},{"id":176,"label":177,"slug":178,"rank":59,"group":256},{"id":180,"label":181,"slug":182},{"id":258,"label":259,"slug":260,"rank":140,"group":261},22,"Search","search",{"id":140,"label":142,"slug":143},[263,264,265,266],{"id":224,"title":225,"slug":226},{"id":155,"title":156,"slug":157},{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":268},[],{"uuid":270,"title":164,"description":271,"canonical_path":4,"image":272,"width":48,"height":49,"image_alt":168,"kind":51,"patterns":273,"component_categories":278,"app":283},"1660ba45-34eb-4180-abe6-abfdb4c53ebe","Project creation page where the user is inviting a collaborator via email in a modal overlay.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcontra_create_modals-and-popovers_team_6f08f0c0_nicelydone.png",[274,276],{"id":171,"label":172,"slug":173,"rank":57,"group":275},{"id":140,"label":142,"slug":143},{"id":176,"label":177,"slug":178,"rank":59,"group":277},{"id":180,"label":181,"slug":182},[279,280,281,282],{"id":224,"title":225,"slug":226},{"id":155,"title":156,"slug":157},{"id":64,"title":65,"slug":66},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":284},[],{"uuid":286,"title":164,"description":287,"canonical_path":4,"image":288,"width":48,"height":49,"image_alt":168,"kind":51,"patterns":289,"component_categories":292,"app":296},"15ab899a-f290-4a86-965a-0bc9da838237","Modal overlay where the user invites a collaborator to a project by providing their name, email, roles, and a personal message.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcontra_create_modals-and-popovers_9a3f4b5d_nicelydone.png",[290],{"id":171,"label":172,"slug":173,"rank":57,"group":291},{"id":140,"label":142,"slug":143},[293,294,295],{"id":224,"title":225,"slug":226},{"id":155,"title":156,"slug":157},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":297},[],{"uuid":299,"title":164,"description":300,"canonical_path":4,"image":301,"width":48,"height":49,"image_alt":168,"kind":51,"patterns":302,"component_categories":312,"app":316},"60613058-b9f9-451c-976a-e8945246b84b","Modal where the user adds a collaborator to a project by entering their name, email, roles, and a personal message.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcontra_create_modals-and-popovers_team_98e814fe_nicelydone.png",[303,305,307],{"id":171,"label":172,"slug":173,"rank":57,"group":304},{"id":140,"label":142,"slug":143},{"id":176,"label":177,"slug":178,"rank":59,"group":306},{"id":180,"label":181,"slug":182},{"id":308,"label":309,"slug":310,"rank":140,"group":311},100,"Roles & Permissions","roles-and-permissions",{"id":180,"label":181,"slug":182},[313,314,315],{"id":224,"title":225,"slug":226},{"id":155,"title":156,"slug":157},{"id":68,"title":69,"slug":70},{"slug":30,"title":29,"logo":32,"categories":317},[],[],[320,322,324,326,328,330,332,334,336,338,340,342,344,347,350,353,356,359,361,365,369,373],{"label":172,"to":321},"\u002Fexamples\u002Fscreens\u002Finvite-teammates",{"label":177,"to":323},"\u002Fexamples\u002Fscreens\u002Fteam-management",{"label":138,"to":325},"\u002Fexamples\u002Fscreens\u002Fedit",{"label":214,"to":327},"\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":104,"to":329},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":146,"to":331},"\u002Fexamples\u002Fscreens\u002Fgetting-started",{"label":131,"to":333},"\u002Fexamples\u002Fscreens\u002Fonboarding-checklist",{"label":124,"to":335},"\u002Fexamples\u002Fscreens\u002Fprofile",{"label":309,"to":337},"\u002Fexamples\u002Fscreens\u002Froles-and-permissions",{"label":259,"to":339},"\u002Fexamples\u002Fscreens\u002Fsearch",{"label":55,"to":341},"\u002Fexamples\u002Fscreens\u002Fsign-in",{"label":82,"to":343},"\u002Fexamples\u002Fscreens\u002Fsign-up",{"label":345,"to":346},"Contra marketing pages","\u002Fexamples\u002Fapps\u002Fcontra\u002Fmarketing",{"label":348,"to":349},"Contra user flows","\u002Fexamples\u002Fapps\u002Fcontra\u002Fflows",{"label":351,"to":352},"Contra UI components","\u002Fexamples\u002Fapps\u002Fcontra\u002Fcomponents",{"label":354,"to":355},"Marketplace app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmarketplace",{"label":357,"to":358},"Employment app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Femployment",{"label":360,"to":18},"All SaaS app examples",{"label":362,"to":363,"description":364},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":366,"to":367,"description":368},"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":370,"to":371,"description":372},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":374,"to":375,"description":376},"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":378,"updated_at":379},"2021-03-30T08:37:59.000Z","2026-09-13T13:02:39.000Z"]