[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fbetter-stack\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":49,"showcases":214,"links":215,"dates":252},"\u002Fexamples\u002Fapps\u002Fbetter-stack\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Better Stack UI components examples - Nicelydone","Browse Better Stack UI component design examples. Preview individual interface elements and explore related component categories. Radically Better…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8e8ab23a-e989-4767-957a-22d21d74e4d7.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},"Better Stack design examples","\u002Fexamples\u002Fapps\u002Fbetter-stack",{"label":23,"to":4},"Better Stack UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Better Stack UI component design examples. Preview individual interface elements and explore related component categories. Radically Better Observability Stack",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Better Stack","better-stack","Radically Better Observability Stack","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fbetter-stack-49a6560c.png","https:\u002F\u002Fbetterstack.com","BetterStackHQ",[37,41,45],{"id":38,"title":39,"slug":40},16,"Monitoring","monitoring",{"id":42,"title":43,"slug":44},48,"Developer Tools","developer-tools",{"id":46,"title":47,"slug":48},80,"Artificial Intelligence","artificial-intelligence",[50,65,80,95,107,121,135,150,165,176,187,199],{"uuid":51,"title":52,"description":53,"canonical_path":4,"image":11,"width":54,"height":55,"image_alt":56,"kind":57,"categories":58,"app":63},"5ab4c423-ad29-45cb-b1d2-42dfae8bfc38","Onboarding checklist","A split-pane onboarding widget. The left pane lists setup tasks with completion status. The right pane displays details and actions for the selected task.",2260,1398,"Onboarding checklist from Better Stack","component",[59],{"id":60,"title":61,"slug":62},213,"Progress indicator","progress-indicator",{"slug":31,"title":30,"logo":33,"categories":64},[],{"uuid":66,"title":67,"description":68,"canonical_path":4,"image":69,"width":70,"height":71,"image_alt":72,"kind":57,"categories":73,"app":78},"db9e0692-a079-476e-bbc9-eb0f3b813866","Page Header with Tabs","A page header containing a back link, a main title, and a horizontal tab navigation menu.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F40750a35-e266-4ceb-8238-3898a82b3085.png",2243,560,"Page Header with Tabs from Better Stack",[74],{"id":75,"title":76,"slug":77},233,"Tabs","tabs",{"slug":31,"title":30,"logo":33,"categories":79},[],{"uuid":81,"title":82,"description":83,"canonical_path":4,"image":84,"width":85,"height":86,"image_alt":87,"kind":57,"categories":88,"app":93},"00b942a3-62c1-4fd7-a041-3c3319287491","User profile row","A row displaying a user's avatar, name, email address, and role badge.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F34c3f9c6-9ccf-4792-97b8-1802879a9edc.png",581,198,"User profile row from Better Stack",[89],{"id":90,"title":91,"slug":92},169,"Avatar","avatar",{"slug":31,"title":30,"logo":33,"categories":94},[],{"uuid":96,"title":97,"description":98,"canonical_path":4,"image":99,"width":100,"height":101,"image_alt":102,"kind":57,"categories":103,"app":105},"956d2742-4c42-4bdd-a040-566a287acc15","User profile lockup","A user profile lockup displaying a circular initial avatar next to a stacked email address.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe81ddcc6-4416-49d3-9918-684bce8d5e71.png",516,197,"User profile lockup from Better Stack",[104],{"id":90,"title":91,"slug":92},{"slug":31,"title":30,"logo":33,"categories":106},[],{"uuid":108,"title":109,"description":110,"canonical_path":4,"image":111,"width":54,"height":112,"image_alt":113,"kind":57,"categories":114,"app":119},"b983e2db-e93e-4760-ab88-46893375473d","Bar chart","A bar chart displaying incidents by week, with a single purple bar representing manually reported incidents on November 7th.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F12b1d7eb-6fdd-4969-a344-e5401d06aaf3.png",1200,"Bar chart from Better Stack",[115],{"id":116,"title":117,"slug":118},186,"Charts","charts",{"slug":31,"title":30,"logo":33,"categories":120},[],{"uuid":122,"title":123,"description":124,"canonical_path":4,"image":125,"width":54,"height":126,"image_alt":127,"kind":57,"categories":128,"app":133},"cd0ab9b9-b82e-4548-b9c3-4f6fe2914e7d","Incident List Table","A data table displaying a list of active incidents with columns for Monitor, Started at, Length, and On-call.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F56ddbeeb-cac3-4dfa-8be4-c9d4e9155e1b.png",622,"Incident List Table from Better Stack",[129],{"id":130,"title":131,"slug":132},248,"Table","table-2",{"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":57,"categories":143,"app":148},"0012f5d6-336b-4b59-b298-5328946eed01","Error Alert","A full-width error alert banner displaying a failure message and a specific reason.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0a26b4ac-e9e0-4950-8428-a9cbd05d52f3.png",2256,412,"Error Alert from Better Stack",[144],{"id":145,"title":146,"slug":147},244,"Message","message",{"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":57,"categories":158,"app":163},"537bf7a9-8e50-4f76-81f9-5231847e38ad","Sidebar Navigation","A dark-themed vertical sidebar navigation menu with a logo at the top, a list of primary navigation links with icons, a secondary list of links at the bottom, and a workspace switcher at the very bottom.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F85c9fb58-ba40-47a3-a324-62313c7e3c30.png",498,1732,"Sidebar Navigation from Better Stack",[159],{"id":160,"title":161,"slug":162},209,"Vertical navigation","vertical-navigation",{"slug":31,"title":30,"logo":33,"categories":164},[],{"uuid":166,"title":167,"description":168,"canonical_path":4,"image":169,"width":140,"height":170,"image_alt":171,"kind":57,"categories":172,"app":174},"b1bd0657-6b59-492c-97bb-79ed5bf024f9","Success Alert with Action","A success alert banner confirming the creation of an endpoint, featuring a green checkmark icon and an outlined button to send a test alert.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F10274b3b-8b8c-4294-b7ec-b8762cd1b227.png",476,"Success Alert with Action from Better Stack",[173],{"id":145,"title":146,"slug":147},{"slug":31,"title":30,"logo":33,"categories":175},[],{"uuid":177,"title":178,"description":179,"canonical_path":4,"image":180,"width":54,"height":181,"image_alt":182,"kind":57,"categories":183,"app":185},"32b61cb7-bcfb-41f3-a8e4-32f98a773146","Monitor Metrics Dashboard","A dashboard section displaying key performance indicators (KPIs) and a line chart for response times across different regions.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4823843b-32cc-44dd-bdcc-89d23bd28877.png",1399,"Monitor Metrics Dashboard from Better Stack",[184],{"id":116,"title":117,"slug":118},{"slug":31,"title":30,"logo":33,"categories":186},[],{"uuid":188,"title":189,"description":190,"canonical_path":4,"image":191,"width":192,"height":193,"image_alt":194,"kind":57,"categories":195,"app":197},"b2cba628-5937-4322-87fd-7fdf65371481","Onboarding Header with Stepper","A page header featuring a logo, a three-step progress indicator with the first step active, and a large title welcoming the user.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1c4538c6-3f47-43db-b0a6-f2db6a0319ba.png",1089,625,"Onboarding Header with Stepper from Better Stack",[196],{"id":60,"title":61,"slug":62},{"slug":31,"title":30,"logo":33,"categories":198},[],{"uuid":200,"title":201,"description":202,"canonical_path":4,"image":203,"width":204,"height":205,"image_alt":206,"kind":57,"categories":207,"app":212},"e87c2497-aba0-4a0e-a2b8-7bce95197620","SSO Sign-in Buttons","A vertical stack of two single sign-on buttons for Google and Okta, followed by a terms of service and privacy policy agreement text.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb2087e09-e1df-4bc5-b4fe-75d67d65313e.png",891,523,"SSO Sign-in Buttons from Better Stack",[208],{"id":209,"title":210,"slug":211},289,"Social login button","social-login-button",{"slug":31,"title":30,"logo":33,"categories":213},[],[],[216,219,222,225,228,231,234,236,240,244,248],{"label":217,"to":218},"Better Stack product screens","\u002Fexamples\u002Fapps\u002Fbetter-stack\u002Fscreens",{"label":220,"to":221},"Better Stack marketing pages","\u002Fexamples\u002Fapps\u002Fbetter-stack\u002Fmarketing",{"label":223,"to":224},"Better Stack user flows","\u002Fexamples\u002Fapps\u002Fbetter-stack\u002Fflows",{"label":226,"to":227},"Monitoring app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmonitoring",{"label":229,"to":230},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":232,"to":233},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"label":235,"to":18},"All SaaS app examples",{"label":237,"to":238,"description":239},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":241,"to":242,"description":243},"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":245,"to":246,"description":247},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":249,"to":250,"description":251},"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":253,"updated_at":254},"2022-11-07T06:14:53.000Z","2026-09-14T00:10:22.000Z"]