[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fmodal\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":44,"showcases":213,"links":214,"dates":248},"\u002Fexamples\u002Fapps\u002Fmodal\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Modal UI components examples - Nicelydone","Browse Modal UI component design examples. Preview individual interface elements and explore related component categories. Cloud functions reimagined","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8c80e86e-c721-4f80-9057-3ee0dfbb5d55.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},"Modal design examples","\u002Fexamples\u002Fapps\u002Fmodal",{"label":23,"to":4},"Modal 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,"twitter_username":34,"categories":35},"Modal","modal","Cloud functions reimagined","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmodal-2babc1b9.png","https:\u002F\u002Fmodal.com","modal_labs",[36,40],{"id":37,"title":38,"slug":39},37,"Developer APIs","developer-apis",{"id":41,"title":42,"slug":43},48,"Developer Tools","developer-tools",[45,60,75,90,102,117,130,145,159,171,186,201],{"uuid":46,"title":47,"description":48,"canonical_path":4,"image":11,"width":49,"height":50,"image_alt":51,"kind":52,"categories":53,"app":58},"5d198346-8d10-43b8-9b13-050554395011","Activity sparkline","A minimal bar chart sparkline showing a single recent activity event against a baseline of inactivity.",792,224,"Activity sparkline from Modal","component",[54],{"id":55,"title":56,"slug":57},186,"Charts","charts",{"slug":30,"title":29,"logo":32,"categories":59},[],{"uuid":61,"title":62,"description":63,"canonical_path":4,"image":64,"width":65,"height":66,"image_alt":67,"kind":52,"categories":68,"app":73},"63e1469d-eeef-4556-9c58-5726d3beda1f","Modal UI component","A billing usage modal","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F31185860-3c91-42eb-bcae-966bafa9d608.png",895,583,"UI component from Modal",[69],{"id":70,"title":71,"slug":72},213,"Progress indicator","progress-indicator",{"slug":30,"title":29,"logo":32,"categories":74},[],{"uuid":76,"title":77,"description":78,"canonical_path":4,"image":79,"width":80,"height":81,"image_alt":82,"kind":52,"categories":83,"app":88},"3764663a-3992-4cf8-9023-4902c721ccf4","Workspace switcher dropdown","An open dropdown menu showing the currently selected workspace and an option to manage workspaces.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F78131230-67ff-4393-94c5-5c0643bbc071.png",678,339,"Workspace switcher dropdown from Modal",[84],{"id":85,"title":86,"slug":87},190,"Dropdown menu","dropdown-menu",{"slug":30,"title":29,"logo":32,"categories":89},[],{"uuid":91,"title":92,"description":93,"canonical_path":4,"image":94,"width":95,"height":96,"image_alt":97,"kind":52,"categories":98,"app":100},"9542d20f-72cb-483f-8667-1a3aabcaca37","Usage progress bar","A progress bar showing the amount of included credits used, currently at 0%. It includes a title, a link for more details, and min\u002Fmax labels on the bar.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F01950cde-be30-4938-9daf-b46834260c20.png",1374,579,"Usage progress bar from Modal",[99],{"id":70,"title":71,"slug":72},{"slug":30,"title":29,"logo":32,"categories":101},[],{"uuid":103,"title":104,"description":105,"canonical_path":4,"image":106,"width":107,"height":108,"image_alt":109,"kind":52,"categories":110,"app":115},"790a5614-c145-48f2-be03-1b1307028e81","Notification setting toggle","A settings row with a title, description, and an active toggle switch to enable email notifications for deployed function failures.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb7fb36f1-5b6e-4d16-b49a-490f8e5b2373.png",2018,352,"Notification setting toggle from Modal",[111],{"id":112,"title":113,"slug":114},236,"Toggle\u002FSwitch","toggle-switch",{"slug":30,"title":29,"logo":32,"categories":116},[],{"uuid":118,"title":62,"description":119,"canonical_path":4,"image":120,"width":121,"height":122,"image_alt":67,"kind":52,"categories":123,"app":128},"699f6cf0-111d-4964-9f5b-c3d5322453ab","A table of secrets with creation and last used information.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2b03b139-b0c8-468d-af5c-809264c3c1a3.png",2624,708,[124],{"id":125,"title":126,"slug":127},248,"Table","table-2",{"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":52,"categories":138,"app":143},"7fba34eb-dc99-475d-9c5e-4ef4f18ebee5","App Header","A dark-themed application header featuring a logo, workspace selector, billing status, community links, user avatar, and a secondary navigation bar with tabs.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fda6b54a6-f688-4371-ad3c-58751d197606.png",3280,434,"App Header from Modal",[139],{"id":140,"title":141,"slug":142},240,"Horizontal navigation","horizontal-navigation",{"slug":30,"title":29,"logo":32,"categories":144},[],{"uuid":146,"title":147,"description":148,"canonical_path":4,"image":149,"width":121,"height":150,"image_alt":151,"kind":52,"categories":152,"app":157},"d0a38730-8495-4d7b-b579-8889006c5ad3","Onboarding Stepper Accordion","A two-step accordion guiding users through downloading and configuring a Python client, and running code. The first step is expanded, showing instructions and a code block.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc63c7e54-e463-42e7-a544-f62020abb809.png",900,"Onboarding Stepper Accordion from Modal",[153],{"id":154,"title":155,"slug":156},168,"Accordion","accordion",{"slug":30,"title":29,"logo":32,"categories":158},[],{"uuid":160,"title":147,"description":161,"canonical_path":4,"image":162,"width":121,"height":163,"image_alt":151,"kind":52,"categories":164,"app":169},"a479a462-77a1-45b0-959a-d40036293c34","A vertical accordion acting as a stepper for onboarding. The first step is expanded, showing instructions and a code block for installing a Python client. The second step is collapsed.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6849dc49-aebd-43a4-8e11-36f897f1e0eb.png",1072,[165],{"id":166,"title":167,"slug":168},227,"Stepper","stepper",{"slug":30,"title":29,"logo":32,"categories":170},[],{"uuid":172,"title":173,"description":174,"canonical_path":4,"image":175,"width":176,"height":177,"image_alt":178,"kind":52,"categories":179,"app":184},"f252a9ae-0178-4a61-9426-5bc0fe5181e8","Terminal command block","A dark-themed code block displaying two terminal commands for installing a package and generating a token.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F30791f09-ac01-4c0c-9051-0598dfef90c6.png",2556,396,"Terminal command block from Modal",[180],{"id":181,"title":182,"slug":183},187,"Code block","code-block",{"slug":30,"title":29,"logo":32,"categories":185},[],{"uuid":187,"title":188,"description":189,"canonical_path":4,"image":190,"width":191,"height":192,"image_alt":193,"kind":52,"categories":194,"app":199},"f7d308e9-b689-4b0f-a4d2-a01c6a50924b","Example card","A card displaying a code example with a title, description, and a button to view the source on GitHub. The top half features a blurred green background with a document icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe1dc7da6-c7df-4028-ba8a-36cbddb7c3d8.png",864,854,"Example card from Modal",[195],{"id":196,"title":197,"slug":198},189,"FAQ","faq",{"slug":30,"title":29,"logo":32,"categories":200},[],{"uuid":202,"title":203,"description":204,"canonical_path":4,"image":205,"width":206,"height":207,"image_alt":208,"kind":52,"categories":209,"app":211},"5e32e8d5-0b82-4f24-9ffc-6c21eef615ad","FAQ Accordion","A dark-themed FAQ section using an accordion layout. It displays a list of questions within bordered cards. One card is expanded to reveal a detailed answer containing text and highlighted pricing figures.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F03aea83f-418d-4666-a0e9-48116dfe3d8b.png",1936,1657,"FAQ Accordion from Modal",[210],{"id":196,"title":197,"slug":198},{"slug":30,"title":29,"logo":32,"categories":212},[],[],[215,218,221,224,227,230,232,236,240,244],{"label":216,"to":217},"Modal product screens","\u002Fexamples\u002Fapps\u002Fmodal\u002Fscreens",{"label":219,"to":220},"Modal marketing pages","\u002Fexamples\u002Fapps\u002Fmodal\u002Fmarketing",{"label":222,"to":223},"Modal user flows","\u002Fexamples\u002Fapps\u002Fmodal\u002Fflows",{"label":225,"to":226},"Developer APIs app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-apis",{"label":228,"to":229},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":231,"to":18},"All SaaS app examples",{"label":233,"to":234,"description":235},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":237,"to":238,"description":239},"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":241,"to":242,"description":243},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":245,"to":246,"description":247},"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":249,"updated_at":250},"2024-02-05T10:58:14.000Z","2026-09-19T12:10:13.000Z"]