[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fmocha\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":198,"links":199,"dates":218},"\u002Fexamples\u002Fapps\u002Fmocha\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Mocha UI components examples - Nicelydone","Browse Mocha UI component design examples. Preview individual interface elements and explore related component categories. Create beautiful websites with…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3f326879-1225-46c8-9ccc-c0e439d488c8.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},"Mocha design examples","\u002Fexamples\u002Fapps\u002Fmocha",{"label":23,"to":4},"Mocha UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Mocha UI component design examples. Preview individual interface elements and explore related component categories. Create beautiful websites with words, not code",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"categories":35},"Mocha","mocha","Create beautiful websites with words, not code","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fd9d4dea4-3f03-4b97-b9a1-d776442fd100.png","https:\u002F\u002Fgetmocha.com",[36,40,44],{"id":37,"title":38,"slug":39},7,"Web Development","web-development",{"id":41,"title":42,"slug":43},80,"Artificial Intelligence","artificial-intelligence",{"id":45,"title":46,"slug":47},96,"No code","no-code",[49,64,77,90,103,116,126,139,152,162,175,185],{"uuid":50,"title":51,"description":52,"canonical_path":4,"image":11,"width":53,"height":54,"image_alt":55,"kind":56,"categories":57,"app":62},"b1a3e260-c5eb-431a-8f84-309bda351711","Mocha UI component","A horizontal tab navigation bar with three options, where 'Usage' is the currently selected tab.",575,151,"UI component from Mocha","component",[58],{"id":59,"title":60,"slug":61},233,"Tabs","tabs",{"slug":31,"title":30,"logo":33,"categories":63},[],{"uuid":65,"title":51,"description":66,"canonical_path":4,"image":67,"width":68,"height":69,"image_alt":55,"kind":56,"categories":70,"app":75},"6cf601fd-3df9-409a-b27a-4043dfae3e02","A user interface displaying a pricing plan comparison for a software service, including current plan status and upgrade options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F34788359-c984-4959-809b-c2e88f4319eb.png",1840,1467,[71],{"id":72,"title":73,"slug":74},303,"Pricing section","pricing-section",{"slug":31,"title":30,"logo":33,"categories":76},[],{"uuid":78,"title":51,"description":79,"canonical_path":4,"image":80,"width":81,"height":82,"image_alt":55,"kind":56,"categories":83,"app":88},"fee69bdb-82a5-4e7e-935f-99e9ad265e13","A dropdown menu displaying user account details, subscription status, navigation links, and application settings.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fed3cf295-5f1f-4218-a41c-31f0c7ba493e.png",619,1125,[84],{"id":85,"title":86,"slug":87},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":89},[],{"uuid":91,"title":51,"description":92,"canonical_path":4,"image":93,"width":94,"height":95,"image_alt":55,"kind":56,"categories":96,"app":101},"6bbd7ec3-8e4a-48c0-94ee-a730a0f82b9e","A section displaying project size progress with an upgrade prompt.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffb05da8a-5936-49fc-a9ad-68b357852e9c.png",1558,373,[97],{"id":98,"title":99,"slug":100},213,"Progress indicator","progress-indicator",{"slug":31,"title":30,"logo":33,"categories":102},[],{"uuid":104,"title":51,"description":105,"canonical_path":4,"image":106,"width":107,"height":108,"image_alt":55,"kind":56,"categories":109,"app":114},"523e650d-c672-477d-9717-e4c9d22a5cc2","A web analytics dashboard displaying real-time visitor and pageview data with a line chart.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3b588a7c-302d-44b7-bdc8-f421ab6802ae.png",2730,1181,[110],{"id":111,"title":112,"slug":113},186,"Charts","charts",{"slug":31,"title":30,"logo":33,"categories":115},[],{"uuid":117,"title":51,"description":118,"canonical_path":4,"image":119,"width":120,"height":121,"image_alt":55,"kind":56,"categories":122,"app":124},"1f943202-29ea-47bb-8acf-8f01e5c16300","A modal dialog for publishing an application, displaying its URL and options for domain management.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F387e61fe-57e9-40dd-a2e8-0b2da8bfd4bf.png",735,520,[123],{"id":85,"title":86,"slug":87},{"slug":31,"title":30,"logo":33,"categories":125},[],{"uuid":127,"title":51,"description":128,"canonical_path":4,"image":129,"width":130,"height":131,"image_alt":55,"kind":56,"categories":132,"app":137},"d2a98e5d-a984-4b25-af73-7dab8930f7fd","A modal dialog informing the user about a premium feature and prompting an upgrade to access it, listing benefits.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc82c9771-bfd6-4829-b30a-aae20b37291b.png",715,913,[133],{"id":134,"title":135,"slug":136},284,"Modal","modal",{"slug":31,"title":30,"logo":33,"categories":138},[],{"uuid":140,"title":51,"description":141,"canonical_path":4,"image":142,"width":143,"height":144,"image_alt":55,"kind":56,"categories":145,"app":150},"00b40841-4953-413a-b282-ad97d7401378","A user interface element displaying a setting for watermark visibility, accompanied by an upgrade prompt and a toggle switch.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F766e739f-4468-4ad6-ab24-9a24158ea7ff.png",1564,331,[146],{"id":147,"title":148,"slug":149},236,"Toggle\u002FSwitch","toggle-switch",{"slug":31,"title":30,"logo":33,"categories":151},[],{"uuid":153,"title":51,"description":154,"canonical_path":4,"image":155,"width":156,"height":157,"image_alt":55,"kind":56,"categories":158,"app":160},"ad01b044-3fe3-4037-8d52-0f164bea449c","A dropdown menu is displayed with options for managing a task or project, including rename, duplicate, download code, debug, and delete, alongside a nested popover for debugging actions like showing logs and restarting a sandbox.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb38ae70d-18d2-4bfd-a7a7-ac64d2a13af1.png",1003,474,[159],{"id":85,"title":86,"slug":87},{"slug":31,"title":30,"logo":33,"categories":161},[],{"uuid":163,"title":51,"description":164,"canonical_path":4,"image":165,"width":166,"height":167,"image_alt":55,"kind":56,"categories":168,"app":173},"10b55804-b365-4349-977b-d10f0672b425","A card explaining the concept of \"Production\" within an application, featuring a title, explanatory text, a \"Learn more\" link, pagination, and a \"Next\" button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff0b7caac-4adf-4698-908e-0c6f877b861d.png",622,358,[169],{"id":170,"title":171,"slug":172},227,"Stepper","stepper",{"slug":31,"title":30,"logo":33,"categories":174},[],{"uuid":176,"title":51,"description":177,"canonical_path":4,"image":178,"width":179,"height":180,"image_alt":55,"kind":56,"categories":181,"app":183},"47546e59-d84d-4d85-9187-af2adc7b06b7","A dropdown menu displaying options for different device resolutions, such as desktop, tablet, and mobile, with the current selection indicated by a checkmark.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9cc87ff2-0cd1-456c-871e-97f0e9a29a23.png",509,334,[182],{"id":85,"title":86,"slug":87},{"slug":31,"title":30,"logo":33,"categories":184},[],{"uuid":186,"title":51,"description":187,"canonical_path":4,"image":188,"width":189,"height":190,"image_alt":55,"kind":56,"categories":191,"app":196},"4396d72b-1167-4e56-8fbe-031d16f67625","A modal dialog for publishing an application, presenting fields for URL, status, and visibility.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8c2a1e68-0759-409b-a883-8246bb297ec2.png",1236,1105,[192],{"id":193,"title":194,"slug":195},281,"Slideshow","slideshow",{"slug":31,"title":30,"logo":33,"categories":197},[],[],[200,203,206,209,212,215],{"label":201,"to":202},"Mocha product screens","\u002Fexamples\u002Fapps\u002Fmocha\u002Fscreens",{"label":204,"to":205},"Mocha marketing pages","\u002Fexamples\u002Fapps\u002Fmocha\u002Fmarketing",{"label":207,"to":208},"Mocha user flows","\u002Fexamples\u002Fapps\u002Fmocha\u002Fflows",{"label":210,"to":211},"Web Development app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fweb-development",{"label":213,"to":214},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"label":216,"to":217},"No code app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fno-code",{"published_at":219,"updated_at":220},"2026-04-10T18:47:25.000Z","2026-09-13T13:44:12.000Z"]