[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fdona\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":43,"showcases":207,"links":208,"dates":242},"\u002Fexamples\u002Fapps\u002Fdona\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Dona UI components examples - Nicelydone","Browse Dona UI component design examples. Preview individual interface elements and explore related component categories. A more humane to-do list","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fad69951c-28cb-43cd-a530-0c8d40fa14b7.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},"Dona design examples","\u002Fexamples\u002Fapps\u002Fdona",{"label":23,"to":4},"Dona UI components examples",{"title":23,"eyebrow":25,"description":10,"sections":26,"body":27},"SaaS app examples",[],[],{"title":29,"slug":30,"description":31,"logo":32,"url":33,"categories":34},"Dona","dona","A more humane to-do list","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdona-56ac63b8.png","https:\u002F\u002Fdona.ai",[35,39],{"id":36,"title":37,"slug":38},30,"Productivity","productivity",{"id":40,"title":41,"slug":42},29,"Task Management","task-management",[44,59,74,85,100,115,130,142,152,164,179,194],{"uuid":45,"title":46,"description":47,"canonical_path":4,"image":11,"width":48,"height":49,"image_alt":50,"kind":51,"categories":52,"app":57},"18f7f030-51d9-4795-a115-23bbf5b9509e","Settings toggle","A horizontal row containing a text label and a toggle switch, currently in the active state.",1368,305,"Settings toggle from Dona","component",[53],{"id":54,"title":55,"slug":56},236,"Toggle\u002FSwitch","toggle-switch",{"slug":30,"title":29,"logo":32,"categories":58},[],{"uuid":60,"title":61,"description":62,"canonical_path":4,"image":63,"width":64,"height":65,"image_alt":66,"kind":51,"categories":67,"app":72},"615957d5-4610-453d-a23a-8e53dd1580d1","Dona UI component","Appearance settings modal","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Faac7a7c0-3c19-4f78-a61f-d71f7d374f15.png",1416,1002,"UI component from Dona",[68],{"id":69,"title":70,"slug":71},256,"Theme settings","theme-settings",{"slug":30,"title":29,"logo":32,"categories":73},[],{"uuid":75,"title":76,"description":77,"canonical_path":4,"image":78,"width":79,"height":65,"image_alt":80,"kind":51,"categories":81,"app":83},"08e7f442-c8e8-45cd-9600-dd8da6d4d5aa","Appearance settings","A settings panel for configuring the app's appearance, featuring visual cards for selecting the theme (Light, Dark, Black, Auto) and view density (Default, Compact).","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F82ce77d3-746f-453a-b660-89ed01fcbbf3.png",1413,"Appearance settings from Dona",[82],{"id":69,"title":70,"slug":71},{"slug":30,"title":29,"logo":32,"categories":84},[],{"uuid":86,"title":87,"description":88,"canonical_path":4,"image":89,"width":90,"height":91,"image_alt":92,"kind":51,"categories":93,"app":98},"ecea1a55-dbe6-45f6-8a85-f1663aa38e52","Color and Emoji Picker Popover","A popover menu allowing users to select a color or emoji for a list. It features tabs for 'Colors' and 'Emoji', a grid of preset color swatches, and an input field for a custom hex color code.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F012713ed-29e7-4b84-b1bb-edcd307648ae.png",777,580,"Color and Emoji Picker Popover from Dona",[94],{"id":95,"title":96,"slug":97},183,"Color picker","color-picker",{"slug":30,"title":29,"logo":32,"categories":99},[],{"uuid":101,"title":102,"description":103,"canonical_path":4,"image":104,"width":105,"height":106,"image_alt":107,"kind":51,"categories":108,"app":113},"4a1a8501-c984-4a1e-bcb5-5d519b085d43","Date picker popover","A date picker popover displaying a calendar for June 2023 with quick selection buttons for Today, Tomorrow, and In 2 days. The 23rd of June is currently selected.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F94b0e423-3cac-4657-b8ca-e3954161851e.png",670,794,"Date picker popover from Dona",[109],{"id":110,"title":111,"slug":112},184,"Datepicker","datepicker",{"slug":30,"title":29,"logo":32,"categories":114},[],{"uuid":116,"title":117,"description":118,"canonical_path":4,"image":119,"width":120,"height":121,"image_alt":122,"kind":51,"categories":123,"app":128},"84f1007b-8272-427a-bf70-3c9681bf4c84","List selection dropdown","An open dropdown menu allowing the user to select a list category for a task. The current selection is 'Personal', indicated by a checkmark.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffb6d0d97-b6c1-491c-ae2c-502990f7ce11.png",435,560,"List selection dropdown from Dona",[124],{"id":125,"title":126,"slug":127},190,"Dropdown menu","dropdown-menu",{"slug":30,"title":29,"logo":32,"categories":129},[],{"uuid":131,"title":132,"description":133,"canonical_path":4,"image":134,"width":135,"height":136,"image_alt":137,"kind":51,"categories":138,"app":140},"0dc1f8b2-7516-41fe-87fb-97afe684a5e7","Theme Toggle Group","A segmented control for selecting the application theme, with options for Light, Dark, and Black. The 'Dark' option is currently selected.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F92c0a8de-528f-4203-a17b-9a6481fb6e6b.png",641,270,"Theme Toggle Group from Dona",[139],{"id":69,"title":70,"slug":71},{"slug":30,"title":29,"logo":32,"categories":141},[],{"uuid":143,"title":61,"description":144,"canonical_path":4,"image":145,"width":146,"height":147,"image_alt":66,"kind":51,"categories":148,"app":150},"4cb82ae8-4d1a-4e62-916c-207a87591e9c","A modal menu with theme options and settings.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F98940acf-0555-40ed-8c58-5168fc0d8903.png",565,873,[149],{"id":125,"title":126,"slug":127},{"slug":30,"title":29,"logo":32,"categories":151},[],{"uuid":153,"title":154,"description":155,"canonical_path":4,"image":156,"width":157,"height":158,"image_alt":159,"kind":51,"categories":160,"app":162},"82ec3a70-b30d-44b8-9908-7609a406ac0f","Theme toggle group","A segmented control for selecting the application theme, with options for Light, Dark, and Black.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe2064e8a-71ae-4c29-b75b-597ba6b4c490.png",604,241,"Theme toggle group from Dona",[161],{"id":69,"title":70,"slug":71},{"slug":30,"title":29,"logo":32,"categories":163},[],{"uuid":165,"title":166,"description":167,"canonical_path":4,"image":168,"width":169,"height":170,"image_alt":171,"kind":51,"categories":172,"app":177},"08fee118-e04d-4172-9032-eb22097b0863","Sidebar Navigation","A vertical navigation sidebar showing task lists with item counts and a selected state for the Home item.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3bf65c73-e7a0-4837-b36c-d385cdd57703.png",739,1673,"Sidebar Navigation from Dona",[173],{"id":174,"title":175,"slug":176},209,"Vertical navigation","vertical-navigation",{"slug":30,"title":29,"logo":32,"categories":178},[],{"uuid":180,"title":181,"description":182,"canonical_path":4,"image":183,"width":184,"height":185,"image_alt":186,"kind":51,"categories":187,"app":192},"ec10cd5c-2643-42d7-a852-17f426c0f1f7","Minimalist footer","A simple footer containing copyright information, creator credits, legal links, and a social media icon button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fde464082-814b-414a-9ae5-0791cd4c047f.png",2457,383,"Minimalist footer from Dona",[188],{"id":189,"title":190,"slug":191},202,"Footer","footer",{"slug":30,"title":29,"logo":32,"categories":193},[],{"uuid":195,"title":61,"description":196,"canonical_path":4,"image":197,"width":198,"height":199,"image_alt":66,"kind":51,"categories":200,"app":205},"cf54bf70-f9e3-4eba-a9f9-9513159289e6","A simple header with a logo and navigation links.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5acdd990-723d-48f5-a324-4e411740786c.png",2334,203,[201],{"id":202,"title":203,"slug":204},258,"Header","header",{"slug":30,"title":29,"logo":32,"categories":206},[],[],[209,212,215,218,221,224,226,230,234,238],{"label":210,"to":211},"Dona product screens","\u002Fexamples\u002Fapps\u002Fdona\u002Fscreens",{"label":213,"to":214},"Dona marketing pages","\u002Fexamples\u002Fapps\u002Fdona\u002Fmarketing",{"label":216,"to":217},"Dona user flows","\u002Fexamples\u002Fapps\u002Fdona\u002Fflows",{"label":219,"to":220},"Productivity app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fproductivity",{"label":222,"to":223},"Task Management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ftask-management",{"label":225,"to":18},"All SaaS app examples",{"label":227,"to":228,"description":229},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":231,"to":232,"description":233},"SaaS marketing page examples","\u002Fexamples\u002Fpages","Browse real SaaS marketing pages grouped by page type, from landing pages to pricing and customer story pages.",{"label":235,"to":236,"description":237},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":239,"to":240,"description":241},"User flow examples from SaaS apps","\u002Fexamples\u002Fflows","Explore user flow examples for sign-up, onboarding, billing, and other SaaS tasks. Compare the order of screens and preview the opening steps from real apps.",{"published_at":243,"updated_at":244},"2022-05-22T17:37:04.000Z","2026-09-14T12:25:37.000Z"]