[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Friot\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":369,"links":370,"dates":425},"\u002Fexamples\u002Fapps\u002Friot\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Riot product screens examples - Nicelydone","Browse Riot screen design examples. Preview the interface screenshots and explore related UI patterns. Get your team ready for phishing attacks","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_sign-in_ec16b21d_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},"Riot design examples","\u002Fexamples\u002Fapps\u002Friot",{"label":23,"to":4},"Riot 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},"Riot","riot","Get your team ready for phishing attacks","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Friot-1c50b780.png","https:\u002F\u002Ftryriot.com",[35],{"id":36,"title":37,"slug":38},78,"Security","security",[40,69,90,134,164,195,220,249,278,307,325,347],{"uuid":41,"title":42,"description":43,"canonical_path":4,"image":11,"width":44,"height":45,"image_alt":46,"kind":47,"patterns":48,"component_categories":58,"app":67},"0668c86c-7b9b-4a22-8a1f-5eb0a60e2e45","Sign in • Riot","Sign-in screen where the user authenticates using their Google or Slack account.",3072,1654,"Sign in • Riot from Riot","screen",[49],{"id":50,"label":51,"slug":52,"rank":53,"group":54},4,"Sign In","sign-in",0,{"id":55,"label":56,"slug":57},1,"Access & Account","access-and-account",[59,63],{"id":60,"title":61,"slug":62},174,"Card","card",{"id":64,"title":65,"slug":66},175,"Button","button",{"slug":30,"title":29,"logo":32,"categories":68},[],{"uuid":70,"title":71,"description":72,"canonical_path":4,"image":73,"width":44,"height":45,"image_alt":74,"kind":47,"patterns":75,"component_categories":85,"app":88},"607504f8-5044-4aa9-b8d2-e0272631d53c","Sign up • Riot","Sign-up screen where the user authenticates with Google or Slack to upgrade their team's security.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_sign-up_b8827dc6_nicelydone.png","Sign up • Riot from Riot",[76,81],{"id":77,"label":78,"slug":79,"rank":53,"group":80},5,"Sign Up","sign-up",{"id":55,"label":56,"slug":57},{"id":55,"label":82,"slug":83,"rank":55,"group":84},"Account Setup","account-setup",{"id":55,"label":56,"slug":57},[86,87],{"id":60,"title":61,"slug":62},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":89},[],{"uuid":91,"title":92,"description":93,"canonical_path":4,"image":94,"width":44,"height":45,"image_alt":95,"kind":47,"patterns":96,"component_categories":117,"app":132},"ea729185-0801-46ec-abb6-d73b64959391","Configuration de votre compte • Riot","Onboarding screen where the user chooses to either create a new workspace for their team or join an existing one.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_onboarding_ffc35711_nicelydone.png","Configuration de votre compte • Riot from Riot",[97,105,112],{"id":98,"label":99,"slug":100,"rank":53,"group":101},75,"Setup Wizard","setup-wizard",{"id":102,"label":103,"slug":104},7,"Onboarding & Education","onboarding-and-education",{"id":102,"label":106,"slug":107,"rank":55,"group":108},"Add & Create","add-and-create",{"id":109,"label":110,"slug":111},2,"Actions","actions",{"id":113,"label":114,"slug":115,"rank":109,"group":116},77,"Welcome","welcome",{"id":102,"label":103,"slug":104},[118,122,123,124,128],{"id":119,"title":120,"slug":121},226,"Skeleton","skeleton",{"id":60,"title":61,"slug":62},{"id":64,"title":65,"slug":66},{"id":125,"title":126,"slug":127},169,"Avatar","avatar",{"id":129,"title":130,"slug":131},260,"Badge","badge",{"slug":30,"title":29,"logo":32,"categories":133},[],{"uuid":135,"title":92,"description":136,"canonical_path":4,"image":137,"width":44,"height":45,"image_alt":95,"kind":47,"patterns":138,"component_categories":154,"app":162},"5dfab839-830b-4a1b-abf2-8a652ca475d3","Onboarding step where the user chooses to either create a new workspace or join an existing one.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_onboarding_9b1d55d4_nicelydone.png",[139,141,143,151],{"id":98,"label":99,"slug":100,"rank":53,"group":140},{"id":102,"label":103,"slug":104},{"id":55,"label":82,"slug":83,"rank":55,"group":142},{"id":55,"label":56,"slug":57},{"id":144,"label":145,"slug":146,"rank":109,"group":147},104,"Team Management","team-management",{"id":148,"label":149,"slug":150},10,"Settings & Admin","settings-and-admin",{"id":113,"label":114,"slug":115,"rank":152,"group":153},3,{"id":102,"label":103,"slug":104},[155,159,160,161],{"id":156,"title":157,"slug":158},167,"Alert","alert",{"id":119,"title":120,"slug":121},{"id":60,"title":61,"slug":62},{"id":125,"title":126,"slug":127},{"slug":30,"title":29,"logo":32,"categories":163},[],{"uuid":165,"title":166,"description":167,"canonical_path":4,"image":168,"width":44,"height":45,"image_alt":169,"kind":47,"patterns":170,"component_categories":185,"app":193},"1a014e43-5eb3-4061-bda7-ee70f98f111b","Get started (Nicelydone) • Riot","Onboarding screen where the user completes a five-step setup checklist, currently prompting them to import employees via Google or Slack.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_onboarding_5601c10f_nicelydone.png","Get started (Nicelydone) • Riot from Riot",[171,176,178,183],{"id":172,"label":173,"slug":174,"rank":53,"group":175},74,"Onboarding Checklist","onboarding-checklist",{"id":102,"label":103,"slug":104},{"id":144,"label":145,"slug":146,"rank":55,"group":177},{"id":148,"label":149,"slug":150},{"id":179,"label":180,"slug":181,"rank":109,"group":182},72,"Getting Started","getting-started",{"id":102,"label":103,"slug":104},{"id":98,"label":99,"slug":100,"rank":152,"group":184},{"id":102,"label":103,"slug":104},[186,190,191,192],{"id":187,"title":188,"slug":189},227,"Stepper","stepper",{"id":125,"title":126,"slug":127},{"id":64,"title":65,"slug":66},{"id":129,"title":130,"slug":131},{"slug":30,"title":29,"logo":32,"categories":194},[],{"uuid":196,"title":197,"description":198,"canonical_path":4,"image":199,"width":44,"height":45,"image_alt":200,"kind":47,"patterns":201,"component_categories":213,"app":218},"1b5eefb8-b15b-4a98-8612-cfcc7d89361e","Sync your team (Nicelydone) • Riot","Onboarding step where the user is prompted to sync their team by connecting Google or Slack.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_onboarding_3361ef66_nicelydone.png","Sync your team (Nicelydone) • Riot from Riot",[202,204,206,208],{"id":144,"label":145,"slug":146,"rank":53,"group":203},{"id":148,"label":149,"slug":150},{"id":55,"label":82,"slug":83,"rank":55,"group":205},{"id":55,"label":56,"slug":57},{"id":172,"label":173,"slug":174,"rank":109,"group":207},{"id":102,"label":103,"slug":104},{"id":209,"label":210,"slug":211,"rank":152,"group":212},97,"Integrations","integrations",{"id":148,"label":149,"slug":150},[214,215,216,217],{"id":60,"title":61,"slug":62},{"id":125,"title":126,"slug":127},{"id":64,"title":65,"slug":66},{"id":129,"title":130,"slug":131},{"slug":30,"title":29,"logo":32,"categories":219},[],{"uuid":221,"title":197,"description":222,"canonical_path":4,"image":223,"width":44,"height":45,"image_alt":200,"kind":47,"patterns":224,"component_categories":241,"app":247},"696ef8ce-1168-47c8-968b-d41f8fcbba0f","Onboarding step where the user is prompted to sync their team from Google or Slack, currently showing an integration error.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_notifications_88c36c19_nicelydone.png",[225,233,235,237,239],{"id":226,"label":227,"slug":228,"rank":53,"group":229},116,"Error","error",{"id":230,"label":231,"slug":232},12,"States & Feedback","states-and-feedback",{"id":144,"label":145,"slug":146,"rank":55,"group":234},{"id":148,"label":149,"slug":150},{"id":209,"label":210,"slug":211,"rank":109,"group":236},{"id":148,"label":149,"slug":150},{"id":98,"label":99,"slug":100,"rank":152,"group":238},{"id":102,"label":103,"slug":104},{"id":55,"label":82,"slug":83,"rank":50,"group":240},{"id":55,"label":56,"slug":57},[242,243,244,245,246],{"id":119,"title":120,"slug":121},{"id":60,"title":61,"slug":62},{"id":125,"title":126,"slug":127},{"id":64,"title":65,"slug":66},{"id":129,"title":130,"slug":131},{"slug":30,"title":29,"logo":32,"categories":248},[],{"uuid":250,"title":166,"description":251,"canonical_path":4,"image":252,"width":44,"height":45,"image_alt":169,"kind":47,"patterns":253,"component_categories":267,"app":276},"737ebe0c-0b2e-4b08-b061-fed06ca4ce55","Onboarding page where the user completes a setup checklist to import employees from Google or Slack and activate awareness programs.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_navigation_6882e358_nicelydone.png",[254,256,258,260,262],{"id":172,"label":173,"slug":174,"rank":53,"group":255},{"id":102,"label":103,"slug":104},{"id":144,"label":145,"slug":146,"rank":55,"group":257},{"id":148,"label":149,"slug":150},{"id":98,"label":99,"slug":100,"rank":109,"group":259},{"id":102,"label":103,"slug":104},{"id":55,"label":82,"slug":83,"rank":152,"group":261},{"id":55,"label":56,"slug":57},{"id":263,"label":264,"slug":265,"rank":50,"group":266},15,"Import & Export","import-and-export",{"id":109,"label":110,"slug":111},[268,272,273,274,275],{"id":269,"title":270,"slug":271},168,"Accordion","accordion",{"id":187,"title":188,"slug":189},{"id":125,"title":126,"slug":127},{"id":64,"title":65,"slug":66},{"id":129,"title":130,"slug":131},{"slug":30,"title":29,"logo":32,"categories":277},[],{"uuid":279,"title":280,"description":281,"canonical_path":4,"image":282,"width":44,"height":45,"image_alt":283,"kind":47,"patterns":284,"component_categories":301,"app":305},"ca6ade87-c4ff-4356-846d-fa58d2b430ad","Profile (Bertrand Bruandet) • Riot","Settings page where the user configures their personal profile details, including name, email, language, and notification preferences.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_settings-profile_ef94f671_nicelydone.png","Profile (Bertrand Bruandet) • Riot from Riot",[285,292,297],{"id":152,"label":286,"slug":287,"rank":53,"group":288},"Profile","profile",{"id":289,"label":290,"slug":291},11,"Social & Collaboration","social-and-collaboration",{"id":293,"label":294,"slug":295,"rank":55,"group":296},94,"Account Settings","account-settings",{"id":148,"label":149,"slug":150},{"id":289,"label":298,"slug":299,"rank":109,"group":300},"Edit","edit",{"id":109,"label":110,"slug":111},[302,303,304],{"id":125,"title":126,"slug":127},{"id":64,"title":65,"slug":66},{"id":129,"title":130,"slug":131},{"slug":30,"title":29,"logo":32,"categories":306},[],{"uuid":308,"title":197,"description":309,"canonical_path":4,"image":310,"width":44,"height":45,"image_alt":200,"kind":47,"patterns":311,"component_categories":317,"app":323},"a4ba98d7-f1ba-44b7-bb93-74ae09e50dc7","Onboarding step where the user sees that Slack is synced and is prompted to connect Google Workspace to improve their experience.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_onboarding_8f3fedef_nicelydone.png",[312],{"id":313,"label":314,"slug":315,"rank":53,"group":316},133,"Invite Teammates","invite-teammates",{"id":109,"label":110,"slug":111},[318,319,320,321,322],{"id":119,"title":120,"slug":121},{"id":60,"title":61,"slug":62},{"id":125,"title":126,"slug":127},{"id":64,"title":65,"slug":66},{"id":129,"title":130,"slug":131},{"slug":30,"title":29,"logo":32,"categories":324},[],{"uuid":326,"title":327,"description":328,"canonical_path":4,"image":329,"width":44,"height":45,"image_alt":330,"kind":47,"patterns":331,"component_categories":339,"app":345},"c754849f-3f98-45ae-bf9b-6cd71060ca9e","Baseline campaign on all employees. campaign modification (Nicelydone) • Riot","Campaign creation screen where the user configures delivery schedule, audience targeting, and templates before launching.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_create-settings_08b35f01_nicelydone.png","Baseline campaign on all employees. campaign modification (Nicelydone) • Riot from Riot",[332,334],{"id":289,"label":298,"slug":299,"rank":53,"group":333},{"id":109,"label":110,"slug":111},{"id":335,"label":336,"slug":337,"rank":55,"group":338},17,"Publish","publish",{"id":109,"label":110,"slug":111},[340,341,342,343,344],{"id":156,"title":157,"slug":158},{"id":60,"title":61,"slug":62},{"id":125,"title":126,"slug":127},{"id":64,"title":65,"slug":66},{"id":129,"title":130,"slug":131},{"slug":30,"title":29,"logo":32,"categories":346},[],{"uuid":348,"title":327,"description":349,"canonical_path":4,"image":350,"width":44,"height":45,"image_alt":330,"kind":47,"patterns":351,"component_categories":362,"app":367},"059d5fbf-5c24-4821-9f7a-8c2ae271d18a","Campaign creation page where the user configures delivery timing, selects the target audience, and chooses templates before launching.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Friot_create-dropdown-other-states_e7417778_nicelydone.png",[352,354],{"id":289,"label":298,"slug":299,"rank":53,"group":353},{"id":109,"label":110,"slug":111},{"id":355,"label":356,"slug":357,"rank":55,"group":358},129,"Workflow Builder","workflow-builder",{"id":359,"label":360,"slug":361},13,"Workflow & Automation","workflow-and-automation",[363,364,365,366],{"id":156,"title":157,"slug":158},{"id":60,"title":61,"slug":62},{"id":64,"title":65,"slug":66},{"id":129,"title":130,"slug":131},{"slug":30,"title":29,"logo":32,"categories":368},[],[],[371,373,375,377,379,381,383,385,387,389,391,393,395,398,401,404,407,409,413,417,421],{"label":82,"to":372},"\u002Fexamples\u002Fscreens\u002Faccount-setup",{"label":99,"to":374},"\u002Fexamples\u002Fscreens\u002Fsetup-wizard",{"label":145,"to":376},"\u002Fexamples\u002Fscreens\u002Fteam-management",{"label":298,"to":378},"\u002Fexamples\u002Fscreens\u002Fedit",{"label":173,"to":380},"\u002Fexamples\u002Fscreens\u002Fonboarding-checklist",{"label":210,"to":382},"\u002Fexamples\u002Fscreens\u002Fintegrations",{"label":114,"to":384},"\u002Fexamples\u002Fscreens\u002Fwelcome",{"label":294,"to":386},"\u002Fexamples\u002Fscreens\u002Faccount-settings",{"label":106,"to":388},"\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":227,"to":390},"\u002Fexamples\u002Fscreens\u002Ferror",{"label":180,"to":392},"\u002Fexamples\u002Fscreens\u002Fgetting-started",{"label":264,"to":394},"\u002Fexamples\u002Fscreens\u002Fimport-and-export",{"label":396,"to":397},"Riot marketing pages","\u002Fexamples\u002Fapps\u002Friot\u002Fmarketing",{"label":399,"to":400},"Riot user flows","\u002Fexamples\u002Fapps\u002Friot\u002Fflows",{"label":402,"to":403},"Riot UI components","\u002Fexamples\u002Fapps\u002Friot\u002Fcomponents",{"label":405,"to":406},"Security app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fsecurity",{"label":408,"to":18},"All SaaS app examples",{"label":410,"to":411,"description":412},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":414,"to":415,"description":416},"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":418,"to":419,"description":420},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":422,"to":423,"description":424},"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":426,"updated_at":427},"2020-06-16T13:30:14.000Z","2026-09-13T13:02:39.000Z"]