[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fasana\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":211,"links":212,"dates":231},"\u002Fexamples\u002Fapps\u002Fasana\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Asana UI components examples - Nicelydone","Browse Asana UI component design examples. Preview individual interface elements and explore related component categories. The easiest way for teams to…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F49dbb3e0-2fcf-4880-a0ae-47f7c6e6682e.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},"Asana design examples","\u002Fexamples\u002Fapps\u002Fasana",{"label":23,"to":4},"Asana UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Asana UI component design examples. Preview individual interface elements and explore related component categories. The easiest way for teams to track their work",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":31,"categories":35},"Asana","asana","The easiest way for teams to track their work","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fasana-a1a0b7cd.png","https:\u002F\u002Fasana.com",[36,40,44],{"id":37,"title":38,"slug":39},23,"Collaboration","collaboration",{"id":41,"title":42,"slug":43},29,"Task Management","task-management",{"id":45,"title":46,"slug":47},30,"Productivity","productivity",[49,64,79,92,105,118,133,146,161,173,183,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},"0a6bef8e-9152-45bf-b3bc-4914bd61515b","Asana UI component","A modal window displaying reporting permissions.",1186,278,"UI component from Asana","component",[58],{"id":59,"title":60,"slug":61},167,"Alert","alert",{"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},"ad4455a4-ed6b-4238-9d43-9a211c8eabd6","Feature Gate Modal","A modal dialog blocking access to a feature, prompting the user to upgrade their plan. It includes a title, a close button, a prominent upgrade banner with a 'Contact sales' CTA, and descriptive text explaining the restricted feature.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F74b3265d-d4c6-4517-8510-f9c74c533eeb.png",1209,490,"Feature Gate Modal from Asana",[73],{"id":74,"title":75,"slug":76},255,"Upgrade your plan","upgrade-your-plan",{"slug":31,"title":30,"logo":33,"categories":78},[],{"uuid":80,"title":51,"description":81,"canonical_path":4,"image":82,"width":83,"height":84,"image_alt":55,"kind":56,"categories":85,"app":90},"b7d9190a-0b23-41e3-8007-05770e28900a","A template builder with a stepper","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6c71fd64-dcb5-4a9e-afce-a2f14d3546d6.png",536,654,[86],{"id":87,"title":88,"slug":89},227,"Stepper","stepper",{"slug":31,"title":30,"logo":33,"categories":91},[],{"uuid":93,"title":51,"description":94,"canonical_path":4,"image":95,"width":96,"height":97,"image_alt":55,"kind":56,"categories":98,"app":103},"2b23a689-5d0e-4565-bdc7-5f9ded551925","A project card with a progress bar","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbe58c028-f871-49c5-8fae-8796941d53b2.png",2064,476,[99],{"id":100,"title":101,"slug":102},213,"Progress indicator","progress-indicator",{"slug":31,"title":30,"logo":33,"categories":104},[],{"uuid":106,"title":51,"description":107,"canonical_path":4,"image":108,"width":109,"height":110,"image_alt":55,"kind":56,"categories":111,"app":116},"8d77a6d3-7911-4bf6-9e1e-7e766c6fd4ae","A project timeline view with tasks and assignments.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5d5dc470-be55-47ba-85f4-980ee055d124.png",2537,1258,[112],{"id":113,"title":114,"slug":115},249,"Timeline & history","timeline-history",{"slug":31,"title":30,"logo":33,"categories":117},[],{"uuid":119,"title":120,"description":121,"canonical_path":4,"image":122,"width":123,"height":124,"image_alt":125,"kind":56,"categories":126,"app":131},"78291ee5-31f5-4083-abb9-c6b78025bdac","Status Update Header","A top bar for drafting a status update, featuring breadcrumb navigation on the left and publishing controls on the right. The controls include a reminder toggle, privacy setting, recipient list with avatars, and a primary post button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F680972b6-3af3-409d-a496-50140e826a26.png",3024,171,"Status Update Header from Asana",[127],{"id":128,"title":129,"slug":130},240,"Horizontal navigation","horizontal-navigation",{"slug":31,"title":30,"logo":33,"categories":132},[],{"uuid":134,"title":51,"description":135,"canonical_path":4,"image":136,"width":137,"height":138,"image_alt":55,"kind":56,"categories":139,"app":144},"be91b0af-ee1d-498d-84f6-8cd9f72f953a","A modal with a text input and a button","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa1c7a942-4d3f-4ea8-9c6a-420a11cf20a6.png",1536,344,[140],{"id":141,"title":142,"slug":143},294,"Artificial intelligence","ai",{"slug":31,"title":30,"logo":33,"categories":145},[],{"uuid":147,"title":148,"description":149,"canonical_path":4,"image":150,"width":151,"height":152,"image_alt":153,"kind":56,"categories":154,"app":159},"7048ab91-f3af-415f-a691-a774981cd7f5","Bar chart","A vertical bar chart displaying incomplete tasks by project. It features a y-axis for task count, an x-axis with angled project names, and data labels above each bar.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4f78101a-230f-4dd5-b1f0-422ef01d34dd.png",1353,1519,"Bar chart from Asana",[155],{"id":156,"title":157,"slug":158},186,"Charts","charts",{"slug":31,"title":30,"logo":33,"categories":160},[],{"uuid":162,"title":51,"description":163,"canonical_path":4,"image":164,"width":110,"height":165,"image_alt":55,"kind":56,"categories":166,"app":171},"7408ec44-e4b4-4ee5-9ea8-84a44efb23a1","A notification feed with various updates and messages.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F28010960-0672-4694-a34c-d23dcb4a6fb6.png",945,[167],{"id":168,"title":169,"slug":170},286,"Vertical list","vertical-list",{"slug":31,"title":30,"logo":33,"categories":172},[],{"uuid":174,"title":51,"description":175,"canonical_path":4,"image":176,"width":177,"height":178,"image_alt":55,"kind":56,"categories":179,"app":181},"173c2af6-95f5-4842-8216-5ed7e5288dbf","A calendar view of tasks.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F20b077d8-e022-465f-ba85-ad19cedc1d27.png",2528,896,[180],{"id":113,"title":114,"slug":115},{"slug":31,"title":30,"logo":33,"categories":182},[],{"uuid":184,"title":185,"description":186,"canonical_path":4,"image":187,"width":188,"height":189,"image_alt":190,"kind":56,"categories":191,"app":196},"5884ba0d-f894-4f21-89ba-099831620716","Task Actions Menu","A dropdown menu providing various actions for a task, including adding to projects, tagging, creating follow-ups, AI features like summarizing, and destructive actions like deleting.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa313fbcd-e859-4201-817f-80b2b8f8d384.png",774,1168,"Task Actions Menu from Asana",[192],{"id":193,"title":194,"slug":195},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":197},[],{"uuid":199,"title":51,"description":200,"canonical_path":4,"image":201,"width":202,"height":203,"image_alt":55,"kind":56,"categories":204,"app":209},"1af7a305-9b1d-487d-aa1e-e2bea17a0150","A modal alert informing the user that a subtask was marked as a milestone.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8f837d93-4179-4fd5-bd98-c9fef93d01bc.png",586,302,[205],{"id":206,"title":207,"slug":208},247,"Notification Toast","notification-element",{"slug":31,"title":30,"logo":33,"categories":210},[],[],[213,216,219,222,225,228],{"label":214,"to":215},"Asana product screens","\u002Fexamples\u002Fapps\u002Fasana\u002Fscreens",{"label":217,"to":218},"Asana marketing pages","\u002Fexamples\u002Fapps\u002Fasana\u002Fmarketing",{"label":220,"to":221},"Asana user flows","\u002Fexamples\u002Fapps\u002Fasana\u002Fflows",{"label":223,"to":224},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"label":226,"to":227},"Task Management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ftask-management",{"label":229,"to":230},"Productivity app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fproductivity",{"published_at":232,"updated_at":233},"2016-08-17T08:55:23.000Z","2026-09-13T13:02:39.000Z"]