[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fcoda\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":53,"showcases":214,"links":215,"dates":234},"\u002Fexamples\u002Fapps\u002Fcoda\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Coda UI components examples - Nicelydone","Browse Coda UI component design examples. Preview individual interface elements and explore related component categories. The doc for everyone, meet the…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F398c3bbb-3e88-4309-a5fc-5df875009e1a.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},"Coda design examples","\u002Fexamples\u002Fapps\u002Fcoda",{"label":23,"to":4},"Coda UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Coda UI component design examples. Preview individual interface elements and explore related component categories. The doc for everyone, meet the evolution of docs",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Coda","coda","The doc for everyone, meet the evolution of docs","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcoda-1278fa67.png","https:\u002F\u002Fcoda.io","coda_hq",[37,41,45,49],{"id":38,"title":39,"slug":40},23,"Collaboration","collaboration",{"id":42,"title":43,"slug":44},30,"Productivity","productivity",{"id":46,"title":47,"slug":48},22,"Knowledge Management","knowledge-management",{"id":50,"title":51,"slug":52},96,"No code","no-code",[54,69,84,99,112,127,139,152,161,174,184,199],{"uuid":55,"title":56,"description":57,"canonical_path":4,"image":11,"width":58,"height":59,"image_alt":60,"kind":61,"categories":62,"app":67},"398c3bbb-3e88-4309-a5fc-5df875009e1a","Upgrade prompt card","A small card prompting the user to upgrade their plan to access a restricted feature. It includes an illustrative icon, a title, a brief explanation, and a primary call-to-action button.",760,506,"Upgrade prompt card from Coda","component",[63],{"id":64,"title":65,"slug":66},255,"Upgrade your plan","upgrade-your-plan",{"slug":31,"title":30,"logo":33,"categories":68},[],{"uuid":70,"title":71,"description":72,"canonical_path":4,"image":73,"width":74,"height":75,"image_alt":76,"kind":61,"categories":77,"app":82},"3b12cd3c-0d0e-4363-9181-2e7f80c9d12a","Onboarding tooltip","A blue tooltip card providing onboarding guidance, featuring a title, description, a 'Learn more' link, and a 'Got it' button with a thumbs-up icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3b12cd3c-0d0e-4363-9181-2e7f80c9d12a.png",764,420,"Onboarding tooltip from Coda",[78],{"id":79,"title":80,"slug":81},235,"Tips","tips",{"slug":31,"title":30,"logo":33,"categories":83},[],{"uuid":85,"title":86,"description":87,"canonical_path":4,"image":88,"width":89,"height":90,"image_alt":91,"kind":61,"categories":92,"app":97},"610f1697-c227-4800-9cc6-d9f9387798f3","Coda UI component","A statistics modal showing document usage.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F610f1697-c227-4800-9cc6-d9f9387798f3.png",733,892,"UI component from Coda",[93],{"id":94,"title":95,"slug":96},227,"Stepper","stepper",{"slug":31,"title":30,"logo":33,"categories":98},[],{"uuid":100,"title":86,"description":101,"canonical_path":4,"image":102,"width":103,"height":104,"image_alt":91,"kind":61,"categories":105,"app":110},"4b4d1acc-1b78-4a50-bf45-2c4dfb056bf1","A table with task management","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4b4d1acc-1b78-4a50-bf45-2c4dfb056bf1.png",1788,721,[106],{"id":107,"title":108,"slug":109},248,"Table","table-2",{"slug":31,"title":30,"logo":33,"categories":111},[],{"uuid":113,"title":114,"description":115,"canonical_path":4,"image":116,"width":117,"height":118,"image_alt":119,"kind":61,"categories":120,"app":125},"ae6a4427-2b3c-4187-8764-6127f0830f2e","Tutorial card","A card component prompting the user to start an interactive tutorial. It features a top illustration area, a title, a brief description, and a primary call-to-action button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fae6a4427-2b3c-4187-8764-6127f0830f2e.png",772,680,"Tutorial card from Coda",[121],{"id":122,"title":123,"slug":124},174,"Card","card",{"slug":31,"title":30,"logo":33,"categories":126},[],{"uuid":128,"title":129,"description":130,"canonical_path":4,"image":131,"width":132,"height":133,"image_alt":134,"kind":61,"categories":135,"app":137},"170a559a-4540-4612-b5ea-b8512ff59a58","Tutorial progress tracker","A progress bar component showing the completion status of a tutorial, including a title, a 'See more' link, a visual progress bar, and a text counter.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F170a559a-4540-4612-b5ea-b8512ff59a58.png",731,243,"Tutorial progress tracker from Coda",[136],{"id":94,"title":95,"slug":96},{"slug":31,"title":30,"logo":33,"categories":138},[],{"uuid":140,"title":86,"description":141,"canonical_path":4,"image":142,"width":143,"height":144,"image_alt":91,"kind":61,"categories":145,"app":150},"af30c9c5-251e-4b86-b532-2d03d3f5c5af","A dropdown menu with document collaboration options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Faf30c9c5-251e-4b86-b532-2d03d3f5c5af.png",617,517,[146],{"id":147,"title":148,"slug":149},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":151},[],{"uuid":153,"title":86,"description":154,"canonical_path":4,"image":155,"width":74,"height":156,"image_alt":91,"kind":61,"categories":157,"app":159},"5768d46a-f976-40c0-ad9d-1f5bc2a89d28","A notification card showing a deleted message and an acceptance message.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5768d46a-f976-40c0-ad9d-1f5bc2a89d28.png",434,[158],{"id":122,"title":123,"slug":124},{"slug":31,"title":30,"logo":33,"categories":160},[],{"uuid":162,"title":163,"description":164,"canonical_path":4,"image":165,"image_alt":166,"kind":61,"categories":167,"app":172},"3307cb37-1222-4747-96be-0fcf9c381b7d","Version history sidebar","A sidebar panel displaying a nested list of document version history, grouped by date and user, with expandable\u002Fcollapsible sections.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3307cb37-1222-4747-96be-0fcf9c381b7d.png","Version history sidebar from Coda",[168],{"id":169,"title":170,"slug":171},249,"Timeline & history","timeline-history",{"slug":31,"title":30,"logo":33,"categories":173},[],{"uuid":175,"title":176,"description":177,"canonical_path":4,"image":178,"image_alt":179,"kind":61,"categories":180,"app":182},"43120cbf-abf5-467f-b7df-6246b736ca7b","Document settings dropdown","A dropdown menu containing document-level actions, with a nested submenu open for print and export options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F43120cbf-abf5-467f-b7df-6246b736ca7b.png","Document settings dropdown from Coda",[181],{"id":147,"title":148,"slug":149},{"slug":31,"title":30,"logo":33,"categories":183},[],{"uuid":185,"title":186,"description":187,"canonical_path":4,"image":188,"width":189,"height":190,"image_alt":191,"kind":61,"categories":192,"app":197},"f78e3bc2-7b4a-4c27-8f9d-a52c17be4355","Plan Feature List","A list of features included in a specific pricing plan, presented with checkmarks and info icons for each item.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff78e3bc2-7b4a-4c27-8f9d-a52c17be4355.png",712,535,"Plan Feature List from Coda",[193],{"id":194,"title":195,"slug":196},172,"Benefit List","benefit-list",{"slug":31,"title":30,"logo":33,"categories":198},[],{"uuid":200,"title":201,"description":202,"canonical_path":4,"image":203,"width":204,"height":205,"image_alt":206,"kind":61,"categories":207,"app":212},"f3dfeb55-03ae-4a34-9e17-6e80d96a6ae0","Export confirmation buttons","A button group containing a secondary cancel button and a primary destructive action button to export data.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff3dfeb55-03ae-4a34-9e17-6e80d96a6ae0.png",541,184,"Export confirmation buttons from Coda",[208],{"id":209,"title":210,"slug":211},277,"Button group","button-group",{"slug":31,"title":30,"logo":33,"categories":213},[],[],[216,219,222,225,228,231],{"label":217,"to":218},"Coda product screens","\u002Fexamples\u002Fapps\u002Fcoda\u002Fscreens",{"label":220,"to":221},"Coda marketing pages","\u002Fexamples\u002Fapps\u002Fcoda\u002Fmarketing",{"label":223,"to":224},"Coda user flows","\u002Fexamples\u002Fapps\u002Fcoda\u002Fflows",{"label":226,"to":227},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"label":229,"to":230},"Productivity app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fproductivity",{"label":232,"to":233},"Knowledge Management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fknowledge-management",{"published_at":235,"updated_at":236},"2023-02-20T20:45:49.000Z","2026-09-13T13:02:39.000Z"]