[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fnavattic\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":51,"showcases":206,"links":207,"dates":226},"\u002Fexamples\u002Fapps\u002Fnavattic\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Navattic UI components examples - Nicelydone","Browse Navattic UI component design examples. Preview individual interface elements and explore related component categories. Make buying easier with demos","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0c34669a-59cb-4dba-bda5-26bcd1cabf60.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},"Navattic design examples","\u002Fexamples\u002Fapps\u002Fnavattic",{"label":23,"to":4},"Navattic 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},"Navattic","navattic","Make buying easier with demos","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fd26bd2f9-ee1e-4acc-9d41-1890fbd1b5c4.png","https:\u002F\u002Fnavattic.com",[35,39,43,47],{"id":36,"title":37,"slug":38},25,"Marketing","marketing",{"id":40,"title":41,"slug":42},80,"Artificial Intelligence","artificial-intelligence",{"id":44,"title":45,"slug":46},96,"No code","no-code",{"id":48,"title":49,"slug":50},103,"Demo Automation","demo-automation",[52,67,80,93,106,119,132,145,154,167,180,193],{"uuid":53,"title":54,"description":55,"canonical_path":4,"image":11,"width":56,"height":57,"image_alt":58,"kind":59,"categories":60,"app":65},"b76e70ff-8c45-4d6c-ae18-f8eb126da828","Navattic UI component","A data table displaying properties for visitors and accounts with options to manage them.",2147,1472,"UI component from Navattic","component",[61],{"id":62,"title":63,"slug":64},248,"Table","table-2",{"slug":30,"title":29,"logo":32,"categories":66},[],{"uuid":68,"title":54,"description":69,"canonical_path":4,"image":70,"width":71,"height":72,"image_alt":58,"kind":59,"categories":73,"app":78},"805c8b9e-40a5-4fa9-a91f-f1fd264910df","An alert message informing about custom domains decreasing visitor identification.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4f8d98b4-79b5-4712-bd3e-1bba459c3ebb.png",2142,382,[74],{"id":75,"title":76,"slug":77},167,"Alert","alert",{"slug":30,"title":29,"logo":32,"categories":79},[],{"uuid":81,"title":54,"description":82,"canonical_path":4,"image":83,"width":84,"height":85,"image_alt":58,"kind":59,"categories":86,"app":91},"2092882f-17f9-4e47-bb55-14ee585a1d29","A user interface element displaying a setting with a toggle switch.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8b372c07-65af-4bd2-add5-47500ea5edec.png",1388,339,[87],{"id":88,"title":89,"slug":90},179,"Checkbox & radio","checkbox-radio",{"slug":30,"title":29,"logo":32,"categories":92},[],{"uuid":94,"title":54,"description":95,"canonical_path":4,"image":96,"width":97,"height":98,"image_alt":58,"kind":59,"categories":99,"app":104},"841e0a34-0f72-4fcc-8247-88ad2fea9bbe","A success notification message with a checkmark icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F85d69dcd-57e0-4100-bf1f-09ad598aa2de.png",816,185,[100],{"id":101,"title":102,"slug":103},247,"Notification Toast","notification-element",{"slug":30,"title":29,"logo":32,"categories":105},[],{"uuid":107,"title":54,"description":108,"canonical_path":4,"image":109,"width":110,"height":111,"image_alt":58,"kind":59,"categories":112,"app":117},"a2221211-84c1-4548-b815-81ffcfbc4141","A date range selection interface featuring a dropdown menu for relative periods and a calendar for specific date selection.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F769dcce9-9b0a-4448-8bf0-4007a100e825.png",967,766,[113],{"id":114,"title":115,"slug":116},184,"Datepicker","datepicker",{"slug":30,"title":29,"logo":32,"categories":118},[],{"uuid":120,"title":54,"description":121,"canonical_path":4,"image":122,"width":123,"height":124,"image_alt":58,"kind":59,"categories":125,"app":130},"6a38dc94-2b02-4a0d-b550-d78af8f0a477","A multi-column navigation menu for a SaaS application, displaying various categories like demos, analytics, leads, and account settings.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F42717f70-f349-4873-85bf-715cb0eec307.png",1031,1756,[126],{"id":127,"title":128,"slug":129},209,"Vertical navigation","vertical-navigation",{"slug":30,"title":29,"logo":32,"categories":131},[],{"uuid":133,"title":54,"description":134,"canonical_path":4,"image":135,"width":136,"height":137,"image_alt":58,"kind":59,"categories":138,"app":143},"24477d6b-0e46-437c-be89-afcfc4f74745","A popover menu providing options to switch between grid and list views and to select which columns are displayed.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1e3dcd86-8829-4c78-a15e-ee3ae0f48bc3.png",440,794,[139],{"id":140,"title":141,"slug":142},190,"Dropdown menu","dropdown-menu",{"slug":30,"title":29,"logo":32,"categories":144},[],{"uuid":146,"title":54,"description":147,"canonical_path":4,"image":148,"width":149,"height":124,"image_alt":58,"kind":59,"categories":150,"app":152},"b167f47d-d08c-4b2a-8822-6373c7ad776a","A sidebar navigation menu for a SaaS application, displaying various categories like demos, analytics, leads, and management, with a vertical navigation bar on the far left.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe98e2898-d53d-497f-875a-eaad75066169.png",591,[151],{"id":127,"title":128,"slug":129},{"slug":30,"title":29,"logo":32,"categories":153},[],{"uuid":155,"title":54,"description":156,"canonical_path":4,"image":157,"width":158,"height":159,"image_alt":58,"kind":59,"categories":160,"app":165},"3d935f68-484a-4bbe-8492-f84ed812ebe7","An empty state screen prompting the user to create a new product demo.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb6b5b00e-48ca-4a4b-8e93-dc49d328b0c6.png",2432,1098,[161],{"id":162,"title":163,"slug":164},302,"Empty state","emptystate",{"slug":30,"title":29,"logo":32,"categories":166},[],{"uuid":168,"title":54,"description":169,"canonical_path":4,"image":170,"width":171,"height":172,"image_alt":58,"kind":59,"categories":173,"app":178},"b458c405-81e6-4f99-81fb-9417d0e40ae6","A file upload interface with drag and drop functionality and supported file types listed.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9078148c-4644-429c-a873-5f615a0862ab.png",1592,873,[174],{"id":175,"title":176,"slug":177},188,"File upload input","file-upload-input",{"slug":30,"title":29,"logo":32,"categories":179},[],{"uuid":181,"title":54,"description":182,"canonical_path":4,"image":183,"width":184,"height":185,"image_alt":58,"kind":59,"categories":186,"app":191},"1fa2f7e4-49a7-4d46-b1eb-333d9a0d7e44","A user interface for selecting how a product will be used, presented as a list of options with radio buttons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff27128fe-3925-4660-9065-be02fc39d596.png",1600,1262,[187],{"id":188,"title":189,"slug":190},216,"Radio button","radio-button",{"slug":30,"title":29,"logo":32,"categories":192},[],{"uuid":194,"title":54,"description":195,"canonical_path":4,"image":196,"width":197,"height":198,"image_alt":58,"kind":59,"categories":199,"app":204},"9d24444c-6d40-42fd-be1b-caafe2e8e662","A screen from an onboarding or survey flow asking how the user heard about the brand, featuring a progress bar.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd16dff45-c7ad-46da-ac75-8ddc1dbd2fb2.png",1035,522,[200],{"id":201,"title":202,"slug":203},213,"Progress indicator","progress-indicator",{"slug":30,"title":29,"logo":32,"categories":205},[],[],[208,211,214,217,220,223],{"label":209,"to":210},"Navattic product screens","\u002Fexamples\u002Fapps\u002Fnavattic\u002Fscreens",{"label":212,"to":213},"Navattic marketing pages","\u002Fexamples\u002Fapps\u002Fnavattic\u002Fmarketing",{"label":215,"to":216},"Navattic user flows","\u002Fexamples\u002Fapps\u002Fnavattic\u002Fflows",{"label":218,"to":219},"Marketing app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmarketing",{"label":221,"to":222},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"label":224,"to":225},"No code app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fno-code",{"published_at":227,"updated_at":228},"2026-05-04T09:43:45.000Z","2026-09-13T13:02:39.000Z"]