[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fillustration":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":306,"links":307,"dates":353},"\u002Fexamples\u002Fcomponents\u002Fillustration","collection","components",true,{"example_count":9,"app_count":10},671,142,{"id":12,"title":13,"description":14},278,"Illustration","See how interfaces use illustration to explain a feature or support a message. Explore how decorative and explanatory imagery fits beside text and actions.",{"title":16,"description":17,"og_image":18},"Illustration UI examples - Nicelydone","Illustration UI design examples from SaaS apps. See how interfaces use illustration to explain a feature or support a message. Explore how decorative and…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fef3d5b7a-dca1-4ba8-a485-8209b613031e.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Illustration UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Illustration UI design examples from SaaS apps. See how interfaces use illustration to explain a feature or support a message. Explore how decorative and explanatory imagery fits beside text and actions.",[32],{"title":33,"description":14,"links":34},"About Illustration",[],[36],"671 UI components",[38,68,94,124,145,171,192,214,232,259,277],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"135ed346-6a05-4de5-9f80-fe20a90e67f7","Alloy UI component","A grid of application logos displayed within hexagonal cells.","\u002Fexamples\u002Fapps\u002Falloy\u002Fcomponents",1182,903,"UI component from Alloy","component",[48],{"id":12,"title":13,"slug":49},"illustration",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"alloy","Alloy","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F13110ce9-b228-4dcd-99db-7c3272fae2ce.png","AI prototyping tool for product managers",[56,60,64],{"id":57,"title":58,"slug":59},48,"Developer Tools","developer-tools",{"id":61,"title":62,"slug":63},80,"Artificial Intelligence","artificial-intelligence",{"id":65,"title":66,"slug":67},86,"Product management","product-management",{"uuid":69,"title":70,"description":71,"canonical_path":72,"image":73,"width":74,"height":75,"image_alt":76,"kind":46,"categories":77,"app":79},"4c331339-40f5-4915-a1eb-c0e1b47fa280","Origin Financial UI component","A global map with various financial institution logos orbiting it, and a continue button.","\u002Fexamples\u002Fapps\u002Fuseorigin\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd7a15829-7aed-48b9-a694-a003680877f4.png",2145,1291,"UI component from Origin Financial",[78],{"id":12,"title":13,"slug":49},{"slug":80,"title":81,"logo":82,"baseline":83,"categories":84},"useorigin","Origin Financial","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F15075243-f5d2-4573-9045-2e4c07c4ce88.png","All-in-one financial platform for budgeting, investing, and AI-powered planning",[85,89,93],{"id":86,"title":87,"slug":88},36,"Finance","finance",{"id":90,"title":91,"slug":92},56,"Accounting","accounting",{"id":61,"title":62,"slug":63},{"uuid":95,"title":96,"description":97,"canonical_path":98,"image":99,"width":100,"height":101,"image_alt":102,"kind":46,"categories":103,"app":105},"bdeecdb7-eafe-4615-9201-bb1f25ffa693","Zaro UI component","An AI-powered knowledge management interface with data visualization and quick access to documents.","\u002Fexamples\u002Fapps\u002Fzaro\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3ab5190d-9b10-4c43-91b5-ddc2a8835fb7.png",1252,1218,"UI component from Zaro",[104],{"id":12,"title":13,"slug":49},{"slug":106,"title":107,"logo":108,"baseline":109,"categories":110},"zaro","Zaro","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdcfeb606-2235-48bf-83e3-948e2ac20719.png","AI workspace with agents and apps for business automation",[111,115,116,120],{"id":112,"title":113,"slug":114},23,"Collaboration","collaboration",{"id":61,"title":62,"slug":63},{"id":117,"title":118,"slug":119},22,"Knowledge Management","knowledge-management",{"id":121,"title":122,"slug":123},46,"Analytics","analytics",{"uuid":125,"title":126,"description":127,"canonical_path":128,"image":129,"width":130,"height":131,"image_alt":132,"kind":46,"categories":133,"app":135},"ea480980-2798-426d-811c-73ea3fbeb108","Riverside UI component","A live streaming interface displaying two speakers and integrations with multiple social media platforms.","\u002Fexamples\u002Fapps\u002Friverside\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F419bb4c1-5e01-4785-9d02-0c11e827c95f.png",2504,1202,"UI component from Riverside",[134],{"id":12,"title":13,"slug":49},{"slug":136,"title":137,"logo":138,"baseline":139,"categories":140},"riverside","Riverside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcc94468d-7b59-49b7-b969-3aee258a2348.png","HD podcast and video recording and editing software",[141],{"id":142,"title":143,"slug":144},100,"Video","video",{"uuid":146,"title":147,"description":148,"canonical_path":149,"image":150,"width":151,"height":152,"image_alt":153,"kind":46,"categories":154,"app":156},"800773b3-95f5-4fad-9bcc-00b5b2ea28d0","Lithic UI component","A data visualization showing monetary values linked to transaction statuses or fee types using colored lines.","\u002Fexamples\u002Fapps\u002Flithic\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F05ad155d-dc21-479b-833e-b1b63fea0ae5.png",511,412,"UI component from Lithic",[155],{"id":12,"title":13,"slug":49},{"slug":157,"title":158,"logo":159,"baseline":160,"categories":161},"lithic","Lithic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F29eef334-64df-456e-bb65-9d93c535b644.png","Programmable card issuing and money movement platform",[162,163,167],{"id":86,"title":87,"slug":88},{"id":164,"title":165,"slug":166},39,"Payments","payments",{"id":168,"title":169,"slug":170},37,"Developer APIs","developer-apis",{"uuid":172,"title":173,"description":174,"canonical_path":175,"image":176,"width":177,"height":177,"image_alt":178,"kind":46,"categories":179,"app":181},"5b3f429a-58f9-47bf-a5a4-400dca2a3472","Dock UI component","A task management interface showing a list of next steps and detailed information for a selected step, including status, assignee, action button, video, and subtasks.","\u002Fexamples\u002Fapps\u002Fdock\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffef35482-0933-486c-8b13-641a1741734d.png",1400,"UI component from Dock",[180],{"id":12,"title":13,"slug":49},{"slug":182,"title":183,"logo":184,"baseline":185,"categories":186},"dock","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdock-k4tgvy1y.png","The new way to manage external relationships",[187,188],{"id":112,"title":113,"slug":114},{"id":189,"title":190,"slug":191},29,"Task Management","task-management",{"uuid":193,"title":194,"canonical_path":195,"image":196,"width":197,"height":198,"image_alt":199,"kind":46,"categories":200,"app":202},"a48837ad-7556-4b69-ae7b-1e27da9df546","Appwrite UI component","\u002Fexamples\u002Fapps\u002Fappwrite\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F64a245c4-ddfa-42f6-a404-3c7761401dc0.png",2522,1341,"UI component from Appwrite",[201],{"id":12,"title":13,"slug":49},{"slug":203,"title":204,"logo":205,"baseline":206,"categories":207},"appwrite","Appwrite","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Faba3119b-0179-4fbd-b6d0-2bb3a0bfda07.png","Open-source backend platform for building and scaling apps with Auth, Database, Storage, Functions, Realtime, Messaging, and Sites.",[208,209,210],{"id":57,"title":58,"slug":59},{"id":168,"title":169,"slug":170},{"id":211,"title":212,"slug":213},45,"Open Source","open-source",{"uuid":215,"title":216,"description":217,"canonical_path":218,"image":219,"width":220,"height":221,"image_alt":222,"kind":46,"categories":223,"app":225},"ae9aeeaf-e36f-4383-b825-e2000df688fc","Transaction Categorization Diagram","Interactive radial visualization showing how transaction categories map to types like Regular, Internal Transfers, and Income during onboarding","\u002Fexamples\u002Fapps\u002Fcopilot-money\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc2071edb-58a0-4969-8704-cecc19fb1fce.png",877,953,"Transaction Categorization Diagram from Copilot",[224],{"id":12,"title":13,"slug":49},{"slug":226,"title":227,"logo":228,"baseline":229,"categories":230},"copilot-money","Copilot","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F598cc9dd-791e-42fb-9fac-8f3f362f10ac.png","Personal finance app for organizing money across devices",[231],{"id":86,"title":87,"slug":88},{"uuid":233,"title":234,"description":235,"canonical_path":236,"image":237,"width":238,"height":239,"image_alt":240,"kind":46,"categories":241,"app":243},"77228590-3540-44c3-a1c9-cfa77468f865","Amie UI component","An integration map displaying various application sources connected to destinations via a central application.","\u002Fexamples\u002Fapps\u002Famie\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7cc7d046-2e5c-422d-8570-83a5fb2f5b42.png",2212,1465,"UI component from Amie",[242],{"id":12,"title":13,"slug":49},{"slug":244,"title":245,"logo":246,"baseline":247,"categories":248},"amie","Amie","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Famie-929f0269.png","The joyful productivity app",[249,253,254,258],{"id":250,"title":251,"slug":252},101,"Calendar","calendar",{"id":189,"title":190,"slug":191},{"id":255,"title":256,"slug":257},30,"Productivity","productivity",{"id":61,"title":62,"slug":63},{"uuid":260,"title":261,"description":262,"canonical_path":263,"image":264,"width":265,"height":266,"image_alt":267,"kind":46,"categories":268,"app":270},"15dfdfac-06a7-45c5-9813-010bb5831929","Poolside UI component","An isometric diagram illustrating a layered system architecture with components like agents, IDE, terminal, API, organizational data, and models, connected by feedback loops.","\u002Fexamples\u002Fapps\u002Fpoolside\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F61aba293-7ed9-49f4-aba4-4dde78adaa09.png",918,1143,"UI component from Poolside",[269],{"id":12,"title":13,"slug":49},{"slug":271,"title":272,"logo":273,"baseline":274,"categories":275},"poolside","Poolside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fde1e48e8-a8ea-49fc-a7ae-809596fc1bd8.png","Iterate on web apps, APIs, and CLIs from scratch, in a single workspace",[276],{"id":61,"title":62,"slug":63},{"uuid":278,"title":279,"description":280,"canonical_path":281,"image":282,"width":283,"height":284,"image_alt":285,"kind":46,"categories":286,"app":288},"b0b1f0f5-2abb-496a-8999-10bbd32c8e2f","Mailchimp UI component","An illustration depicting two stylized figures surrounded by abstract data visualization elements.","\u002Fexamples\u002Fapps\u002Fmailchimp\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0327c3ea-1c64-4cc1-9d2b-4b5575b65a99.png",1336,1592,"UI component from Mailchimp",[287],{"id":12,"title":13,"slug":49},{"slug":289,"title":290,"logo":291,"baseline":292,"categories":293},"mailchimp","Mailchimp","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmailchimp-bd8e0c89.png","All-in-one marketing platform for small business",[294,298,302],{"id":295,"title":296,"slug":297},25,"Marketing","marketing",{"id":299,"title":300,"slug":301},27,"Email Newsletters","email-newsletters",{"id":303,"title":304,"slug":305},68,"SMS","sms",[],[308,311,314,317,320,323,326,329,332,335,338,341,344,347,350],{"label":309,"to":310},"Feature Page","\u002Fexamples\u002Fpages\u002Ffeature-page",{"label":312,"to":313},"Product Page","\u002Fexamples\u002Fpages\u002Fproduct-page",{"label":315,"to":316},"Onboarding Checklist","\u002Fexamples\u002Fscreens\u002Fonboarding-checklist",{"label":318,"to":319},"Landing Page","\u002Fexamples\u002Fpages\u002Flanding-page",{"label":321,"to":322},"Alloy design examples","\u002Fexamples\u002Fapps\u002Falloy",{"label":324,"to":325},"Origin Financial design examples","\u002Fexamples\u002Fapps\u002Fuseorigin",{"label":327,"to":328},"Zaro design examples","\u002Fexamples\u002Fapps\u002Fzaro",{"label":330,"to":331},"Riverside design examples","\u002Fexamples\u002Fapps\u002Friverside",{"label":333,"to":334},"Lithic design examples","\u002Fexamples\u002Fapps\u002Flithic",{"label":336,"to":337},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdock",{"label":339,"to":340},"Appwrite design examples","\u002Fexamples\u002Fapps\u002Fappwrite",{"label":342,"to":343},"Copilot design examples","\u002Fexamples\u002Fapps\u002Fcopilot-money",{"label":345,"to":346},"Amie design examples","\u002Fexamples\u002Fapps\u002Famie",{"label":348,"to":349},"Poolside design examples","\u002Fexamples\u002Fapps\u002Fpoolside",{"label":351,"to":352},"Mailchimp design examples","\u002Fexamples\u002Fapps\u002Fmailchimp",{"published_at":354,"updated_at":355},"2022-09-01T11:04:47.000Z","2026-09-17T10:44:16.000Z"]