[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fwith\u002Fscreens":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":39,"showcases":307,"links":308,"dates":363},"\u002Fexamples\u002Fapps\u002Fwith\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"With product screens examples - Nicelydone","Browse With screen design examples. Preview the interface screenshots and explore related UI patterns. A virtual office for your remote team.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fwith_sign-in_cb7bf818_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},"With design examples","\u002Fexamples\u002Fapps\u002Fwith",{"label":23,"to":4},"With 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},"With","with","A virtual office for your remote team.","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fwith-c7410535.png","https:\u002F\u002Fwith.so\u002F",[35],{"id":36,"title":37,"slug":38},23,"Collaboration","collaboration",[40,64,82,95,112,139,158,184,208,234,256,272],{"uuid":41,"title":29,"description":42,"canonical_path":4,"image":11,"width":43,"height":44,"image_alt":45,"kind":46,"patterns":47,"component_categories":57,"app":62},"f35ecdf6-a6aa-4236-89f5-2c10a06b020e","Sign-in screen where the user enters their email address to authenticate, featuring a large decorative key illustration on the right.",3072,1654,"With from With","screen",[48],{"id":49,"label":50,"slug":51,"rank":52,"group":53},4,"Sign In","sign-in",0,{"id":54,"label":55,"slug":56},1,"Access & Account","access-and-account",[58],{"id":59,"title":60,"slug":61},175,"Button","button",{"slug":30,"title":29,"logo":32,"categories":63},[],{"uuid":65,"title":29,"description":66,"canonical_path":4,"image":67,"width":43,"height":44,"image_alt":45,"kind":46,"patterns":68,"component_categories":78,"app":80},"b93d82ed-8cdd-4c21-a75c-0e325a316a64","Sign-up screen where the user enters their name and email to join the early access program, featuring a large thematic illustration.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fwith_sign-up_d0c1e464_nicelydone.png",[69,74],{"id":70,"label":71,"slug":72,"rank":52,"group":73},5,"Sign Up","sign-up",{"id":54,"label":55,"slug":56},{"id":54,"label":75,"slug":76,"rank":54,"group":77},"Account Setup","account-setup",{"id":54,"label":55,"slug":56},[79],{"id":59,"title":60,"slug":61},{"slug":30,"title":29,"logo":32,"categories":81},[],{"uuid":83,"title":29,"description":84,"canonical_path":4,"image":85,"width":43,"height":44,"image_alt":45,"kind":46,"patterns":86,"component_categories":92,"app":93},"418416d2-baef-45ec-9c02-519a75d625d0","Verification screen where the user is instructed to check their email for a confirmation link.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fwith_sign-up_16e06517_nicelydone.png",[87],{"id":88,"label":89,"slug":90,"rank":52,"group":91},6,"Verification","verification",{"id":54,"label":55,"slug":56},[],{"slug":30,"title":29,"logo":32,"categories":94},[],{"uuid":96,"title":29,"description":97,"canonical_path":4,"image":98,"width":43,"height":44,"image_alt":45,"kind":46,"patterns":99,"component_categories":108,"app":110},"ee152f07-19a1-4b09-a97a-dbd90aa8b5db","Onboarding step where the user names their new room, with a pre-filled suggestion provided.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fwith_create_onboarding_94cef08f_nicelydone.png",[100],{"id":101,"label":102,"slug":103,"rank":52,"group":104},75,"Setup Wizard","setup-wizard",{"id":105,"label":106,"slug":107},7,"Onboarding & Education","onboarding-and-education",[109],{"id":59,"title":60,"slug":61},{"slug":30,"title":29,"logo":32,"categories":111},[],{"uuid":113,"title":29,"description":114,"canonical_path":4,"image":115,"width":43,"height":44,"image_alt":45,"kind":46,"patterns":116,"component_categories":135,"app":137},"eefa2738-e0ec-4dee-a9bc-cefc9e994582","Onboarding step where the user invites teammates by entering an email address, with an option to skip.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fwith_team_onboarding_1d5fe5a7_nicelydone.png",[117,125,133],{"id":118,"label":119,"slug":120,"rank":52,"group":121},133,"Invite Teammates","invite-teammates",{"id":122,"label":123,"slug":124},2,"Actions","actions",{"id":126,"label":127,"slug":128,"rank":54,"group":129},104,"Team Management","team-management",{"id":130,"label":131,"slug":132},10,"Settings & Admin","settings-and-admin",{"id":54,"label":75,"slug":76,"rank":122,"group":134},{"id":54,"label":55,"slug":56},[136],{"id":59,"title":60,"slug":61},{"slug":30,"title":29,"logo":32,"categories":138},[],{"uuid":140,"title":29,"description":141,"canonical_path":4,"image":142,"width":43,"height":44,"image_alt":45,"kind":46,"patterns":143,"component_categories":150,"app":156},"33d9d03f-de4e-4e03-bc50-0afd33d7ba5b","Onboarding step where the user invites teammates by entering their email addresses, viewing a list of pending invites below.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fwith_team_onboarding_44571e44_nicelydone.png",[144,146,148],{"id":118,"label":119,"slug":120,"rank":52,"group":145},{"id":122,"label":123,"slug":124},{"id":101,"label":102,"slug":103,"rank":54,"group":147},{"id":105,"label":106,"slug":107},{"id":126,"label":127,"slug":128,"rank":122,"group":149},{"id":130,"label":131,"slug":132},[151,155],{"id":152,"title":153,"slug":154},169,"Avatar","avatar",{"id":59,"title":60,"slug":61},{"slug":30,"title":29,"logo":32,"categories":157},[],{"uuid":159,"title":29,"description":160,"canonical_path":4,"image":161,"width":43,"height":162,"image_alt":45,"kind":46,"patterns":163,"component_categories":172,"app":182},"834c59de-1d10-4229-95a8-16f14341829e","Home screen where the user can create a new virtual room or join their existing rooms.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fwith_home-product-logged_ac65ecca_nicelydone.png",1726,[164],{"id":165,"label":166,"slug":167,"rank":52,"group":168},81,"Home","home",{"id":169,"label":170,"slug":171},8,"Pages & Content","pages-and-content",[173,177,181],{"id":174,"title":175,"slug":176},240,"Horizontal navigation","horizontal-navigation",{"id":178,"title":179,"slug":180},174,"Card","card",{"id":59,"title":60,"slug":61},{"slug":30,"title":29,"logo":32,"categories":183},[],{"uuid":185,"title":186,"description":187,"canonical_path":4,"image":188,"width":43,"height":162,"image_alt":189,"kind":46,"patterns":190,"component_categories":198,"app":206},"45763b2f-61ff-4efc-b4f0-451e9bf7d156","With interface screen","Home screen where the user can create a new room or access support, feedback, and legal links via an open user menu.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fwith_navigation_dropdown-other-states_ab7d5e86_nicelydone.png","Interface screen from With",[191,193],{"id":165,"label":166,"slug":167,"rank":52,"group":192},{"id":169,"label":170,"slug":171},{"id":194,"label":195,"slug":196,"rank":54,"group":197},94,"Account Settings","account-settings",{"id":130,"label":131,"slug":132},[199,203,204,205],{"id":200,"title":201,"slug":202},260,"Badge","badge",{"id":174,"title":175,"slug":176},{"id":178,"title":179,"slug":180},{"id":59,"title":60,"slug":61},{"slug":30,"title":29,"logo":32,"categories":207},[],{"uuid":209,"title":29,"description":210,"canonical_path":4,"image":211,"width":43,"height":162,"image_alt":45,"kind":46,"patterns":212,"component_categories":228,"app":232},"51577ba8-bc9a-46ff-9951-e6ec18aebae1","Home screen where the user can create a new room or manage their existing room, with options to invite members, rename, or delete the space.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fwith_actions_dropdown-other-states_60624b36_nicelydone.png",[213,215,217,222],{"id":165,"label":166,"slug":167,"rank":52,"group":214},{"id":169,"label":170,"slug":171},{"id":118,"label":119,"slug":120,"rank":54,"group":216},{"id":122,"label":123,"slug":124},{"id":218,"label":219,"slug":220,"rank":122,"group":221},11,"Edit","edit",{"id":122,"label":123,"slug":124},{"id":223,"label":224,"slug":225,"rank":226,"group":227},9,"Delete","delete",3,{"id":122,"label":123,"slug":124},[229,230,231],{"id":174,"title":175,"slug":176},{"id":178,"title":179,"slug":180},{"id":59,"title":60,"slug":61},{"slug":30,"title":29,"logo":32,"categories":233},[],{"uuid":235,"title":29,"description":236,"canonical_path":4,"image":237,"width":43,"height":162,"image_alt":45,"kind":46,"patterns":238,"component_categories":249,"app":254},"073dcdef-c73d-4ddc-bb08-2e11bcfd8ad4","List view where a confirmation modal requires the user to type the name of a design room to permanently delete it.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fwith_delete_modals-and-popovers_acc97108_nicelydone.png",[239,247],{"id":240,"label":241,"slug":242,"rank":52,"group":243},114,"Confirmation","confirmation",{"id":244,"label":245,"slug":246},12,"States & Feedback","states-and-feedback",{"id":223,"label":224,"slug":225,"rank":54,"group":248},{"id":122,"label":123,"slug":124},[250,251,252,253],{"id":200,"title":201,"slug":202},{"id":174,"title":175,"slug":176},{"id":178,"title":179,"slug":180},{"id":59,"title":60,"slug":61},{"slug":30,"title":29,"logo":32,"categories":255},[],{"uuid":257,"title":258,"description":259,"canonical_path":4,"image":260,"width":43,"height":162,"image_alt":261,"kind":46,"patterns":262,"component_categories":268,"app":270},"b234ec78-b8b6-43a1-a5a6-9f8e410e19c8","Bertrand's room ","Onboarding step where the user is prompted to grant microphone and camera access to their browser before proceeding.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fwith_settings_20c766c5_nicelydone.png","Bertrand's room  from With",[263],{"id":264,"label":265,"slug":266,"rank":52,"group":267},121,"Request Access","request-access",{"id":244,"label":245,"slug":246},[269],{"id":59,"title":60,"slug":61},{"slug":30,"title":29,"logo":32,"categories":271},[],{"uuid":273,"title":274,"description":275,"canonical_path":4,"image":276,"width":43,"height":162,"image_alt":277,"kind":46,"patterns":278,"component_categories":298,"app":305},"3025d433-c6e3-4a87-8246-f119e581d8bd","Bertrand's room","Pre-call lobby where the user sets their display name, tests their camera and microphone, and previews their avatar before entering a virtual room.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fwith_create_3d7d2da9_nicelydone.png","Bertrand's room from With",[279,281,288,293],{"id":54,"label":75,"slug":76,"rank":52,"group":280},{"id":54,"label":55,"slug":56},{"id":282,"label":283,"slug":284,"rank":54,"group":285},58,"Media Editor","media-editor",{"id":70,"label":286,"slug":287},"Media & Tools","media-and-tools",{"id":289,"label":290,"slug":291,"rank":122,"group":292},61,"Video Player","video-player",{"id":70,"label":286,"slug":287},{"id":294,"label":295,"slug":296,"rank":226,"group":297},77,"Welcome","welcome",{"id":105,"label":106,"slug":107},[299,303,304],{"id":300,"title":301,"slug":302},277,"Button group","button-group",{"id":152,"title":153,"slug":154},{"id":59,"title":60,"slug":61},{"slug":30,"title":29,"logo":32,"categories":306},[],[],[309,311,313,315,317,319,321,323,325,327,329,331,333,336,339,342,345,347,351,355,359],{"label":75,"to":310},"\u002Fexamples\u002Fscreens\u002Faccount-setup",{"label":166,"to":312},"\u002Fexamples\u002Fscreens\u002Fhome",{"label":119,"to":314},"\u002Fexamples\u002Fscreens\u002Finvite-teammates",{"label":224,"to":316},"\u002Fexamples\u002Fscreens\u002Fdelete",{"label":102,"to":318},"\u002Fexamples\u002Fscreens\u002Fsetup-wizard",{"label":127,"to":320},"\u002Fexamples\u002Fscreens\u002Fteam-management",{"label":195,"to":322},"\u002Fexamples\u002Fscreens\u002Faccount-settings",{"label":241,"to":324},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":219,"to":326},"\u002Fexamples\u002Fscreens\u002Fedit",{"label":283,"to":328},"\u002Fexamples\u002Fscreens\u002Fmedia-editor",{"label":265,"to":330},"\u002Fexamples\u002Fscreens\u002Frequest-access",{"label":50,"to":332},"\u002Fexamples\u002Fscreens\u002Fsign-in",{"label":334,"to":335},"With marketing pages","\u002Fexamples\u002Fapps\u002Fwith\u002Fmarketing",{"label":337,"to":338},"With user flows","\u002Fexamples\u002Fapps\u002Fwith\u002Fflows",{"label":340,"to":341},"With UI components","\u002Fexamples\u002Fapps\u002Fwith\u002Fcomponents",{"label":343,"to":344},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"label":346,"to":18},"All SaaS app examples",{"label":348,"to":349,"description":350},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":352,"to":353,"description":354},"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":356,"to":357,"description":358},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":360,"to":361,"description":362},"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":364,"updated_at":365},"2021-03-17T20:48:35.000Z","2026-09-13T13:02:39.000Z"]