[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fcustomerio\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":48,"showcases":213,"links":214,"dates":251},"\u002Fexamples\u002Fapps\u002Fcustomerio\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Customer.io UI components examples - Nicelydone","Browse Customer.io UI component design examples. Preview individual interface elements and explore related component categories. Platform: automation, data,…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F766bde13-57ba-42bf-93fc-b4bad2343742.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},"Customer.io design examples","\u002Fexamples\u002Fapps\u002Fcustomerio",{"label":23,"to":4},"Customer.io UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Customer.io UI component design examples. Preview individual interface elements and explore related component categories. Platform: automation, data, content creation",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":31,"categories":35},"Customer.io","customerio","Platform: automation, data, content creation","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcustomerio-7ec7fd7c.png","https:\u002F\u002Fcustomer.io",[36,40,44],{"id":37,"title":38,"slug":39},25,"Marketing","marketing",{"id":41,"title":42,"slug":43},27,"Email Newsletters","email-newsletters",{"id":45,"title":46,"slug":47},68,"SMS","sms",[49,64,79,94,109,124,136,151,163,174,186,198],{"uuid":50,"title":51,"description":52,"canonical_path":4,"image":11,"width":53,"height":54,"image_alt":55,"kind":56,"categories":57,"app":62},"b61f1717-e3a6-45c8-ada7-62a411376d4d","Import selection and upload","A form section allowing users to select the type of data to import (People or Events) via radio buttons, followed by a drag-and-drop file upload area with options to choose a local file or import from Google Sheets.",1780,949,"Import selection and upload from Customer.io","component",[58],{"id":59,"title":60,"slug":61},188,"File upload input","file-upload-input",{"slug":31,"title":30,"logo":33,"categories":63},[],{"uuid":65,"title":66,"description":67,"canonical_path":4,"image":68,"width":69,"height":70,"image_alt":71,"kind":56,"categories":72,"app":77},"5f0e91e6-bf88-4269-99aa-3b6736b7ec72","Plan usage card","A card displaying the current plan type, a link to manage the plan, and a progress bar showing usage limits.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8ffd4dfa-c3da-4075-93ca-8eecf104fa09.png",684,376,"Plan usage card from Customer.io",[73],{"id":74,"title":75,"slug":76},213,"Progress indicator","progress-indicator",{"slug":31,"title":30,"logo":33,"categories":78},[],{"uuid":80,"title":81,"description":82,"canonical_path":4,"image":83,"width":84,"height":85,"image_alt":86,"kind":56,"categories":87,"app":92},"2521dd8a-77fd-40db-b3c9-fa42c0309eb2","KPI Chart with Tabs","A bar chart displaying data over time, controlled by a set of KPI tabs acting as filters. The active tab shows 'DATA IN' with a value of 20.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9f54079c-e15e-4a34-9ffa-eb0d2dadd8a3.png",2624,1245,"KPI Chart with Tabs from Customer.io",[88],{"id":89,"title":90,"slug":91},186,"Charts","charts",{"slug":31,"title":30,"logo":33,"categories":93},[],{"uuid":95,"title":96,"description":97,"canonical_path":4,"image":98,"width":99,"height":100,"image_alt":101,"kind":56,"categories":102,"app":107},"1f2eabba-e8b4-43e0-a264-09b66d20a45a","Setup checklist stepper","A vertical setup checklist displaying completed and pending tasks, with a visual pipeline preview for the current active step.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F95a5e5da-9f3b-4df8-8c52-c1a12d6acf73.png",708,1030,"Setup checklist stepper from Customer.io",[103],{"id":104,"title":105,"slug":106},227,"Stepper","stepper",{"slug":31,"title":30,"logo":33,"categories":108},[],{"uuid":110,"title":111,"description":112,"canonical_path":4,"image":113,"width":114,"height":115,"image_alt":116,"kind":56,"categories":117,"app":122},"8574bed4-6a5f-4cdd-8da9-cf4199099083","Disabled source alert","A full-width alert banner indicating that a data source has been disabled. It includes an error icon, a title, a brief explanation, and a button to re-enable the source.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2641fdf1-b139-4e3e-b4ef-0c5070660101.png",2619,435,"Disabled source alert from Customer.io",[118],{"id":119,"title":120,"slug":121},167,"Alert","alert",{"slug":31,"title":30,"logo":33,"categories":123},[],{"uuid":125,"title":126,"description":127,"canonical_path":4,"image":128,"width":129,"height":130,"image_alt":131,"kind":56,"categories":132,"app":134},"89316393-1bc8-4123-a643-0c0d7930e05f","Activity line chart","A line chart displaying activity over the last 24 hours. A tooltip shows specific data points on hover.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fba18d1d3-7816-4304-957b-df4100e496f9.png",1912,1144,"Activity line chart from Customer.io",[133],{"id":89,"title":90,"slug":91},{"slug":31,"title":30,"logo":33,"categories":135},[],{"uuid":137,"title":138,"description":139,"canonical_path":4,"image":140,"width":141,"height":142,"image_alt":143,"kind":56,"categories":144,"app":149},"d32c01bb-ce59-4497-b652-337d3dfd9655","Installation instructions code block","A code block displaying installation commands for different package managers (npm, yarn, pnpm) with a copy to clipboard button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F46106ed5-35fc-48ff-8bc4-873b350f052c.png",1812,755,"Installation instructions code block from Customer.io",[145],{"id":146,"title":147,"slug":148},187,"Code block","code-block",{"slug":31,"title":30,"logo":33,"categories":150},[],{"uuid":152,"title":153,"description":154,"canonical_path":4,"image":155,"width":156,"height":157,"image_alt":158,"kind":56,"categories":159,"app":161},"ab0d6957-24c3-4b2b-b72d-ce05a66f3433","Onboarding Stepper","A two-step progress indicator with a title, showing the first step completed and the second step active.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2ee95bc1-cb7c-48e7-9cfc-06bb5d08b2b7.png",988,353,"Onboarding Stepper from Customer.io",[160],{"id":74,"title":75,"slug":76},{"slug":31,"title":30,"logo":33,"categories":162},[],{"uuid":164,"title":165,"description":166,"canonical_path":4,"image":167,"width":168,"height":70,"image_alt":169,"kind":56,"categories":170,"app":172},"0928e149-99c6-4838-b9db-827a01e6b734","Success Alert","A full-width success alert banner with a green background, a checkmark icon, a bold title, and a descriptive subtitle.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F042a9901-5c8b-4535-b8d7-50a4e7a64c12.png",1974,"Success Alert from Customer.io",[171],{"id":119,"title":120,"slug":121},{"slug":31,"title":30,"logo":33,"categories":173},[],{"uuid":175,"title":176,"description":177,"canonical_path":4,"image":178,"width":179,"height":180,"image_alt":181,"kind":56,"categories":182,"app":184},"36b158d7-3a77-4d10-b79e-d65da5d3c725","Campaign setup stepper","A horizontal stepper navigation bar for a campaign setup wizard, showing completed steps with checkmarks, the current active step, and an upcoming step. It includes a campaign title with an edit icon, an exit link, an autosave indicator, and a Next button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1fb47911-a7a1-45e7-bba8-94022aa5b32c.png",2743,349,"Campaign setup stepper from Customer.io",[183],{"id":104,"title":105,"slug":106},{"slug":31,"title":30,"logo":33,"categories":185},[],{"uuid":187,"title":188,"description":189,"canonical_path":4,"image":190,"width":191,"height":192,"image_alt":193,"kind":56,"categories":194,"app":196},"c743349a-31af-4932-b271-516273d169b9","Onboarding Setup List","A vertical stepper showing the progress of an onboarding setup list. It includes a title, description, a horizontal progress bar, and a list of steps with checkmark icons indicating completion status.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3cd391ed-6802-4839-8371-1ca2ca426605.png",694,872,"Onboarding Setup List from Customer.io",[195],{"id":104,"title":105,"slug":106},{"slug":31,"title":30,"logo":33,"categories":197},[],{"uuid":199,"title":200,"description":201,"canonical_path":4,"image":202,"width":203,"height":204,"image_alt":205,"kind":56,"categories":206,"app":211},"db66729c-509b-441a-ab9c-a1c2f27f2789","Sidebar Navigation","A vertical sidebar navigation menu featuring a workspace switcher, a highlighted setup guide card with a progress bar, and a list of navigation links with icons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1f3272f2-8a08-4c5b-b410-2f605239cedc.png",531,1661,"Sidebar Navigation from Customer.io",[207],{"id":208,"title":209,"slug":210},209,"Vertical navigation","vertical-navigation",{"slug":31,"title":30,"logo":33,"categories":212},[],[],[215,218,221,224,227,230,233,235,239,243,247],{"label":216,"to":217},"Customer.io product screens","\u002Fexamples\u002Fapps\u002Fcustomerio\u002Fscreens",{"label":219,"to":220},"Customer.io marketing pages","\u002Fexamples\u002Fapps\u002Fcustomerio\u002Fmarketing",{"label":222,"to":223},"Customer.io user flows","\u002Fexamples\u002Fapps\u002Fcustomerio\u002Fflows",{"label":225,"to":226},"Marketing app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmarketing",{"label":228,"to":229},"Email Newsletters app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Femail-newsletters",{"label":231,"to":232},"SMS app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fsms",{"label":234,"to":18},"All SaaS app examples",{"label":236,"to":237,"description":238},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":240,"to":241,"description":242},"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":244,"to":245,"description":246},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":248,"to":249,"description":250},"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":252,"updated_at":253},"2024-06-21T10:34:42.000Z","2026-09-26T12:10:25.000Z"]