[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Foh-dear\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":45,"showcases":219,"links":220,"dates":254},"\u002Fexamples\u002Fapps\u002Foh-dear\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Oh Dear UI components examples - Nicelydone","Browse Oh Dear UI component design examples. Preview individual interface elements and explore related component categories. The all-in-one monitoring tool…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F46924ebb-7ca1-4282-9f4f-e9052cc7cedf.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},"Oh Dear design examples","\u002Fexamples\u002Fapps\u002Foh-dear",{"label":23,"to":4},"Oh Dear UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Oh Dear UI component design examples. Preview individual interface elements and explore related component categories. The all-in-one monitoring tool for your entire website",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Oh Dear","oh-dear","The all-in-one monitoring tool for your entire website","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Foh-dear-b9c711a0.png","https:\u002F\u002Fohdear.app","OhDearApp",[37,41],{"id":38,"title":39,"slug":40},48,"Developer Tools","developer-tools",{"id":42,"title":43,"slug":44},16,"Monitoring","monitoring",[46,61,76,90,105,120,135,150,165,179,194,204],{"uuid":47,"title":48,"description":49,"canonical_path":4,"image":11,"width":50,"height":51,"image_alt":52,"kind":53,"categories":54,"app":59},"3e67d9c2-6dae-40b1-a55f-8802d4d99704","Bento grid feature section","A bento grid layout displaying various features of a monitoring tool. Each card highlights a specific feature like uptime checking, notifications, certificate monitoring, and performance monitoring with a brief description, an illustration or UI snippet, and a 'Learn More' link.",2691,6065,"Bento grid feature section from Oh Dear","component",[55],{"id":56,"title":57,"slug":58},298,"Bento box","bento-grid",{"slug":31,"title":30,"logo":33,"categories":60},[],{"uuid":62,"title":63,"description":64,"canonical_path":4,"image":65,"width":66,"height":67,"image_alt":68,"kind":53,"categories":69,"app":74},"3b3eaac0-8ac1-4dea-81e4-a7ca1a7114f3","Number Input with Addon","A numeric input field with a label, a right-aligned unit addon, and helper text below.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3b3eaac0-8ac1-4dea-81e4-a7ca1a7114f3.png",1280,456,"Number Input with Addon from Oh Dear",[70],{"id":71,"title":72,"slug":73},257,"Input number","input-number",{"slug":31,"title":30,"logo":33,"categories":75},[],{"uuid":77,"title":78,"description":79,"canonical_path":4,"image":80,"width":66,"height":81,"image_alt":82,"kind":53,"categories":83,"app":88},"9e4ea0fb-f84c-4a0c-b11c-a5508633af7a","URL Input Group","A composite input field for entering a URL, featuring a protocol selector dropdown and a text input for the domain.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9e4ea0fb-f84c-4a0c-b11c-a5508633af7a.png",373,"URL Input Group from Oh Dear",[84],{"id":85,"title":86,"slug":87},204,"Input select","input-select",{"slug":31,"title":30,"logo":33,"categories":89},[],{"uuid":91,"title":92,"description":93,"canonical_path":4,"image":94,"width":95,"height":96,"image_alt":97,"kind":53,"categories":98,"app":103},"f3adc0a2-7e7e-4420-854b-3f537e863a2d","Error Alert","An inline alert banner indicating an error state, featuring a red accent bar, a message about broken links, and an inline link to a settings screen.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff3adc0a2-7e7e-4420-854b-3f537e863a2d.png",2197,328,"Error Alert from Oh Dear",[99],{"id":100,"title":101,"slug":102},244,"Message","message",{"slug":31,"title":30,"logo":33,"categories":104},[],{"uuid":106,"title":107,"description":108,"canonical_path":4,"image":109,"width":110,"height":111,"image_alt":112,"kind":53,"categories":113,"app":118},"5b967cca-2d78-423b-a8c1-a165fa281353","Performance Area Chart","A stacked area chart displaying performance metrics over time, with a time range selector and summary statistics for highest, lowest, and average values.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5b967cca-2d78-423b-a8c1-a165fa281353.png",2319,950,"Performance Area Chart from Oh Dear",[114],{"id":115,"title":116,"slug":117},186,"Charts","charts",{"slug":31,"title":30,"logo":33,"categories":119},[],{"uuid":121,"title":122,"description":123,"canonical_path":4,"image":124,"width":125,"height":126,"image_alt":127,"kind":53,"categories":128,"app":133},"92109124-dda4-476b-bc08-832ea34a922c","Settings navigation tabs","A horizontal row of tabs for navigating different settings categories. The active tab has a colored bottom border and bolder text.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F92109124-dda4-476b-bc08-832ea34a922c.png",2237,321,"Settings navigation tabs from Oh Dear",[129],{"id":130,"title":131,"slug":132},233,"Tabs","tabs",{"slug":31,"title":30,"logo":33,"categories":134},[],{"uuid":136,"title":137,"description":138,"canonical_path":4,"image":139,"width":140,"height":141,"image_alt":142,"kind":53,"categories":143,"app":148},"ca079b3c-7e86-4203-a69b-3a70d50681e2","User profile dropdown menu","An open dropdown menu triggered from a user profile button in the top navigation. It contains links for profile settings, team management, team switching, documentation, and logging out.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fca079b3c-7e86-4203-a69b-3a70d50681e2.png",555,1263,"User profile dropdown menu from Oh Dear",[144],{"id":145,"title":146,"slug":147},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":149},[],{"uuid":151,"title":152,"description":153,"canonical_path":4,"image":154,"width":155,"height":156,"image_alt":157,"kind":53,"categories":158,"app":163},"81728d97-ba1e-4899-9e87-2549425f2b41","Information Alert","A simple informational alert box with an icon and a single line of text explaining notification behavior.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F81728d97-ba1e-4899-9e87-2549425f2b41.png",1504,326,"Information Alert from Oh Dear",[159],{"id":160,"title":161,"slug":162},235,"Tips","tips",{"slug":31,"title":30,"logo":33,"categories":164},[],{"uuid":166,"title":167,"description":168,"canonical_path":4,"image":169,"width":155,"height":170,"image_alt":171,"kind":53,"categories":172,"app":177},"6fe31db7-3b66-4824-b18f-3b620e39b33d","Copy to clipboard field","A read-only input field displaying an API token with an inline copy-to-clipboard button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6fe31db7-3b66-4824-b18f-3b620e39b33d.png",334,"Copy to clipboard field from Oh Dear",[173],{"id":174,"title":175,"slug":176},241,"Click to copy","click-to-copy",{"slug":31,"title":30,"logo":33,"categories":178},[],{"uuid":180,"title":181,"description":182,"canonical_path":4,"image":183,"width":184,"height":185,"image_alt":186,"kind":53,"categories":187,"app":192},"eafa3217-5308-46c3-9a26-47339c94c5b4","Cancel and Confirm Buttons","A button group containing an outlined 'Cancel' button and a filled 'Confirm' button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Feafa3217-5308-46c3-9a26-47339c94c5b4.png",510,196,"Cancel and Confirm Buttons from Oh Dear",[188],{"id":189,"title":190,"slug":191},277,"Button group","button-group",{"slug":31,"title":30,"logo":33,"categories":193},[],{"uuid":195,"title":196,"description":197,"canonical_path":4,"image":198,"width":95,"height":96,"image_alt":199,"kind":53,"categories":200,"app":202},"a34520a5-a5c6-4103-b3a5-ce84cf8703a0","Oh Dear UI component","A simple notification message","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa34520a5-a5c6-4103-b3a5-ce84cf8703a0.png","UI component from Oh Dear",[201],{"id":100,"title":101,"slug":102},{"slug":31,"title":30,"logo":33,"categories":203},[],{"uuid":205,"title":206,"description":207,"canonical_path":4,"image":208,"width":209,"height":210,"image_alt":211,"kind":53,"categories":212,"app":217},"5f3fcc2b-9644-4105-9ca0-dfaf8123a27d","Status Badge","A pill-shaped badge indicating a successful HTTP status code.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5f3fcc2b-9644-4105-9ca0-dfaf8123a27d.png",356,172,"Status Badge from Oh Dear",[213],{"id":214,"title":215,"slug":216},260,"Badge","badge",{"slug":31,"title":30,"logo":33,"categories":218},[],[],[221,224,227,230,233,236,238,242,246,250],{"label":222,"to":223},"Oh Dear product screens","\u002Fexamples\u002Fapps\u002Foh-dear\u002Fscreens",{"label":225,"to":226},"Oh Dear marketing pages","\u002Fexamples\u002Fapps\u002Foh-dear\u002Fmarketing",{"label":228,"to":229},"Oh Dear user flows","\u002Fexamples\u002Fapps\u002Foh-dear\u002Fflows",{"label":231,"to":232},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":234,"to":235},"Monitoring app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmonitoring",{"label":237,"to":18},"All SaaS app examples",{"label":239,"to":240,"description":241},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":243,"to":244,"description":245},"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":247,"to":248,"description":249},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":251,"to":252,"description":253},"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":255,"updated_at":256},"2022-10-16T11:18:39.000Z","2026-09-13T13:02:39.000Z"]