[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Froadmap\u002Fcomponents":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":103,"links":104,"dates":138},"\u002Fexamples\u002Fapps\u002Froadmap\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Roadmap UI components examples - Nicelydone","Browse Roadmap UI component design examples. Preview individual interface elements and explore related component categories. Project forecasting app for teams","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F52e77d87-e589-4434-a089-d09af8ea1c85.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},"Roadmap design examples","\u002Fexamples\u002Fapps\u002Froadmap",{"label":23,"to":4},"Roadmap UI components 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},"Roadmap","roadmap","Project forecasting app for teams","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Froadmap-8fab2b0c.png","http:\u002F\u002Fonroadmap.com",[35,39],{"id":36,"title":37,"slug":38},29,"Task Management","task-management",{"id":40,"title":41,"slug":42},30,"Productivity","productivity",[44,59,74,88],{"uuid":45,"title":46,"description":47,"canonical_path":4,"image":11,"width":48,"height":49,"image_alt":50,"kind":51,"categories":52,"app":57},"b32965e2-0e07-4c94-a1a0-821f134e7b33","Integration toggle","A section for integrations featuring a toggle switch to connect to Slack.",1216,385,"Integration toggle from Roadmap","component",[53],{"id":54,"title":55,"slug":56},236,"Toggle\u002FSwitch","toggle-switch",{"slug":30,"title":29,"logo":32,"categories":58},[],{"uuid":60,"title":61,"description":62,"canonical_path":4,"image":63,"width":64,"height":65,"image_alt":66,"kind":51,"categories":67,"app":72},"00db66d3-bd4f-46ca-8ce0-27b08dfca2e1","Team member list item","A list item displaying a team member's avatar, name, email address, and their role within the team.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F74d01074-abaf-404c-bb04-92b99a4a2fa3.png",1090,223,"Team member list item from Roadmap",[68],{"id":69,"title":70,"slug":71},169,"Avatar","avatar",{"slug":30,"title":29,"logo":32,"categories":73},[],{"uuid":75,"title":76,"description":77,"canonical_path":4,"image":78,"width":48,"height":79,"image_alt":80,"kind":51,"categories":81,"app":86},"9e83d239-1213-4630-b538-1ad85eb80507","Privacy toggle group","A segmented control for selecting project privacy settings, with options for Team, Private, and Public.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8082fc33-c445-4452-97d8-0a4b98ca978e.png",396,"Privacy toggle group from Roadmap",[82],{"id":83,"title":84,"slug":85},179,"Checkbox & radio","checkbox-radio",{"slug":30,"title":29,"logo":32,"categories":87},[],{"uuid":89,"title":90,"description":91,"canonical_path":4,"image":92,"width":93,"height":94,"image_alt":95,"kind":51,"categories":96,"app":101},"9b30b860-facd-4c4c-8810-01da09e71595","Settings Tabs","A horizontal tab navigation component with three options: Account, Notifications, and Password. The 'Account' tab is currently selected, indicated by a blue underline.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9d4b787e-e50b-4fad-bc8e-76b400432bec.png",1089,199,"Settings Tabs from Roadmap",[97],{"id":98,"title":99,"slug":100},233,"Tabs","tabs",{"slug":30,"title":29,"logo":32,"categories":102},[],[],[105,108,111,114,117,120,122,126,130,134],{"label":106,"to":107},"Roadmap product screens","\u002Fexamples\u002Fapps\u002Froadmap\u002Fscreens",{"label":109,"to":110},"Roadmap marketing pages","\u002Fexamples\u002Fapps\u002Froadmap\u002Fmarketing",{"label":112,"to":113},"Roadmap user flows","\u002Fexamples\u002Fapps\u002Froadmap\u002Fflows",{"label":115,"to":116},"Task Management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ftask-management",{"label":118,"to":119},"Productivity app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fproductivity",{"label":121,"to":18},"All SaaS app examples",{"label":123,"to":124,"description":125},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":127,"to":128,"description":129},"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":131,"to":132,"description":133},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":135,"to":136,"description":137},"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":139,"updated_at":140},"2017-01-17T15:35:00.000Z","2026-09-13T13:02:39.000Z"]