[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fmodal":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":40,"examples":56,"showcases":57,"links":393,"dates":426},"\u002Fexamples\u002Fapps\u002Fmodal","detail","apps",true,{"title":9,"description":10,"og_image":11},"Modal design examples - Nicelydone","Explore Modal UI design examples. Cloud functions reimagined","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F29c8231b-be1a-45a0-933d-9869b85c23dd.png",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":4},"Modal design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":39},"SaaS app examples",[24],{"title":25,"links":26},"Explore Modal",[27,30,33,36],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Fmodal\u002Fscreens",{"label":31,"to":32},"user flows","\u002Fexamples\u002Fapps\u002Fmodal\u002Fflows",{"label":34,"to":35},"UI components","\u002Fexamples\u002Fapps\u002Fmodal\u002Fcomponents",{"label":37,"to":38},"marketing pages","\u002Fexamples\u002Fapps\u002Fmodal\u002Fmarketing",[],{"title":41,"slug":42,"description":43,"logo":44,"url":45,"twitter_username":46,"categories":47},"Modal","modal","Cloud functions reimagined","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmodal-2babc1b9.png","https:\u002F\u002Fmodal.com","modal_labs",[48,52],{"id":49,"title":50,"slug":51},37,"Developer APIs","developer-apis",{"id":53,"title":54,"slug":55},48,"Developer Tools","developer-tools",[],[58,384,387,390],{"family":59,"examples":60},"screens",[61,102,122,162,188,219,247,271,295,313,346,362],{"uuid":62,"title":63,"description":64,"canonical_path":29,"image":11,"width":65,"height":66,"image_alt":67,"kind":68,"patterns":69,"component_categories":87,"app":100},"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",[70,79],{"id":71,"label":72,"slug":73,"rank":74,"group":75},4,"Sign In","sign-in",0,{"id":76,"label":77,"slug":78},1,"Access & Account","access-and-account",{"id":80,"label":81,"slug":82,"rank":76,"group":83},114,"Confirmation","confirmation",{"id":84,"label":85,"slug":86},12,"States & Feedback","states-and-feedback",[88,92,96],{"id":89,"title":90,"slug":91},174,"Card","card",{"id":93,"title":94,"slug":95},169,"Avatar","avatar",{"id":97,"title":98,"slug":99},175,"Button","button",{"slug":42,"title":41,"logo":44,"categories":101},[],{"uuid":103,"title":104,"description":105,"canonical_path":29,"image":106,"width":65,"height":66,"image_alt":107,"kind":68,"patterns":108,"component_categories":119,"app":120},"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",[109,114],{"id":110,"label":111,"slug":112,"rank":74,"group":113},120,"Loading","loading",{"id":84,"label":85,"slug":86},{"id":115,"label":116,"slug":117,"rank":76,"group":118},119,"Info","info",{"id":84,"label":85,"slug":86},[],{"slug":42,"title":41,"logo":44,"categories":121},[],{"uuid":123,"title":41,"description":124,"canonical_path":29,"image":125,"width":65,"height":66,"image_alt":126,"kind":68,"patterns":127,"component_categories":141,"app":160},"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",[128,136],{"id":129,"label":130,"slug":131,"rank":74,"group":132},75,"Setup Wizard","setup-wizard",{"id":133,"label":134,"slug":135},7,"Onboarding & Education","onboarding-and-education",{"id":137,"label":138,"slug":139,"rank":76,"group":140},72,"Getting Started","getting-started",{"id":133,"label":134,"slug":135},[142,146,150,151,152,156],{"id":143,"title":144,"slug":145},168,"Accordion","accordion",{"id":147,"title":148,"slug":149},260,"Badge","badge",{"id":97,"title":98,"slug":99},{"id":93,"title":94,"slug":95},{"id":153,"title":154,"slug":155},233,"Tabs","tabs",{"id":157,"title":158,"slug":159},240,"Horizontal navigation","horizontal-navigation",{"slug":42,"title":41,"logo":44,"categories":161},[],{"uuid":163,"title":41,"description":164,"canonical_path":29,"image":165,"width":65,"height":66,"image_alt":126,"kind":68,"patterns":166,"component_categories":183,"app":186},"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",[167,172,174],{"id":168,"label":169,"slug":170,"rank":74,"group":171},122,"Success","success",{"id":84,"label":85,"slug":86},{"id":80,"label":81,"slug":82,"rank":76,"group":173},{"id":84,"label":85,"slug":86},{"id":175,"label":176,"slug":177,"rank":178,"group":179},95,"API Keys","api-keys",2,{"id":180,"label":181,"slug":182},10,"Settings & Admin","settings-and-admin",[184,185],{"id":93,"title":94,"slug":95},{"id":157,"title":158,"slug":159},{"slug":42,"title":41,"logo":44,"categories":187},[],{"uuid":189,"title":41,"description":190,"canonical_path":29,"image":191,"width":65,"height":192,"image_alt":126,"kind":68,"patterns":193,"component_categories":212,"app":217},"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,[194,196,198,206],{"id":129,"label":130,"slug":131,"rank":74,"group":195},{"id":133,"label":134,"slug":135},{"id":137,"label":138,"slug":139,"rank":76,"group":197},{"id":133,"label":134,"slug":135},{"id":199,"label":200,"slug":201,"rank":178,"group":202},53,"Code Editor","code-editor",{"id":203,"label":204,"slug":205},5,"Media & Tools","media-and-tools",{"id":207,"label":208,"slug":209,"rank":210,"group":211},115,"Empty State","empty-state",3,{"id":84,"label":85,"slug":86},[213,214,215,216],{"id":143,"title":144,"slug":145},{"id":147,"title":148,"slug":149},{"id":153,"title":154,"slug":155},{"id":157,"title":158,"slug":159},{"slug":42,"title":41,"logo":44,"categories":218},[],{"uuid":220,"title":41,"description":221,"canonical_path":29,"image":222,"width":65,"height":66,"image_alt":126,"kind":68,"patterns":223,"component_categories":239,"app":245},"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",[224,226,233],{"id":207,"label":208,"slug":209,"rank":74,"group":225},{"id":84,"label":85,"slug":86},{"id":227,"label":228,"slug":229,"rank":76,"group":230},47,"Table","table",{"id":71,"label":231,"slug":232},"Data & Analysis","data-and-analysis",{"id":234,"label":154,"slug":155,"rank":178,"group":235},69,{"id":236,"label":237,"slug":238},6,"Navigation & Commands","navigation-and-commands",[240,241,242,243,244],{"id":89,"title":90,"slug":91},{"id":147,"title":148,"slug":149},{"id":97,"title":98,"slug":99},{"id":153,"title":154,"slug":155},{"id":157,"title":158,"slug":159},{"slug":42,"title":41,"logo":44,"categories":246},[],{"uuid":248,"title":41,"description":249,"canonical_path":29,"image":250,"width":65,"height":251,"image_alt":126,"kind":68,"patterns":252,"component_categories":265,"app":269},"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,[253,258,260],{"id":254,"label":255,"slug":256,"rank":74,"group":257},41,"Dashboard","dashboard",{"id":71,"label":231,"slug":232},{"id":227,"label":228,"slug":229,"rank":76,"group":259},{"id":71,"label":231,"slug":232},{"id":261,"label":262,"slug":263,"rank":178,"group":264},40,"Charts","charts",{"id":71,"label":231,"slug":232},[266,267,268],{"id":97,"title":98,"slug":99},{"id":153,"title":154,"slug":155},{"id":157,"title":158,"slug":159},{"slug":42,"title":41,"logo":44,"categories":270},[],{"uuid":272,"title":41,"description":273,"canonical_path":29,"image":274,"width":65,"height":66,"image_alt":126,"kind":68,"patterns":275,"component_categories":286,"app":293},"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",[276,281],{"id":277,"label":278,"slug":279,"rank":74,"group":280},99,"Notification Settings","notification-settings",{"id":180,"label":181,"slug":182},{"id":282,"label":283,"slug":284,"rank":76,"group":285},102,"Settings","settings",{"id":180,"label":181,"slug":182},[287,289,290,291,292],{"id":288,"title":41,"slug":42},284,{"id":97,"title":98,"slug":99},{"id":93,"title":94,"slug":95},{"id":153,"title":154,"slug":155},{"id":157,"title":158,"slug":159},{"slug":42,"title":41,"logo":44,"categories":294},[],{"uuid":296,"title":41,"description":297,"canonical_path":29,"image":298,"width":65,"height":66,"image_alt":126,"kind":68,"patterns":299,"component_categories":306,"app":311},"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",[300,302,304],{"id":254,"label":255,"slug":256,"rank":74,"group":301},{"id":71,"label":231,"slug":232},{"id":227,"label":228,"slug":229,"rank":76,"group":303},{"id":71,"label":231,"slug":232},{"id":261,"label":262,"slug":263,"rank":178,"group":305},{"id":71,"label":231,"slug":232},[307,308,309,310],{"id":97,"title":98,"slug":99},{"id":93,"title":94,"slug":95},{"id":153,"title":154,"slug":155},{"id":157,"title":158,"slug":159},{"slug":42,"title":41,"logo":44,"categories":312},[],{"uuid":314,"title":41,"description":315,"canonical_path":29,"image":316,"width":65,"height":66,"image_alt":126,"kind":68,"patterns":317,"component_categories":339,"app":344},"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",[318,325,330,332,334],{"id":319,"label":320,"slug":321,"rank":74,"group":322},22,"Search","search",{"id":178,"label":323,"slug":324},"Actions","actions",{"id":326,"label":327,"slug":328,"rank":76,"group":329},13,"Filter & Sort","filter-and-sort",{"id":178,"label":323,"slug":324},{"id":227,"label":228,"slug":229,"rank":178,"group":331},{"id":71,"label":231,"slug":232},{"id":254,"label":255,"slug":256,"rank":210,"group":333},{"id":71,"label":231,"slug":232},{"id":335,"label":336,"slug":337,"rank":71,"group":338},38,"Activity Log","activity-log",{"id":71,"label":231,"slug":232},[340,341,342,343],{"id":93,"title":94,"slug":95},{"id":97,"title":98,"slug":99},{"id":153,"title":154,"slug":155},{"id":157,"title":158,"slug":159},{"slug":42,"title":41,"logo":44,"categories":345},[],{"uuid":347,"title":41,"description":348,"canonical_path":29,"image":349,"width":65,"height":66,"image_alt":126,"kind":68,"patterns":350,"component_categories":355,"app":360},"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",[351,353],{"id":335,"label":336,"slug":337,"rank":74,"group":352},{"id":71,"label":231,"slug":232},{"id":326,"label":327,"slug":328,"rank":76,"group":354},{"id":178,"label":323,"slug":324},[356,357,358,359],{"id":93,"title":94,"slug":95},{"id":97,"title":98,"slug":99},{"id":153,"title":154,"slug":155},{"id":157,"title":158,"slug":159},{"slug":42,"title":41,"logo":44,"categories":361},[],{"uuid":363,"title":41,"description":364,"canonical_path":29,"image":365,"width":65,"height":66,"image_alt":126,"kind":68,"patterns":366,"component_categories":378,"app":382},"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",[367,369,371],{"id":227,"label":228,"slug":229,"rank":74,"group":368},{"id":71,"label":231,"slug":232},{"id":326,"label":327,"slug":328,"rank":76,"group":370},{"id":178,"label":323,"slug":324},{"id":372,"label":373,"slug":374,"rank":178,"group":375},32,"AI Search","ai-search",{"id":210,"label":376,"slug":377},"AI","ai",[379,380,381],{"id":93,"title":94,"slug":95},{"id":153,"title":154,"slug":155},{"id":157,"title":158,"slug":159},{"slug":42,"title":41,"logo":44,"categories":383},[],{"family":385,"examples":386},"flows",[],{"family":388,"examples":389},"components",[],{"family":391,"examples":392},"pages",[],[394,396,398,400,402,405,408,410,414,418,422],{"label":395,"to":29},"Modal product screens",{"label":397,"to":38},"Modal marketing pages",{"label":399,"to":32},"Modal user flows",{"label":401,"to":35},"Modal UI components",{"label":403,"to":404},"Developer APIs app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-apis",{"label":406,"to":407},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":409,"to":18},"All SaaS app examples",{"label":411,"to":412,"description":413},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":415,"to":416,"description":417},"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":419,"to":420,"description":421},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":423,"to":424,"description":425},"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":427,"updated_at":428},"2024-02-05T10:53:20.000Z","2026-09-19T12:10:13.000Z"]