[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fattio\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":43,"showcases":192,"links":193,"dates":209},"\u002Fexamples\u002Fapps\u002Fattio\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Attio UI components examples - Nicelydone","Browse Attio UI component design examples. Preview individual interface elements and explore related component categories. Customer relationship magic","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F71546586-daa7-4466-818b-1543729e7c12.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},"Attio design examples","\u002Fexamples\u002Fapps\u002Fattio",{"label":23,"to":4},"Attio UI components examples",{"title":23,"eyebrow":25,"description":10,"sections":26,"body":27},"SaaS app examples",[],[],{"title":29,"slug":30,"description":31,"logo":32,"url":33,"twitter_username":30,"categories":34},"Attio","attio","Customer relationship magic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fattio-nqag2fca.png","https:\u002F\u002Fattio.com",[35,39],{"id":36,"title":37,"slug":38},53,"CRM","crm",{"id":40,"title":41,"slug":42},80,"Artificial Intelligence","artificial-intelligence",[44,59,72,85,98,110,119,132,144,157,170,180],{"uuid":45,"title":46,"description":47,"canonical_path":4,"image":11,"width":48,"height":49,"image_alt":50,"kind":51,"categories":52,"app":57},"eb1a4e85-7cfc-45af-8024-6d5e1a90dcaf","Attio UI component","A dropdown menu for workspace and account management within an application interface.",623,764,"UI component from Attio","component",[53],{"id":54,"title":55,"slug":56},190,"Dropdown menu","dropdown-menu",{"slug":30,"title":29,"logo":32,"categories":58},[],{"uuid":60,"title":46,"description":61,"canonical_path":4,"image":62,"width":63,"height":64,"image_alt":50,"kind":51,"categories":65,"app":70},"de8f9b42-dac7-487d-953b-b8d2198e2267","A notification message confirming an email deletion from an unsubscribe list.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F018c3f82-5d46-4dae-a707-af5c74ad8b3c.png",684,155,[66],{"id":67,"title":68,"slug":69},247,"Notification Toast","notification-element",{"slug":30,"title":29,"logo":32,"categories":71},[],{"uuid":73,"title":46,"description":74,"canonical_path":4,"image":75,"width":76,"height":77,"image_alt":50,"kind":51,"categories":78,"app":83},"32e6cc00-4945-4d9a-9131-a1344b867d65","A notification card displaying a completed import process with a progress bar and user confirmation.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3bb7a6e8-2748-4d3d-9353-60bb4dd1bfec.png",2653,437,[79],{"id":80,"title":81,"slug":82},213,"Progress indicator","progress-indicator",{"slug":30,"title":29,"logo":32,"categories":84},[],{"uuid":86,"title":46,"description":87,"canonical_path":4,"image":88,"width":89,"height":90,"image_alt":50,"kind":51,"categories":91,"app":96},"4ffc0330-bccf-4d60-9f7b-f14a4ce5f342","An empty state for an imports management page within a web application, featuring a tabbed navigation and a call to action button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4aaf1a22-bc60-4df7-a75c-7e72283fe249.png",1793,1050,[92],{"id":93,"title":94,"slug":95},302,"Empty state","emptystate",{"slug":30,"title":29,"logo":32,"categories":97},[],{"uuid":99,"title":46,"description":100,"canonical_path":4,"image":101,"width":89,"height":102,"image_alt":50,"kind":51,"categories":103,"app":108},"d0e78e40-5584-47f8-92ef-2d81ef1c4e35","A settings page for products with tabbed navigation for various configurations.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3fa94d58-2f2a-4d36-81b7-47da013c98bf.png",568,[104],{"id":105,"title":106,"slug":107},233,"Tabs","tabs",{"slug":30,"title":29,"logo":32,"categories":109},[],{"uuid":111,"title":46,"description":112,"canonical_path":4,"image":113,"width":89,"height":114,"image_alt":50,"kind":51,"categories":115,"app":117},"23c5f093-bee4-49db-95bd-4f6640d12c4e","The image displays a user interface for managing seats and credits.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb12e1a0c-3928-4019-a935-ab21fda26d10.png",614,[116],{"id":80,"title":81,"slug":82},{"slug":30,"title":29,"logo":32,"categories":118},[],{"uuid":120,"title":46,"description":121,"canonical_path":4,"image":122,"width":123,"height":124,"image_alt":50,"kind":51,"categories":125,"app":130},"bfd68292-d492-48c0-858b-b2df5c1783b3","The screenshot shows a default sharing settings interface with options for metadata, subject line, and full access.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F48146a37-49b1-4e1c-8e1f-1e1d5da6361b.png",1801,703,[126],{"id":127,"title":128,"slug":129},179,"Checkbox & radio","checkbox-radio",{"slug":30,"title":29,"logo":32,"categories":131},[],{"uuid":133,"title":46,"description":134,"canonical_path":4,"image":135,"width":89,"height":136,"image_alt":50,"kind":51,"categories":137,"app":142},"064093b7-b99f-4a33-98c4-2edd3c8aab13","The screenshot shows a settings page for connecting accounts.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb3a007b3-2f82-48ae-a3a0-86dd1653f74c.png",590,[138],{"id":139,"title":140,"slug":141},289,"Social login button","social-login-button",{"slug":30,"title":29,"logo":32,"categories":143},[],{"uuid":145,"title":46,"description":146,"canonical_path":4,"image":147,"width":148,"height":149,"image_alt":50,"kind":51,"categories":150,"app":155},"1df9015b-c39a-4e6a-88be-e080be3d24ca","Color selection for accent color","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3fdc6639-59cf-4630-9fe1-4d96ef94bcfa.png",909,410,[151],{"id":152,"title":153,"slug":154},183,"Color picker","color-picker",{"slug":30,"title":29,"logo":32,"categories":156},[],{"uuid":158,"title":46,"description":159,"canonical_path":4,"image":160,"width":161,"height":162,"image_alt":50,"kind":51,"categories":163,"app":168},"2e340521-7817-4bde-a51e-549bafc5e681","Theme selection modal","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4ac1bce7-ac50-48c9-868c-addc32317928.png",1683,665,[164],{"id":165,"title":166,"slug":167},256,"Theme settings","theme-settings",{"slug":30,"title":29,"logo":32,"categories":169},[],{"uuid":171,"title":46,"description":172,"canonical_path":4,"image":173,"width":174,"height":175,"image_alt":50,"kind":51,"categories":176,"app":178},"47e2bd97-994f-456d-9842-641ae31a8867","This screenshot displays a modal with a list of actions.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6fab3bb4-bad6-4c3f-bf21-d28335c1e078.png",520,465,[177],{"id":54,"title":55,"slug":56},{"slug":30,"title":29,"logo":32,"categories":179},[],{"uuid":181,"title":46,"description":182,"canonical_path":4,"image":183,"width":184,"height":139,"image_alt":50,"kind":51,"categories":185,"app":190},"d59f7b3c-a07f-455d-8fd5-52788116b06a","A progress indicator for a multi-step process.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4db11692-6365-4b9c-aa19-e07ecc9b9ce4.png",1217,[186],{"id":187,"title":188,"slug":189},227,"Stepper","stepper",{"slug":30,"title":29,"logo":32,"categories":191},[],[],[194,197,200,203,206],{"label":195,"to":196},"Attio product screens","\u002Fexamples\u002Fapps\u002Fattio\u002Fscreens",{"label":198,"to":199},"Attio marketing pages","\u002Fexamples\u002Fapps\u002Fattio\u002Fmarketing",{"label":201,"to":202},"Attio user flows","\u002Fexamples\u002Fapps\u002Fattio\u002Fflows",{"label":204,"to":205},"CRM app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcrm",{"label":207,"to":208},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"published_at":210,"updated_at":211},"2022-07-31T20:25:02.000Z","2026-09-13T13:02:39.000Z"]