[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fmodal":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":338,"links":339,"dates":388},"\u002Fexamples\u002Fcomponents\u002Fmodal","collection","components",true,{"example_count":9,"app_count":10},163,88,{"id":12,"title":13,"description":14},284,"Modal","Explore how interfaces present a focused task above the current page. Look at how modal headings, content, and close or completion actions define the temporary workspace.",{"title":16,"description":17,"og_image":18},"Modal UI examples - Nicelydone","Modal UI design examples from SaaS apps. Explore how interfaces present a focused task above the current page. Look at how modal headings, content, and…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F65e7298b-2f7e-4a4d-993d-80d5abc73969.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Modal UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Modal UI design examples from SaaS apps. Explore how interfaces present a focused task above the current page. Look at how modal headings, content, and close or completion actions define the…",[32],{"title":33,"description":14,"links":34},"About Modal",[],[36],"163 UI components",[38,68,97,126,147,169,199,221,248,267,285,308],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"702a2bc8-95bb-4f60-95f6-ad0a8888a9af","Alloy UI component","A confirmation modal asking the user to confirm the deletion of a session, with options to cancel or continue.","\u002Fexamples\u002Fapps\u002Falloy\u002Fcomponents",1328,754,"UI component from Alloy","component",[48],{"id":12,"title":13,"slug":49},"modal",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"alloy","Alloy","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F13110ce9-b228-4dcd-99db-7c3272fae2ce.png","AI prototyping tool for product managers",[56,60,64],{"id":57,"title":58,"slug":59},48,"Developer Tools","developer-tools",{"id":61,"title":62,"slug":63},80,"Artificial Intelligence","artificial-intelligence",{"id":65,"title":66,"slug":67},86,"Product management","product-management",{"uuid":69,"title":70,"description":71,"canonical_path":72,"image":73,"width":74,"height":75,"image_alt":76,"kind":46,"categories":77,"app":79},"aabf9bb7-2a39-40cf-b47e-9d05aa9b6354","Flask UI component","A dark mode confirmation dialog for deleting an asset, with a warning that the action cannot be undone, and options to cancel or delete.","\u002Fexamples\u002Fapps\u002Fflask\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa812552d-62b4-4b33-85e4-b5cbf84423e9.png",797,427,"UI component from Flask",[78],{"id":12,"title":13,"slug":49},{"slug":80,"title":81,"logo":82,"baseline":83,"categories":84},"flask","Flask","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffb0bfd95-becd-46ec-9917-a82dd6bbe601.png","Give detailed video feedback in minutes without typing comments",[85,89,93],{"id":86,"title":87,"slug":88},100,"Video","video",{"id":90,"title":91,"slug":92},23,"Collaboration","collaboration",{"id":94,"title":95,"slug":96},35,"Feedback","feedback",{"uuid":98,"title":99,"description":100,"canonical_path":101,"image":102,"width":103,"height":104,"image_alt":105,"kind":46,"categories":106,"app":108},"4c054cc1-c320-439a-9f64-ab798a25ce39","Lithic UI component","A confirmation modal asking the user to confirm a deletion action for a sandbox API key, with a warning about the consequences.","\u002Fexamples\u002Fapps\u002Flithic\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0b4db839-fa8c-4bdd-97b8-70365246da8a.png",1047,683,"UI component from Lithic",[107],{"id":12,"title":13,"slug":49},{"slug":109,"title":110,"logo":111,"baseline":112,"categories":113},"lithic","Lithic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F29eef334-64df-456e-bb65-9d93c535b644.png","Programmable card issuing and money movement platform",[114,118,122],{"id":115,"title":116,"slug":117},36,"Finance","finance",{"id":119,"title":120,"slug":121},39,"Payments","payments",{"id":123,"title":124,"slug":125},37,"Developer APIs","developer-apis",{"uuid":127,"title":128,"description":129,"canonical_path":130,"image":131,"width":132,"height":133,"image_alt":134,"kind":46,"categories":135,"app":137},"8f0deb16-7c5e-45a9-ab5b-70ec54d3bec7","Visitors UI component","A modal dialog for creating a new API key, prompting the user to name it.","\u002Fexamples\u002Fapps\u002Fvisitors\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F066b2a8c-a51d-48b7-9526-c8b336f44a48.png",919,736,"UI component from Visitors",[136],{"id":12,"title":13,"slug":49},{"slug":138,"title":139,"logo":140,"baseline":141,"categories":142},"visitors","Visitors","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fba53672a-9799-4a87-8187-a0b0c0766b64.png","Revenue-first web analytics",[143],{"id":144,"title":145,"slug":146},46,"Analytics","analytics",{"uuid":148,"title":149,"description":150,"canonical_path":151,"image":152,"width":153,"height":154,"image_alt":155,"kind":46,"categories":156,"app":158},"f232335a-cc73-4dcd-bf47-16715a49ad2e","Dock UI component","A modal dialog prompting a user to upgrade for automation features, offering options to contact sales or view pricing plans.","\u002Fexamples\u002Fapps\u002Fdock\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F72d203a6-3cba-4752-985b-7995f3e5eb9f.png",1149,886,"UI component from Dock",[157],{"id":12,"title":13,"slug":49},{"slug":159,"title":160,"logo":161,"baseline":162,"categories":163},"dock","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdock-k4tgvy1y.png","The new way to manage external relationships",[164,165],{"id":90,"title":91,"slug":92},{"id":166,"title":167,"slug":168},29,"Task Management","task-management",{"uuid":170,"title":171,"description":172,"canonical_path":173,"image":174,"width":175,"height":176,"image_alt":177,"kind":46,"categories":178,"app":180},"27ce37e3-963a-4403-a5c4-d86c107c9481","Bloom UI component","A modal dialog for confirming the deletion of an organization, requiring the user to type the organization's name to proceed.","\u002Fexamples\u002Fapps\u002Fbloom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F002f8047-7d56-44cb-a591-8e67a8f8a080.png",1281,1086,"UI component from Bloom",[179],{"id":12,"title":13,"slug":49},{"slug":181,"title":182,"logo":183,"baseline":184,"categories":185},"bloom","Bloom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F62461f0d-4182-4996-ae7b-cbc623f6ee3f.png","A new way to build commerce",[186,187,191,195],{"id":61,"title":62,"slug":63},{"id":188,"title":189,"slug":190},3,"Shopping","shopping",{"id":192,"title":193,"slug":194},7,"Web Development","web-development",{"id":196,"title":197,"slug":198},96,"No code","no-code",{"uuid":200,"title":201,"canonical_path":202,"image":203,"width":204,"height":205,"image_alt":206,"kind":46,"categories":207,"app":209},"a7cfe9ec-cff8-4e2d-9441-bb8d29254bb1","Voiceflow UI component","\u002Fexamples\u002Fapps\u002Fvoiceflow\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff9df0367-0572-4335-bc6d-656deffbd6ae.png",1306,1531,"UI component from Voiceflow",[208],{"id":12,"title":13,"slug":49},{"slug":210,"title":211,"logo":212,"baseline":213,"categories":214},"voiceflow","Voiceflow","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fvoiceflow-ba430e40.png","Build amazing conversational assistants",[215,216,220],{"id":61,"title":62,"slug":63},{"id":217,"title":218,"slug":219},47,"Customer Service","customer-service",{"id":196,"title":197,"slug":198},{"uuid":222,"title":223,"description":224,"canonical_path":225,"image":226,"width":227,"height":228,"image_alt":229,"kind":46,"categories":230,"app":232},"812c1148-4808-48f0-83fc-109ab65f77bb","Add Contact Form","Modal form for entering phone number, name, and email to create a new contact","\u002Fexamples\u002Fapps\u002Fbeside\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F73fe59ad-676b-4a0d-9ffc-a4f2ef517222.png",1104,1188,"Add Contact Form from Beside",[231],{"id":12,"title":13,"slug":49},{"slug":233,"title":234,"logo":235,"baseline":236,"categories":237},"beside","Beside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F8c14025e-58b4-4801-bd91-3e31a3cf8f21.png","AI-powered business phone assistant that answers calls and takes action",[238,239,240,244],{"id":61,"title":62,"slug":63},{"id":217,"title":218,"slug":219},{"id":241,"title":242,"slug":243},53,"CRM","crm",{"id":245,"title":246,"slug":247},82,"Communication","communication",{"uuid":249,"title":250,"description":251,"canonical_path":252,"image":253,"width":254,"height":255,"image_alt":256,"kind":46,"categories":257,"app":259},"1e45eb9e-db22-460c-a709-3ca201e13057","Feature Gate Paywall","Prompts user to upgrade to Creator plan to unlock video downloads and premium features","\u002Fexamples\u002Fapps\u002Fheygen\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc63591a6-b1ac-4d18-a41a-d32ceb2e75e9.png",2034,1312,"Feature Gate Paywall from HeyGen",[258],{"id":12,"title":13,"slug":49},{"slug":260,"title":261,"logo":262,"baseline":263,"categories":264},"heygen","HeyGen","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fd8cda81f-5b21-444e-8401-676a6cf2f817.png","AI video generator that turns ideas into professional videos in minutes",[265,266],{"id":86,"title":87,"slug":88},{"id":61,"title":62,"slug":63},{"uuid":268,"title":269,"description":270,"canonical_path":271,"image":272,"width":273,"height":274,"image_alt":275,"kind":46,"categories":276,"app":278},"7943821d-dcb5-48ad-ac5d-c499393a62ff","New category modal","Modal dialog for creating a spending category with name input, color selection, budget toggle and amount","\u002Fexamples\u002Fapps\u002Fcopilot-money\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F41d867ca-fae5-47dd-ae1b-f5d52aebd312.png",862,962,"New category modal from Copilot",[277],{"id":12,"title":13,"slug":49},{"slug":279,"title":280,"logo":281,"baseline":282,"categories":283},"copilot-money","Copilot","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F598cc9dd-791e-42fb-9fac-8f3f362f10ac.png","Personal finance app for organizing money across devices",[284],{"id":115,"title":116,"slug":117},{"uuid":286,"title":287,"description":288,"canonical_path":289,"image":290,"width":291,"height":292,"image_alt":293,"kind":46,"categories":294,"app":296},"29993279-ac18-4ccc-ae83-4c8bcdf4ea58","Cancel Subscription Modal","Prompts user to reconsider canceling by comparing Pro vs Starter limits and offering downgrade","\u002Fexamples\u002Fapps\u002Fexa\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2b9af36f-1b22-4149-883f-8145efdeb447.jpg",1296,846,"Cancel Subscription Modal from Exa",[295],{"id":12,"title":13,"slug":49},{"slug":297,"title":298,"logo":299,"baseline":300,"categories":301},"exa","Exa","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F011e446a-087b-451e-b27d-63d67d92a42f.png","Real-time AI search engine with structured web search API and deep research tools",[302,306,307],{"id":303,"title":304,"slug":305},55,"Search engine","search-engine",{"id":61,"title":62,"slug":63},{"id":123,"title":124,"slug":125},{"uuid":309,"title":310,"description":311,"canonical_path":312,"image":313,"width":314,"height":315,"image_alt":316,"kind":46,"categories":317,"app":319},"90751d89-699e-11f1-8c91-960002ce6e45","Privacy compliance grid","Presents compliance badges, security assurances, and legal document links within the privacy section of settings","\u002Fexamples\u002Fapps\u002Ftown\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1ae5064c-17f0-4156-b9a2-a04a7c68fec0.jpg",1956,1544,"Privacy compliance grid from Town",[318],{"id":12,"title":13,"slug":49},{"slug":320,"title":321,"logo":322,"baseline":323,"categories":324},"town","Town","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fb6cf707d-df49-4190-b803-766b8914df89.png","The AI assistant that manages your inbox, schedules meetings, and handles busywork.",[325,326,330,334],{"id":61,"title":62,"slug":63},{"id":327,"title":328,"slug":329},30,"Productivity","productivity",{"id":331,"title":332,"slug":333},92,"Email","email",{"id":335,"title":336,"slug":337},101,"Calendar","calendar",[],[340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385],{"label":341,"to":342},"Confirmation","\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":344,"to":345},"Add & Create","\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":347,"to":348},"Delete","\u002Fexamples\u002Fscreens\u002Fdelete",{"label":350,"to":351},"Upgrade Prompt","\u002Fexamples\u002Fscreens\u002Fupgrade-prompt",{"label":353,"to":354},"Alloy design examples","\u002Fexamples\u002Fapps\u002Falloy",{"label":356,"to":357},"Flask design examples","\u002Fexamples\u002Fapps\u002Fflask",{"label":359,"to":360},"Lithic design examples","\u002Fexamples\u002Fapps\u002Flithic",{"label":362,"to":363},"Visitors design examples","\u002Fexamples\u002Fapps\u002Fvisitors",{"label":365,"to":366},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdock",{"label":368,"to":369},"Bloom design examples","\u002Fexamples\u002Fapps\u002Fbloom",{"label":371,"to":372},"Voiceflow design examples","\u002Fexamples\u002Fapps\u002Fvoiceflow",{"label":374,"to":375},"Beside design examples","\u002Fexamples\u002Fapps\u002Fbeside",{"label":377,"to":378},"HeyGen design examples","\u002Fexamples\u002Fapps\u002Fheygen",{"label":380,"to":381},"Copilot design examples","\u002Fexamples\u002Fapps\u002Fcopilot-money",{"label":383,"to":384},"Exa design examples","\u002Fexamples\u002Fapps\u002Fexa",{"label":386,"to":387},"Town design examples","\u002Fexamples\u002Fapps\u002Ftown",{"published_at":389,"updated_at":390},"2022-11-27T10:32:52.000Z","2026-09-17T10:44:16.000Z"]