[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fintercom\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":52,"showcases":217,"links":218,"dates":255},"\u002Fexamples\u002Fapps\u002Fintercom\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Intercom UI components examples - Nicelydone","Browse Intercom UI component design examples. Preview individual interface elements and explore related component categories. A fundamentally new way to…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4f1aca31-d2b7-4bd7-b5e4-7f6ee3230d1d.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},"Intercom design examples","\u002Fexamples\u002Fapps\u002Fintercom",{"label":23,"to":4},"Intercom UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Intercom UI component design examples. Preview individual interface elements and explore related component categories. A fundamentally new way to communicate with your customers",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"categories":35},"Intercom","intercom","A fundamentally new way to communicate with your customers","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fintercom-d24f1c6b.png","https:\u002F\u002Fwww.intercom.io",[36,40,44,48],{"id":37,"title":38,"slug":39},53,"CRM","crm",{"id":41,"title":42,"slug":43},47,"Customer Service","customer-service",{"id":45,"title":46,"slug":47},42,"Messaging","messaging",{"id":49,"title":50,"slug":51},25,"Marketing","marketing",[53,68,83,98,113,123,138,148,161,176,191,206],{"uuid":54,"title":55,"description":56,"canonical_path":4,"image":11,"width":57,"height":58,"image_alt":59,"kind":60,"categories":61,"app":66},"50b14a90-4d22-4c56-a223-d475c042f100","Search and Filter Toolbar","A toolbar containing a search input with an active query, applied filter chips, an add filter button, and a results count summary with a clear search action. It also includes view toggle buttons on the far right.",2594,424,"Search and Filter Toolbar from Intercom","component",[62],{"id":63,"title":64,"slug":65},225,"Sorting & filtering","sorting-filtering",{"slug":31,"title":30,"logo":33,"categories":67},[],{"uuid":69,"title":70,"description":71,"canonical_path":4,"image":72,"width":73,"height":74,"image_alt":75,"kind":60,"categories":76,"app":81},"f07cb83b-9c2e-4ddf-bc12-88a1785bc3b9","Knowledge Content Table","A data table displaying a list of knowledge base content, specifically webpages. It includes columns for Title, Type, and availability across AI Agent, AI Copilot, and Help Center. A header row shows the total number of results and a button to clear the current search.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4a5d9441-e418-4dab-b0c9-db33591f4080.png",2633,1584,"Knowledge Content Table from Intercom",[77],{"id":78,"title":79,"slug":80},248,"Table","table-2",{"slug":31,"title":30,"logo":33,"categories":82},[],{"uuid":84,"title":85,"description":86,"canonical_path":4,"image":87,"width":88,"height":89,"image_alt":90,"kind":60,"categories":91,"app":96},"e901ca44-09eb-4dc4-872f-54504999f50f","Website Sync Progress Card","An expanded card showing the progress of syncing a website for an AI agent's knowledge base. It displays the URL being indexed, a segmented progress bar, an informational alert about the time required, and action buttons to add or manage content.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8da86c7d-54d1-45c5-8631-9000b001c338.png",1875,1086,"Website Sync Progress Card from Intercom",[92],{"id":93,"title":94,"slug":95},213,"Progress indicator","progress-indicator",{"slug":31,"title":30,"logo":33,"categories":97},[],{"uuid":99,"title":100,"description":101,"canonical_path":4,"image":102,"width":103,"height":104,"image_alt":105,"kind":60,"categories":106,"app":111},"67d304e8-414a-4065-9544-5dd549dbf21d","Intercom UI component","A modal with different options to import content for an AI agent.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fae2b3e70-6385-4717-8f6e-68526cf1164a.png",1821,1602,"UI component from Intercom",[107],{"id":108,"title":109,"slug":110},168,"Accordion","accordion",{"slug":31,"title":30,"logo":33,"categories":112},[],{"uuid":114,"title":100,"description":115,"canonical_path":4,"image":116,"width":117,"height":118,"image_alt":105,"kind":60,"categories":119,"app":121},"c37f8679-7838-436d-a694-38f8f94492c5","This is a search interface with filter chips.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F532f33f4-bf85-4cc2-91f9-66f209f6f74e.png",2728,554,[120],{"id":63,"title":64,"slug":65},{"slug":31,"title":30,"logo":33,"categories":122},[],{"uuid":124,"title":125,"description":126,"canonical_path":4,"image":127,"width":128,"height":129,"image_alt":130,"kind":60,"categories":131,"app":136},"2c9caafa-e6c1-4359-bbdc-852b7e45be69","Date Range Picker with Presets","A date range picker component featuring a dual-month calendar view and a sidebar with preset date ranges. The user has selected a custom range from August 26 to August 27.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Faa697309-0041-4650-9b00-6ecb740208d0.png",1529,1008,"Date Range Picker with Presets from Intercom",[132],{"id":133,"title":134,"slug":135},184,"Datepicker","datepicker",{"slug":31,"title":30,"logo":33,"categories":137},[],{"uuid":139,"title":55,"description":140,"canonical_path":4,"image":141,"width":142,"height":143,"image_alt":59,"kind":60,"categories":144,"app":146},"bdce2011-9583-48ff-9cc9-14dd8c94bc65","A horizontal toolbar combining a search input field with a row of filter chips below it. The search field contains an active query and a clear button. The filter row includes multiple categorized chips with icons, an add filter button, and a sort dropdown.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F34f85fde-778f-4500-820f-e0931936286a.png",2731,498,[145],{"id":63,"title":64,"slug":65},{"slug":31,"title":30,"logo":33,"categories":147},[],{"uuid":149,"title":100,"description":150,"canonical_path":4,"image":151,"width":152,"height":153,"image_alt":105,"kind":60,"categories":154,"app":159},"24f421b0-9542-4e42-981a-cc11f1ced343","A search and filter interface","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe90fc611-d1cf-40a4-bb5b-620da037bc8e.png",2721,515,[155],{"id":156,"title":157,"slug":158},295,"Input search","input-search",{"slug":31,"title":30,"logo":33,"categories":160},[],{"uuid":162,"title":163,"description":164,"canonical_path":4,"image":165,"width":166,"height":167,"image_alt":168,"kind":60,"categories":169,"app":174},"ae4edd47-b4c9-4496-b399-2f392196b11a","Availability Dropdown Selectors","A pair of dropdown selectors for configuring macro availability. The first dropdown is open, showing options for when the macro is available, with 'Replying' currently selected.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9d719269-d496-45fd-a617-93aec60a94c8.png",499,399,"Availability Dropdown Selectors from Intercom",[170],{"id":171,"title":172,"slug":173},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":175},[],{"uuid":177,"title":178,"description":179,"canonical_path":4,"image":180,"width":181,"height":182,"image_alt":183,"kind":60,"categories":184,"app":189},"4872ad58-2ccb-4651-a2d2-c40853169bed","Bulk Update Modal with Rich Text Editor","A modal dialog for updating an item, featuring a rich text editor with a floating formatting toolbar. The editor includes a reply dropdown, text input area with selected text, and an 'Add actions' button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8c7a63a7-8c57-437c-ad2a-2d5ea70d1df7.png",1739,984,"Bulk Update Modal with Rich Text Editor from Intercom",[185],{"id":186,"title":187,"slug":188},221,"Rich text editor","rich-text-editor",{"slug":31,"title":30,"logo":33,"categories":190},[],{"uuid":192,"title":193,"description":194,"canonical_path":4,"image":195,"width":196,"height":197,"image_alt":198,"kind":60,"categories":199,"app":204},"afdc3043-be58-4115-9e7a-4017a7f4f9a7","Notification Toast with Undo","A dark-themed notification toast confirming an action, featuring an inline 'Undo' button with a keyboard shortcut and a close icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc583ccaa-716b-4217-94fb-75b71fed34c7.png",965,192,"Notification Toast with Undo from Intercom",[200],{"id":201,"title":202,"slug":203},247,"Notification Toast","notification-element",{"slug":31,"title":30,"logo":33,"categories":205},[],{"uuid":207,"title":208,"description":209,"canonical_path":4,"image":210,"width":129,"height":211,"image_alt":212,"kind":60,"categories":213,"app":215},"9762208a-c0ec-4930-bcca-498ca2a4334b","Feature Discovery Toast","A floating notification toast introducing a new feature or workflow. It includes a title, a descriptive paragraph explaining the benefit, a primary action button, and a close icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F00a2a589-4df8-43ba-a0df-da01904544fc.png",472,"Feature Discovery Toast from Intercom",[214],{"id":201,"title":202,"slug":203},{"slug":31,"title":30,"logo":33,"categories":216},[],[],[219,222,225,228,231,234,237,239,243,247,251],{"label":220,"to":221},"Intercom product screens","\u002Fexamples\u002Fapps\u002Fintercom\u002Fscreens",{"label":223,"to":224},"Intercom marketing pages","\u002Fexamples\u002Fapps\u002Fintercom\u002Fmarketing",{"label":226,"to":227},"Intercom user flows","\u002Fexamples\u002Fapps\u002Fintercom\u002Fflows",{"label":229,"to":230},"CRM app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcrm",{"label":232,"to":233},"Customer Service app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcustomer-service",{"label":235,"to":236},"Messaging app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmessaging",{"label":238,"to":18},"All SaaS app examples",{"label":240,"to":241,"description":242},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":244,"to":245,"description":246},"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":248,"to":249,"description":250},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":252,"to":253,"description":254},"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":256,"updated_at":257},"2021-10-06T14:34:07.000Z","2026-09-13T13:02:39.000Z"]