[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fklaviyo\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":60,"showcases":234,"links":235,"dates":272},"\u002Fexamples\u002Fapps\u002Fklaviyo\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Klaviyo UI components examples - Nicelydone","Browse Klaviyo UI component design examples. Preview individual interface elements and explore related component categories. Marketing Automation Platform…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F89ea9bf6-1107-48e4-8d91-6947a8866897.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},"Klaviyo design examples","\u002Fexamples\u002Fapps\u002Fklaviyo",{"label":23,"to":4},"Klaviyo UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Klaviyo UI component design examples. Preview individual interface elements and explore related component categories. Marketing Automation Platform for Email & SMS with CDP",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":31,"categories":35},"Klaviyo","klaviyo","Marketing Automation Platform for Email & SMS with CDP","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fklaviyo-rf0axnc0.png","https:\u002F\u002Fwww.klaviyo.com",[36,40,44,48,52,56],{"id":37,"title":38,"slug":39},46,"Analytics","analytics",{"id":41,"title":42,"slug":43},25,"Marketing","marketing",{"id":45,"title":46,"slug":47},27,"Email Newsletters","email-newsletters",{"id":49,"title":50,"slug":51},68,"SMS","sms",{"id":53,"title":54,"slug":55},53,"CRM","crm",{"id":57,"title":58,"slug":59},57,"Big data","big-data",[61,76,91,106,118,133,148,163,178,193,208,222],{"uuid":62,"title":63,"description":64,"canonical_path":4,"image":11,"width":65,"height":66,"image_alt":67,"kind":68,"categories":69,"app":74},"89ea9bf6-1107-48e4-8d91-6947a8866897","Template card","A card displaying a preview of a form template along with its title, description, and tags indicating device type and format.",1368,1149,"Template card from Klaviyo","component",[70],{"id":71,"title":72,"slug":73},174,"Card","card",{"slug":31,"title":30,"logo":33,"categories":75},[],{"uuid":77,"title":78,"description":79,"canonical_path":4,"image":80,"width":81,"height":82,"image_alt":83,"kind":68,"categories":84,"app":89},"66e5df5f-9064-405d-858d-507d39bfafe0","File upload dropzone","A drag-and-drop file upload area for CSV files, featuring a central upload button and helper text indicating file size and type limits. A link below allows switching to a copy\u002Fpaste input method.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F66e5df5f-9064-405d-858d-507d39bfafe0.png",1714,703,"File upload dropzone from Klaviyo",[85],{"id":86,"title":87,"slug":88},188,"File upload input","file-upload-input",{"slug":31,"title":30,"logo":33,"categories":90},[],{"uuid":92,"title":93,"description":94,"canonical_path":4,"image":95,"width":96,"height":97,"image_alt":98,"kind":68,"categories":99,"app":104},"49ad3111-fd3c-4ab9-94b8-450052515055","Wizard Header with Stepper","A horizontal header for a multi-step process, featuring a page title on the left, a three-step numbered progress indicator in the center, and navigation buttons on the right. The first step is currently active.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F49ad3111-fd3c-4ab9-94b8-450052515055.png",3181,369,"Wizard Header with Stepper from Klaviyo",[100],{"id":101,"title":102,"slug":103},227,"Stepper","stepper",{"slug":31,"title":30,"logo":33,"categories":105},[],{"uuid":107,"title":108,"description":109,"canonical_path":4,"image":110,"width":111,"height":112,"image_alt":113,"kind":68,"categories":114,"app":116},"d57057ab-138a-4e55-9eb8-27671da05cd5","Onboarding Stepper","A vertical stepper component guiding users through an onboarding process. The first step is completed, the second step is active and expanded with a promotional card, and the third step is pending.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd57057ab-138a-4e55-9eb8-27671da05cd5.png",1915,1269,"Onboarding Stepper from Klaviyo",[115],{"id":101,"title":102,"slug":103},{"slug":31,"title":30,"logo":33,"categories":117},[],{"uuid":119,"title":120,"description":121,"canonical_path":4,"image":122,"width":123,"height":124,"image_alt":125,"kind":68,"categories":126,"app":131},"5d391b23-b5a7-4bd6-a6ae-af11d4a223a0","Sample Profiles Table","A data table displaying a list of sample profiles with their associated marketing and ecommerce event statuses and creation dates.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5d391b23-b5a7-4bd6-a6ae-af11d4a223a0.png",2022,1204,"Sample Profiles Table from Klaviyo",[127],{"id":128,"title":129,"slug":130},248,"Table","table-2",{"slug":31,"title":30,"logo":33,"categories":132},[],{"uuid":134,"title":135,"description":136,"canonical_path":4,"image":137,"width":138,"height":139,"image_alt":140,"kind":68,"categories":141,"app":146},"53ad0c4b-029a-43b7-9d2e-3668d806bc73","Global Header","A dark-themed top navigation bar featuring a logo, a search input, and right-aligned utility links for notifications, account plans, and support.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F53ad0c4b-029a-43b7-9d2e-3668d806bc73.png",3021,130,"Global Header from Klaviyo",[142],{"id":143,"title":144,"slug":145},240,"Horizontal navigation","horizontal-navigation",{"slug":31,"title":30,"logo":33,"categories":147},[],{"uuid":149,"title":150,"description":151,"canonical_path":4,"image":152,"width":153,"height":154,"image_alt":155,"kind":68,"categories":156,"app":161},"c677676a-c5e7-489b-80df-c906e5105ef1","Sidebar Navigation","A vertical sidebar navigation menu with a logo, search bar, list of links with icons, and a user profile section at the bottom.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc677676a-c5e7-489b-80df-c906e5105ef1.png",406,1737,"Sidebar Navigation from Klaviyo",[157],{"id":158,"title":159,"slug":160},209,"Vertical navigation","vertical-navigation",{"slug":31,"title":30,"logo":33,"categories":162},[],{"uuid":164,"title":165,"description":166,"canonical_path":4,"image":167,"width":168,"height":169,"image_alt":170,"kind":68,"categories":171,"app":176},"74c133a6-6193-43a7-a7d1-03c3f4bbe63d","Partner Contact Form","A comprehensive contact form for engaging with a service partner. It includes standard text inputs for personal and company details, a checkbox group for selecting marketing services, dropdown selects for budget and engagement type, a textarea for comments, a reCAPTCHA widget, and consent checkboxes.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F74c133a6-6193-43a7-a7d1-03c3f4bbe63d.png",1408,3932,"Partner Contact Form from Klaviyo",[172],{"id":173,"title":174,"slug":175},243,"Form element","form-element",{"slug":31,"title":30,"logo":33,"categories":177},[],{"uuid":179,"title":180,"description":181,"canonical_path":4,"image":182,"width":183,"height":184,"image_alt":185,"kind":68,"categories":186,"app":191},"d3591ea2-9160-4317-b39c-cfab89d51f8f","Social Proof Section","A dark-themed section highlighting a large revenue statistic alongside two G2 Leader badges for Marketing Automation and Customer Data Platform.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd3591ea2-9160-4317-b39c-cfab89d51f8f.png",2274,1379,"Social Proof Section from Klaviyo",[187],{"id":188,"title":189,"slug":190},224,"Social proof","social-proof",{"slug":31,"title":30,"logo":33,"categories":192},[],{"uuid":194,"title":195,"description":196,"canonical_path":4,"image":197,"width":198,"height":199,"image_alt":200,"kind":68,"categories":201,"app":206},"fe321659-3794-4909-9635-d37f16dd4f75","FAQ Accordion","A frequently asked questions section using an accordion layout. The first item is expanded to show a detailed answer with a bulleted list, while the remaining questions are collapsed.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffe321659-3794-4909-9635-d37f16dd4f75.png",2656,1743,"FAQ Accordion from Klaviyo",[202],{"id":203,"title":204,"slug":205},168,"Accordion","accordion",{"slug":31,"title":30,"logo":33,"categories":207},[],{"uuid":209,"title":210,"description":211,"canonical_path":4,"image":212,"width":198,"height":213,"image_alt":214,"kind":68,"categories":215,"app":220},"1194a977-9d1d-441f-8deb-764d7d8295cc","Klaviyo UI component","A landing page section with a quote and a photo.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1194a977-9d1d-441f-8deb-764d7d8295cc.png",1608,"UI component from Klaviyo",[216],{"id":217,"title":218,"slug":219},232,"Testimonial","testimonial",{"slug":31,"title":30,"logo":33,"categories":221},[],{"uuid":223,"title":224,"description":225,"canonical_path":4,"image":226,"width":227,"height":228,"image_alt":229,"kind":68,"categories":230,"app":232},"cac0f3bf-5c2e-4336-8e8a-edd2ff131de2","Logo wall","A section displaying a headline stating the number of brands using the platform, followed by a horizontal row of customer logos.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcac0f3bf-5c2e-4336-8e8a-edd2ff131de2.png",2599,610,"Logo wall from Klaviyo",[231],{"id":188,"title":189,"slug":190},{"slug":31,"title":30,"logo":33,"categories":233},[],[],[236,239,242,245,248,251,254,256,260,264,268],{"label":237,"to":238},"Klaviyo product screens","\u002Fexamples\u002Fapps\u002Fklaviyo\u002Fscreens",{"label":240,"to":241},"Klaviyo marketing pages","\u002Fexamples\u002Fapps\u002Fklaviyo\u002Fmarketing",{"label":243,"to":244},"Klaviyo user flows","\u002Fexamples\u002Fapps\u002Fklaviyo\u002Fflows",{"label":246,"to":247},"Analytics app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fanalytics",{"label":249,"to":250},"Marketing app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmarketing",{"label":252,"to":253},"Email Newsletters app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Femail-newsletters",{"label":255,"to":18},"All SaaS app examples",{"label":257,"to":258,"description":259},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":261,"to":262,"description":263},"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":265,"to":266,"description":267},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":269,"to":270,"description":271},"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":273,"updated_at":274},"2023-03-14T08:35:26.000Z","2026-09-13T13:02:39.000Z"]