[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ftodoist\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":212,"links":213,"dates":232},"\u002Fexamples\u002Fapps\u002Ftodoist\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Todoist UI components examples - Nicelydone","Browse Todoist UI component design examples. Preview individual interface elements and explore related component categories. The to do list to organize work…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffda04e8a-dca4-4029-bbc3-84b080ba9816.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},"Todoist design examples","\u002Fexamples\u002Fapps\u002Ftodoist",{"label":23,"to":4},"Todoist UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Todoist UI component design examples. Preview individual interface elements and explore related component categories. The to do list to organize work & life",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":31,"categories":35},"Todoist","todoist","The to do list to organize work & life","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftodoist-3d6ecdba.png","https:\u002F\u002Ftodoist.com",[36,40,44],{"id":37,"title":38,"slug":39},29,"Task Management","task-management",{"id":41,"title":42,"slug":43},30,"Productivity","productivity",{"id":45,"title":46,"slug":47},23,"Collaboration","collaboration",[49,64,79,94,105,120,135,145,160,171,185,200],{"uuid":50,"title":51,"description":52,"canonical_path":4,"image":11,"width":53,"height":54,"image_alt":55,"kind":56,"categories":57,"app":62},"27bea928-c2e6-451d-bc13-f76f23de48e3","App download toast","A dark-themed toast notification prompting the user to download the macOS desktop app, featuring an Apple icon, title, description, a download action, and a close button.",1142,255,"App download toast from Todoist","component",[58],{"id":59,"title":60,"slug":61},247,"Notification Toast","notification-element",{"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},"f8df7a57-5002-43b6-adae-57457698a801","Progress stepper","A horizontal progress stepper showing five completed steps and one active step, followed by a title.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4df6da77-a0f3-4731-be97-4b88c8be9356.png",1070,465,"Progress stepper from Todoist",[73],{"id":74,"title":75,"slug":76},213,"Progress indicator","progress-indicator",{"slug":31,"title":30,"logo":33,"categories":78},[],{"uuid":80,"title":81,"description":82,"canonical_path":4,"image":83,"width":84,"height":85,"image_alt":86,"kind":56,"categories":87,"app":92},"f84a1b11-f13c-4f2f-8ad7-120871bfaab2","Notifications feed","A list of notifications with a segmented control to filter by All or Unread. The unread notification has a gray background and a green left border.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd5215fba-ea42-4a3f-a3d1-c9b5bb423929.png",1856,762,"Notifications feed from Todoist",[88],{"id":89,"title":90,"slug":91},249,"Timeline & history","timeline-history",{"slug":31,"title":30,"logo":33,"categories":93},[],{"uuid":95,"title":96,"description":97,"canonical_path":4,"image":98,"width":84,"height":99,"image_alt":100,"kind":56,"categories":101,"app":103},"93c0c9f8-f55a-408c-8248-77d576659e0f","Activity Feed","A chronological list of user activities, showing added and completed tasks with timestamps and project locations.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fabbd06f3-29d5-4e55-b233-635e2a856f0e.png",1705,"Activity Feed from Todoist",[102],{"id":89,"title":90,"slug":91},{"slug":31,"title":30,"logo":33,"categories":104},[],{"uuid":106,"title":107,"description":108,"canonical_path":4,"image":109,"width":110,"height":111,"image_alt":112,"kind":56,"categories":113,"app":118},"f292fccd-9cf0-4031-8a2a-396570a8f519","Sidebar visibility settings","A list of checkboxes allowing the user to select which items appear in the sidebar.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd86c9fa5-22c3-4165-b9a4-2d1ea5262f25.png",456,535,"Sidebar visibility settings from Todoist",[114],{"id":115,"title":116,"slug":117},179,"Checkbox & radio","checkbox-radio",{"slug":31,"title":30,"logo":33,"categories":119},[],{"uuid":121,"title":122,"description":123,"canonical_path":4,"image":124,"width":125,"height":126,"image_alt":127,"kind":56,"categories":128,"app":133},"60e58e04-0f9f-4533-b977-dbe82fcde800","Theme selection card","A selectable card representing a theme option, featuring a miniature preview of the theme's layout and colors, a title, and a checkmark indicating it is currently selected.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb6af64ab-aa53-4940-9262-e47c100e056a.png",544,312,"Theme selection card from Todoist",[129],{"id":130,"title":131,"slug":132},174,"Card","card",{"slug":31,"title":30,"logo":33,"categories":134},[],{"uuid":136,"title":122,"description":137,"canonical_path":4,"image":138,"width":139,"height":140,"image_alt":127,"kind":56,"categories":141,"app":143},"5ed25338-a0db-4e7e-add7-02fe17819d56","A selectable card representing a theme option, featuring a stylized preview of the theme's layout and colors alongside its name.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1219126b-378f-4ee0-a3cc-dc1b078904b0.png",528,296,[142],{"id":130,"title":131,"slug":132},{"slug":31,"title":30,"logo":33,"categories":144},[],{"uuid":146,"title":147,"description":148,"canonical_path":4,"image":149,"width":150,"height":151,"image_alt":152,"kind":56,"categories":153,"app":158},"6444f92e-7614-448c-a2f7-fa6fed2bb7e7","Theme Settings Panel","A settings panel allowing users to customize the application's appearance. It includes toggles for syncing themes and auto dark mode, followed by a grid of selectable theme preview cards.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5a805dc7-a052-4c92-aa5e-f4d37bf557d0.png",1721,1212,"Theme Settings Panel from Todoist",[154],{"id":155,"title":156,"slug":157},256,"Theme settings","theme-settings",{"slug":31,"title":30,"logo":33,"categories":159},[],{"uuid":161,"title":162,"description":163,"canonical_path":4,"image":164,"width":165,"height":69,"image_alt":166,"kind":56,"categories":167,"app":169},"b14ea005-b48d-4f3b-8a77-1ca607259e7d","Theme settings panel","A settings panel allowing the user to select a color theme for their workspace, with options to sync the theme and enable auto dark mode.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdd8c7636-17d3-4ec3-8de9-7f725301f241.png",1528,"Theme settings panel from Todoist",[168],{"id":155,"title":156,"slug":157},{"slug":31,"title":30,"logo":33,"categories":170},[],{"uuid":172,"title":173,"description":174,"canonical_path":4,"image":175,"width":176,"height":177,"image_alt":178,"kind":56,"categories":179,"app":183},"6f8cc3c5-1167-4733-8d31-f6a2ddf0fd24","Feedback prompt banner","A small, rounded banner prompting the user for feedback, featuring an icon, a short question, and an inline text link.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1260b101-64ef-4e00-9d64-aeccb42fde9c.png",733,212,"Feedback prompt banner from Todoist",[180],{"id":140,"title":181,"slug":182},"Feedback","feedback",{"slug":31,"title":30,"logo":33,"categories":184},[],{"uuid":186,"title":187,"description":188,"canonical_path":4,"image":189,"width":190,"height":191,"image_alt":192,"kind":56,"categories":193,"app":198},"7f709b96-0eb3-4704-b923-068b30ab4b08","Nested Date and Time Picker","A complex task creation modal with nested popovers for selecting due dates, times, durations, and time zones.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6f7789bf-b7c8-4322-b2eb-3348a314fe81.png",1990,1514,"Nested Date and Time Picker from Todoist",[194],{"id":195,"title":196,"slug":197},184,"Datepicker","datepicker",{"slug":31,"title":30,"logo":33,"categories":199},[],{"uuid":201,"title":202,"description":203,"canonical_path":4,"image":204,"width":205,"height":206,"image_alt":207,"kind":56,"categories":208,"app":210},"e166388b-7216-43af-aeb8-ed481b60e85d","Project Calendar View","A monthly calendar view displaying scheduled tasks within a project. It includes a header with the project title, current month\u002Fyear, navigation controls, and a grid of days showing individual task items with checkboxes and times.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7540c6b8-cc0c-4654-8148-b25970c54d2d.png",2464,1571,"Project Calendar View from Todoist",[209],{"id":195,"title":196,"slug":197},{"slug":31,"title":30,"logo":33,"categories":211},[],[],[214,217,220,223,226,229],{"label":215,"to":216},"Todoist product screens","\u002Fexamples\u002Fapps\u002Ftodoist\u002Fscreens",{"label":218,"to":219},"Todoist marketing pages","\u002Fexamples\u002Fapps\u002Ftodoist\u002Fmarketing",{"label":221,"to":222},"Todoist user flows","\u002Fexamples\u002Fapps\u002Ftodoist\u002Fflows",{"label":224,"to":225},"Task Management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ftask-management",{"label":227,"to":228},"Productivity app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fproductivity",{"label":230,"to":231},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"published_at":233,"updated_at":234},"2016-07-14T08:30:36.000Z","2026-09-20T12:15:19.000Z"]