[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fmodal\u002Fscreens":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":368,"links":369,"dates":427},"\u002Fexamples\u002Fapps\u002Fmodal\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Modal product screens examples - Nicelydone","Browse Modal screen design examples. Preview the interface screenshots and explore related UI patterns. Cloud functions reimagined","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F29c8231b-be1a-45a0-933d-9869b85c23dd.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 product screens 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,86,106,146,172,203,231,255,279,297,330,346],{"uuid":46,"title":47,"description":48,"canonical_path":4,"image":11,"width":49,"height":50,"image_alt":51,"kind":52,"patterns":53,"component_categories":71,"app":84},"29c8231b-be1a-45a0-933d-9869b85c23dd","Authorize application","Signin screen where the user authorizes Modal Labs to access their GitHub account, featuring a prominent billing issue warning banner.",3024,1674,"Authorize application from Modal","screen",[54,63],{"id":55,"label":56,"slug":57,"rank":58,"group":59},4,"Sign In","sign-in",0,{"id":60,"label":61,"slug":62},1,"Access & Account","access-and-account",{"id":64,"label":65,"slug":66,"rank":60,"group":67},114,"Confirmation","confirmation",{"id":68,"label":69,"slug":70},12,"States & Feedback","states-and-feedback",[72,76,80],{"id":73,"title":74,"slug":75},174,"Card","card",{"id":77,"title":78,"slug":79},169,"Avatar","avatar",{"id":81,"title":82,"slug":83},175,"Button","button",{"slug":30,"title":29,"logo":32,"categories":85},[],{"uuid":87,"title":88,"description":89,"canonical_path":4,"image":90,"width":49,"height":50,"image_alt":91,"kind":52,"patterns":92,"component_categories":103,"app":104},"78742043-df5a-445b-aee6-36ccdb5d91e2","OAuth application authorized","Transitional screen indicating the user has successfully authenticated and is being redirected back to the requesting application.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F78742043-df5a-445b-aee6-36ccdb5d91e2.png","OAuth application authorized from Modal",[93,98],{"id":94,"label":95,"slug":96,"rank":58,"group":97},120,"Loading","loading",{"id":68,"label":69,"slug":70},{"id":99,"label":100,"slug":101,"rank":60,"group":102},119,"Info","info",{"id":68,"label":69,"slug":70},[],{"slug":30,"title":29,"logo":32,"categories":105},[],{"uuid":107,"title":29,"description":108,"canonical_path":4,"image":109,"width":49,"height":50,"image_alt":110,"kind":52,"patterns":111,"component_categories":125,"app":144},"bb1117af-1367-4bd6-bdbf-710ff2043ee7","Onboarding screen for a new workspace where the user is guided to install the Python client and generate an API token via a step-by-step accordion.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fbb1117af-1367-4bd6-bdbf-710ff2043ee7.png","Modal from Modal",[112,120],{"id":113,"label":114,"slug":115,"rank":58,"group":116},75,"Setup Wizard","setup-wizard",{"id":117,"label":118,"slug":119},7,"Onboarding & Education","onboarding-and-education",{"id":121,"label":122,"slug":123,"rank":60,"group":124},72,"Getting Started","getting-started",{"id":117,"label":118,"slug":119},[126,130,134,135,136,140],{"id":127,"title":128,"slug":129},168,"Accordion","accordion",{"id":131,"title":132,"slug":133},260,"Badge","badge",{"id":81,"title":82,"slug":83},{"id":77,"title":78,"slug":79},{"id":137,"title":138,"slug":139},233,"Tabs","tabs",{"id":141,"title":142,"slug":143},240,"Horizontal navigation","horizontal-navigation",{"slug":30,"title":29,"logo":32,"categories":145},[],{"uuid":147,"title":29,"description":148,"canonical_path":4,"image":149,"width":49,"height":50,"image_alt":110,"kind":52,"patterns":150,"component_categories":167,"app":170},"873816c3-68ff-42c6-a68f-edd4363f849a","Success screen confirming an API token has been created and granted to the client, featuring a celebratory confetti animation.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F873816c3-68ff-42c6-a68f-edd4363f849a.png",[151,156,158],{"id":152,"label":153,"slug":154,"rank":58,"group":155},122,"Success","success",{"id":68,"label":69,"slug":70},{"id":64,"label":65,"slug":66,"rank":60,"group":157},{"id":68,"label":69,"slug":70},{"id":159,"label":160,"slug":161,"rank":162,"group":163},95,"API Keys","api-keys",2,{"id":164,"label":165,"slug":166},10,"Settings & Admin","settings-and-admin",[168,169],{"id":77,"title":78,"slug":79},{"id":141,"title":142,"slug":143},{"slug":30,"title":29,"logo":32,"categories":171},[],{"uuid":173,"title":29,"description":174,"canonical_path":4,"image":175,"width":49,"height":176,"image_alt":110,"kind":52,"patterns":177,"component_categories":196,"app":201},"1d1e60ce-f39b-4c35-a80d-1f47c7b30a79","Onboarding screen where the user is guided to create their first app by downloading the Python client and running sample code.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F1d1e60ce-f39b-4c35-a80d-1f47c7b30a79.png",2286,[178,180,182,190],{"id":113,"label":114,"slug":115,"rank":58,"group":179},{"id":117,"label":118,"slug":119},{"id":121,"label":122,"slug":123,"rank":60,"group":181},{"id":117,"label":118,"slug":119},{"id":183,"label":184,"slug":185,"rank":162,"group":186},53,"Code Editor","code-editor",{"id":187,"label":188,"slug":189},5,"Media & Tools","media-and-tools",{"id":191,"label":192,"slug":193,"rank":194,"group":195},115,"Empty State","empty-state",3,{"id":68,"label":69,"slug":70},[197,198,199,200],{"id":127,"title":128,"slug":129},{"id":131,"title":132,"slug":133},{"id":137,"title":138,"slug":139},{"id":141,"title":142,"slug":143},{"slug":30,"title":29,"logo":32,"categories":202},[],{"uuid":204,"title":29,"description":205,"canonical_path":4,"image":206,"width":49,"height":50,"image_alt":110,"kind":52,"patterns":207,"component_categories":223,"app":229},"6d9a786b-b416-420d-87ed-ba6c2e701cf7","List view showing an empty state for deployed applications, with a toast notification confirming a recent app creation.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F6d9a786b-b416-420d-87ed-ba6c2e701cf7.png",[208,210,217],{"id":191,"label":192,"slug":193,"rank":58,"group":209},{"id":68,"label":69,"slug":70},{"id":211,"label":212,"slug":213,"rank":60,"group":214},47,"Table","table",{"id":55,"label":215,"slug":216},"Data & Analysis","data-and-analysis",{"id":218,"label":138,"slug":139,"rank":162,"group":219},69,{"id":220,"label":221,"slug":222},6,"Navigation & Commands","navigation-and-commands",[224,225,226,227,228],{"id":73,"title":74,"slug":75},{"id":131,"title":132,"slug":133},{"id":81,"title":82,"slug":83},{"id":137,"title":138,"slug":139},{"id":141,"title":142,"slug":143},{"slug":30,"title":29,"logo":32,"categories":230},[],{"uuid":232,"title":29,"description":233,"canonical_path":4,"image":234,"width":49,"height":235,"image_alt":110,"kind":52,"patterns":236,"component_categories":249,"app":253},"9f2bbd4d-18b7-4467-86fb-2688ae4deac6","Detail page where the user views the execution activity, container metrics, and logs for a specific deployed app function.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F9f2bbd4d-18b7-4467-86fb-2688ae4deac6.png",1772,[237,242,244],{"id":238,"label":239,"slug":240,"rank":58,"group":241},41,"Dashboard","dashboard",{"id":55,"label":215,"slug":216},{"id":211,"label":212,"slug":213,"rank":60,"group":243},{"id":55,"label":215,"slug":216},{"id":245,"label":246,"slug":247,"rank":162,"group":248},40,"Charts","charts",{"id":55,"label":215,"slug":216},[250,251,252],{"id":81,"title":82,"slug":83},{"id":137,"title":138,"slug":139},{"id":141,"title":142,"slug":143},{"slug":30,"title":29,"logo":32,"categories":254},[],{"uuid":256,"title":29,"description":257,"canonical_path":4,"image":258,"width":49,"height":50,"image_alt":110,"kind":52,"patterns":259,"component_categories":270,"app":277},"67e782b4-1ca8-468f-a953-d0f8c637b357","Detail page for a specific serverless application where the user has opened a modal to manage email notifications and scheduled functions.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F67e782b4-1ca8-468f-a953-d0f8c637b357.png",[260,265],{"id":261,"label":262,"slug":263,"rank":58,"group":264},99,"Notification Settings","notification-settings",{"id":164,"label":165,"slug":166},{"id":266,"label":267,"slug":268,"rank":60,"group":269},102,"Settings","settings",{"id":164,"label":165,"slug":166},[271,273,274,275,276],{"id":272,"title":29,"slug":30},284,{"id":81,"title":82,"slug":83},{"id":77,"title":78,"slug":79},{"id":137,"title":138,"slug":139},{"id":141,"title":142,"slug":143},{"slug":30,"title":29,"logo":32,"categories":278},[],{"uuid":280,"title":29,"description":281,"canonical_path":4,"image":282,"width":49,"height":50,"image_alt":110,"kind":52,"patterns":283,"component_categories":290,"app":295},"d7d3439d-1e46-495b-a0cc-8281c77deaff","Detail page for a serverless application showing function activity, container metrics, and execution history.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fd7d3439d-1e46-495b-a0cc-8281c77deaff.png",[284,286,288],{"id":238,"label":239,"slug":240,"rank":58,"group":285},{"id":55,"label":215,"slug":216},{"id":211,"label":212,"slug":213,"rank":60,"group":287},{"id":55,"label":215,"slug":216},{"id":245,"label":246,"slug":247,"rank":162,"group":289},{"id":55,"label":215,"slug":216},[291,292,293,294],{"id":81,"title":82,"slug":83},{"id":77,"title":78,"slug":79},{"id":137,"title":138,"slug":139},{"id":141,"title":142,"slug":143},{"slug":30,"title":29,"logo":32,"categories":296},[],{"uuid":298,"title":29,"description":299,"canonical_path":4,"image":300,"width":49,"height":50,"image_alt":110,"kind":52,"patterns":301,"component_categories":323,"app":328},"b181064e-993c-4283-8f45-277fb1fb348a","List view where a developer monitors, searches, and filters application logs for a specific deployed app.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb181064e-993c-4283-8f45-277fb1fb348a.png",[302,309,314,316,318],{"id":303,"label":304,"slug":305,"rank":58,"group":306},22,"Search","search",{"id":162,"label":307,"slug":308},"Actions","actions",{"id":310,"label":311,"slug":312,"rank":60,"group":313},13,"Filter & Sort","filter-and-sort",{"id":162,"label":307,"slug":308},{"id":211,"label":212,"slug":213,"rank":162,"group":315},{"id":55,"label":215,"slug":216},{"id":238,"label":239,"slug":240,"rank":194,"group":317},{"id":55,"label":215,"slug":216},{"id":319,"label":320,"slug":321,"rank":55,"group":322},38,"Activity Log","activity-log",{"id":55,"label":215,"slug":216},[324,325,326,327],{"id":77,"title":78,"slug":79},{"id":81,"title":82,"slug":83},{"id":137,"title":138,"slug":139},{"id":141,"title":142,"slug":143},{"slug":30,"title":29,"logo":32,"categories":329},[],{"uuid":331,"title":29,"description":332,"canonical_path":4,"image":333,"width":49,"height":50,"image_alt":110,"kind":52,"patterns":334,"component_categories":339,"app":344},"f08812e9-a378-44f3-a7b1-83419c861337","App logs view where the user can search, filter by function, and read execution logs for a specific application.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ff08812e9-a378-44f3-a7b1-83419c861337.png",[335,337],{"id":319,"label":320,"slug":321,"rank":58,"group":336},{"id":55,"label":215,"slug":216},{"id":310,"label":311,"slug":312,"rank":60,"group":338},{"id":162,"label":307,"slug":308},[340,341,342,343],{"id":77,"title":78,"slug":79},{"id":81,"title":82,"slug":83},{"id":137,"title":138,"slug":139},{"id":141,"title":142,"slug":143},{"slug":30,"title":29,"logo":32,"categories":345},[],{"uuid":347,"title":29,"description":348,"canonical_path":4,"image":349,"width":49,"height":50,"image_alt":110,"kind":52,"patterns":350,"component_categories":362,"app":366},"8593ceff-007f-4da1-9584-9e2e1c5ba8e1","Log viewer where the user monitors app execution, searches for specific entries, and filters by function.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F8593ceff-007f-4da1-9584-9e2e1c5ba8e1.png",[351,353,355],{"id":211,"label":212,"slug":213,"rank":58,"group":352},{"id":55,"label":215,"slug":216},{"id":310,"label":311,"slug":312,"rank":60,"group":354},{"id":162,"label":307,"slug":308},{"id":356,"label":357,"slug":358,"rank":162,"group":359},32,"AI Search","ai-search",{"id":194,"label":360,"slug":361},"AI","ai",[363,364,365],{"id":77,"title":78,"slug":79},{"id":137,"title":138,"slug":139},{"id":141,"title":142,"slug":143},{"slug":30,"title":29,"logo":32,"categories":367},[],[],[370,372,374,376,378,380,382,384,386,388,390,392,394,397,400,403,406,409,411,415,419,423],{"label":212,"to":371},"\u002Fexamples\u002Fscreens\u002Ftable",{"label":239,"to":373},"\u002Fexamples\u002Fscreens\u002Fdashboard",{"label":311,"to":375},"\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":320,"to":377},"\u002Fexamples\u002Fscreens\u002Factivity-log",{"label":246,"to":379},"\u002Fexamples\u002Fscreens\u002Fcharts",{"label":65,"to":381},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":192,"to":383},"\u002Fexamples\u002Fscreens\u002Fempty-state",{"label":122,"to":385},"\u002Fexamples\u002Fscreens\u002Fgetting-started",{"label":114,"to":387},"\u002Fexamples\u002Fscreens\u002Fsetup-wizard",{"label":357,"to":389},"\u002Fexamples\u002Fscreens\u002Fai-search",{"label":160,"to":391},"\u002Fexamples\u002Fscreens\u002Fapi-keys",{"label":184,"to":393},"\u002Fexamples\u002Fscreens\u002Fcode-editor",{"label":395,"to":396},"Modal marketing pages","\u002Fexamples\u002Fapps\u002Fmodal\u002Fmarketing",{"label":398,"to":399},"Modal user flows","\u002Fexamples\u002Fapps\u002Fmodal\u002Fflows",{"label":401,"to":402},"Modal UI components","\u002Fexamples\u002Fapps\u002Fmodal\u002Fcomponents",{"label":404,"to":405},"Developer APIs app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-apis",{"label":407,"to":408},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":410,"to":18},"All SaaS app examples",{"label":412,"to":413,"description":414},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":416,"to":417,"description":418},"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":420,"to":421,"description":422},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":424,"to":425,"description":426},"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":428,"updated_at":429},"2024-02-05T10:53:20.000Z","2026-09-13T13:02:39.000Z"]