[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Favatar":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":319,"links":320,"dates":369},"\u002Fexamples\u002Fcomponents\u002Favatar","collection","components",true,{"example_count":9,"app_count":10},136,73,{"id":12,"title":13,"description":14},169,"Avatar","Explore how interfaces represent people and accounts in a small space. Look at how profile images, initials, and grouped avatars relate to names and surrounding content.",{"title":16,"description":17,"og_image":18},"Avatar UI examples - Nicelydone","Avatar UI design examples from SaaS apps. Explore how interfaces represent people and accounts in a small space. Look at how profile images, initials, and…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2cb4410d-1328-4fe4-95cc-afc6817fe272.jpg",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Avatar UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Avatar UI design examples from SaaS apps. Explore how interfaces represent people and accounts in a small space. Look at how profile images, initials, and grouped avatars relate to names and…",[32],{"title":33,"description":14,"links":34},"About Avatar",[],[36],"136 UI components",[38,72,95,120,141,167,192,214,236,255,276,299],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"9074fec4-699e-11f1-8c91-960002ce6e45","AI Prompt Composer","A text input field with pre-filled interactive tags and action icons, along with a submit button.","\u002Fexamples\u002Fapps\u002Ftown\u002Fcomponents",1836,300,"AI Prompt Composer from Town","component",[48],{"id":12,"title":13,"slug":49},"avatar",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"town","Town","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fb6cf707d-df49-4190-b803-766b8914df89.png","The AI assistant that manages your inbox, schedules meetings, and handles busywork.",[56,60,64,68],{"id":57,"title":58,"slug":59},80,"Artificial Intelligence","artificial-intelligence",{"id":61,"title":62,"slug":63},30,"Productivity","productivity",{"id":65,"title":66,"slug":67},92,"Email","email",{"id":69,"title":70,"slug":71},101,"Calendar","calendar",{"uuid":73,"title":74,"description":75,"canonical_path":76,"image":77,"width":78,"height":79,"image_alt":80,"kind":46,"categories":81,"app":83},"68e4cebb-47f2-4b40-9593-4ca2dc062471","User list item","A list item displaying a user's avatar, name, email address, and role.","\u002Fexamples\u002Fapps\u002Fsana\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbdcf44b4-1f71-4b58-b584-dbeb581a3128.png",1224,323,"User list item from Sana",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"sana","Sana","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsana-f298da05.png","Your AI assistant for work",[89,90,91],{"id":57,"title":58,"slug":59},{"id":61,"title":62,"slug":63},{"id":92,"title":93,"slug":94},22,"Knowledge Management","knowledge-management",{"uuid":96,"title":97,"description":98,"canonical_path":99,"image":100,"width":101,"height":102,"image_alt":103,"kind":46,"categories":104,"app":106},"3c1eed5a-d4ec-4e91-b1f8-4b3d3d748b9f","Activity notification item","A list item showing a new follower notification. It features a user avatar with a small badge icon indicating the follow action, alongside the username, a relative timestamp, and the text 'Followed you'.","\u002Fexamples\u002Fapps\u002Fthreads-net\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdea3b001-ee22-49ac-ae0f-7d6c031c98ee.png",481,208,"Activity notification item from Threads",[105],{"id":12,"title":13,"slug":49},{"slug":107,"title":108,"logo":109,"baseline":110,"categories":111},"threads-net","Threads","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fthreads-vea0b9m3.png","Say more with Threads",[112,116],{"id":113,"title":114,"slug":115},14,"Social","social",{"id":117,"title":118,"slug":119},49,"Social Network","social-network",{"uuid":121,"title":122,"description":123,"canonical_path":124,"image":125,"width":126,"height":127,"image_alt":128,"kind":46,"categories":129,"app":131},"a2c1b64d-82b3-45f7-85d7-cb6010092bca","User profile dropdown trigger","A user profile dropdown trigger showing a circular red avatar, the username 'bertrand', and an up\u002Fdown chevron icon.","\u002Fexamples\u002Fapps\u002Fbasic-bookmarks\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F14e560c1-a79e-4164-b955-91cbade355dc.png",318,160,"User profile dropdown trigger from (Basic) Bookmarks",[130],{"id":12,"title":13,"slug":49},{"slug":132,"title":133,"logo":134,"baseline":135,"categories":136},"basic-bookmarks","(Basic) Bookmarks","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fbasic-bookmarks-ab73e6b4.png","A home for your internet discoveries",[137],{"id":138,"title":139,"slug":140},65,"Social Bookmarking","social-bookmarking",{"uuid":142,"title":143,"description":144,"canonical_path":145,"image":146,"width":147,"height":148,"image_alt":149,"kind":46,"categories":150,"app":152},"9dfabd42-9fb1-4fb8-9edb-b93671a1a0da","User profile row","A list item displaying a user's avatar, name, and email address.","\u002Fexamples\u002Fapps\u002Ftodoist\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc14571bc-8362-498e-b07d-845cbb4ca150.png",580,186,"User profile row from Todoist",[151],{"id":12,"title":13,"slug":49},{"slug":153,"title":154,"logo":155,"baseline":156,"categories":157},"todoist","Todoist","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftodoist-3d6ecdba.png","The to do list to organize work & life",[158,162,163],{"id":159,"title":160,"slug":161},29,"Task Management","task-management",{"id":61,"title":62,"slug":63},{"id":164,"title":165,"slug":166},23,"Collaboration","collaboration",{"uuid":168,"title":169,"description":170,"canonical_path":171,"image":172,"width":173,"height":174,"image_alt":175,"kind":46,"categories":176,"app":178},"e3c34580-88c6-4ff0-9a85-5952e610fd59","Pending Invite Row","A row displaying an invited user's email address alongside a 'Pending Invite' badge, indicating their invitation status.","\u002Fexamples\u002Fapps\u002Frender\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb261d84b-2c19-4d35-8a8e-3ceca6432be2.png",736,180,"Pending Invite Row from Render",[177],{"id":12,"title":13,"slug":49},{"slug":179,"title":180,"logo":181,"baseline":182,"categories":183},"render","Render","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Frender-5d06ef7d.png","Cloud application hosting for developers",[184,188],{"id":185,"title":186,"slug":187},48,"Developer Tools","developer-tools",{"id":189,"title":190,"slug":191},7,"Web Development","web-development",{"uuid":193,"title":194,"description":195,"canonical_path":196,"image":197,"width":198,"height":199,"image_alt":200,"kind":46,"categories":201,"app":203},"9b5a1664-0241-456d-9bfb-85f60755d139","Attribution block","A block showing who last updated an item, featuring a generic avatar, user name, and a timestamp.","\u002Fexamples\u002Fapps\u002Fbytescale\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F12820c3e-cbde-4c2f-b1b0-3ba953b19570.png",798,277,"Attribution block from Bytescale",[202],{"id":12,"title":13,"slug":49},{"slug":204,"title":205,"logo":206,"baseline":207,"categories":208},"bytescale","Bytescale","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fbytescale-70575edd.png","Simple file storage & file processing apis for developers",[209,213],{"id":210,"title":211,"slug":212},37,"Developer APIs","developer-apis",{"id":185,"title":186,"slug":187},{"uuid":215,"title":216,"description":217,"canonical_path":218,"image":219,"width":220,"height":221,"image_alt":222,"kind":46,"categories":223,"app":225},"2513a9da-70a8-4d69-84ad-0c9f9cbc14bd","Dock UI component","A user profile card with name and team","\u002Fexamples\u002Fapps\u002Fdockio\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F12a50b22-9b8f-47fb-91a0-73ad2c202fef.png",494,192,"UI component from Dock",[224],{"id":12,"title":13,"slug":49},{"slug":226,"title":227,"logo":228,"baseline":229,"categories":230},"dockio","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdockio-cc9d7e66.png","End data fraud and reduce verification costs",[231,235],{"id":232,"title":233,"slug":234},78,"Security","security",{"id":210,"title":211,"slug":212},{"uuid":237,"title":238,"description":239,"canonical_path":240,"image":241,"width":221,"height":221,"image_alt":242,"kind":46,"categories":243,"app":245},"8bcf1534-9c91-44cc-8da7-048fb709bdc5","Wiza UI component","A user profile avatar","\u002Fexamples\u002Fapps\u002Fwiza\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8bc76862-5e5a-4e1e-86eb-715988b2246a.png","UI component from Wiza",[244],{"id":12,"title":13,"slug":49},{"slug":246,"title":247,"logo":248,"baseline":249,"categories":250},"wiza","Wiza","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fwiza-21efd5aa.png","Wiza makes prospecting magical",[251],{"id":252,"title":253,"slug":254},53,"CRM","crm",{"uuid":256,"title":74,"description":257,"canonical_path":258,"image":259,"width":260,"height":261,"image_alt":262,"kind":46,"categories":263,"app":265},"6d17e8ca-9b59-47ca-9daf-7cebd8fcfdef","A list item displaying a user's avatar with a status badge, their name, username, and their role.","\u002Fexamples\u002Fapps\u002Frefrakt\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F96d312e7-b9e9-4677-8f6e-6fcacfbb5f1d.png",1020,212,"User list item from Refrakt",[264],{"id":12,"title":13,"slug":49},{"slug":266,"title":267,"logo":268,"baseline":269,"categories":270},"refrakt","Refrakt","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Frefrakt-4bd9bf02.png","A more meaningful home for photography",[271,272],{"id":117,"title":118,"slug":119},{"id":273,"title":274,"slug":275},31,"Photography","photography",{"uuid":277,"title":278,"description":279,"canonical_path":280,"image":281,"width":282,"height":283,"image_alt":284,"kind":46,"categories":285,"app":287},"23666940-336d-41cb-bd68-b7223fd93cbb","Editable User Profile Header","A user profile header featuring a large circular avatar with an initial, an edit icon overlay, the user's name, and their email address.","\u002Fexamples\u002Fapps\u002Ffigma\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3a8f65f3-559b-4e46-be40-119e63e846a9.png",458,301,"Editable User Profile Header from Figma",[286],{"id":12,"title":13,"slug":49},{"slug":288,"title":289,"logo":290,"baseline":291,"categories":292},"figma","Figma","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffigma-569108c3.png","The collaborative interface design tool",[293,297,298],{"id":294,"title":295,"slug":296},8,"Design","design",{"id":164,"title":165,"slug":166},{"id":185,"title":186,"slug":187},{"uuid":300,"title":301,"description":302,"canonical_path":303,"image":304,"width":305,"height":306,"image_alt":307,"kind":46,"categories":308,"app":310},"72a61fe2-1bb7-47b3-842c-4b9f911ac065","Contact Profile Snippet","A small profile snippet showing a user's avatar with a badge, their email address, and location.","\u002Fexamples\u002Fapps\u002Fsuperhuman\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1cdd3fdf-82d3-4866-8d3c-2e3570c85cfc.png",714,290,"Contact Profile Snippet from Superhuman",[309],{"id":12,"title":13,"slug":49},{"slug":311,"title":312,"logo":313,"baseline":314,"categories":315},"superhuman","Superhuman","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsuperhuman-3d38669b.png","The fastest email experience ever made",[316,317,318],{"id":61,"title":62,"slug":63},{"id":65,"title":66,"slug":67},{"id":69,"title":70,"slug":71},[],[321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366],{"label":322,"to":323},"Team Management","\u002Fexamples\u002Fscreens\u002Fteam-management",{"label":325,"to":326},"Roles & Permissions","\u002Fexamples\u002Fscreens\u002Froles-and-permissions",{"label":328,"to":329},"Invite Teammates","\u002Fexamples\u002Fscreens\u002Finvite-teammates",{"label":331,"to":332},"AI Assistant","\u002Fexamples\u002Fscreens\u002Fai-assistant",{"label":334,"to":335},"Town design examples","\u002Fexamples\u002Fapps\u002Ftown",{"label":337,"to":338},"Sana design examples","\u002Fexamples\u002Fapps\u002Fsana",{"label":340,"to":341},"Threads design examples","\u002Fexamples\u002Fapps\u002Fthreads-net",{"label":343,"to":344},"(Basic) Bookmarks design examples","\u002Fexamples\u002Fapps\u002Fbasic-bookmarks",{"label":346,"to":347},"Todoist design examples","\u002Fexamples\u002Fapps\u002Ftodoist",{"label":349,"to":350},"Render design examples","\u002Fexamples\u002Fapps\u002Frender",{"label":352,"to":353},"Bytescale design examples","\u002Fexamples\u002Fapps\u002Fbytescale",{"label":355,"to":356},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdockio",{"label":358,"to":359},"Wiza design examples","\u002Fexamples\u002Fapps\u002Fwiza",{"label":361,"to":362},"Refrakt design examples","\u002Fexamples\u002Fapps\u002Frefrakt",{"label":364,"to":365},"Figma design examples","\u002Fexamples\u002Fapps\u002Ffigma",{"label":367,"to":368},"Superhuman design examples","\u002Fexamples\u002Fapps\u002Fsuperhuman",{"published_at":370,"updated_at":371},"2022-08-21T20:07:35.000Z","2026-09-23T12:10:22.000Z"]