[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fpopover":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":335,"links":336,"dates":385},"\u002Fexamples\u002Fcomponents\u002Fpopover","collection","components",true,{"example_count":9,"app_count":10},15,14,{"id":12,"title":13,"description":14},214,"Popover","See how interfaces reveal a small amount of content beside a control. Explore how popover placement and layout keep supporting details connected to the triggering element.",{"title":16,"description":17,"og_image":18},"Popover UI examples - Nicelydone","Popover UI design examples from SaaS apps. See how interfaces reveal a small amount of content beside a control. Explore how popover placement and layout…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd805996a-09af-4cd5-88ad-0da2870c437a.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Popover UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Popover UI design examples from SaaS apps. See how interfaces reveal a small amount of content beside a control. Explore how popover placement and layout keep supporting details connected to the…",[32],{"title":33,"description":14,"links":34},"About Popover",[],[36],"15 UI components",[38,72,102,122,147,168,191,212,241,263,289,311],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"c49ec039-a827-48da-8b65-60f1bbf10931","Steel UI component","A feedback modal allowing users to select a topic, share feedback, and rate their sentiment.","\u002Fexamples\u002Fapps\u002Fsteel\u002Fcomponents",846,670,"UI component from Steel","component",[48],{"id":12,"title":13,"slug":49},"popover",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"steel","Steel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F03f0fa43-a227-4dce-b66a-f340f4551973.png","Browser infrastructure for AI agents",[56,60,64,68],{"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},37,"Developer APIs","developer-apis",{"id":69,"title":70,"slug":71},45,"Open Source","open-source",{"uuid":73,"title":74,"description":75,"canonical_path":76,"image":77,"width":78,"height":79,"image_alt":80,"kind":46,"categories":81,"app":83},"b92ed85f-5501-42e2-9e5d-ee84df369500","Zaro UI component","A user interface featuring a conversational AI for creating new applications, presenting options for app types, and displaying chat history.","\u002Fexamples\u002Fapps\u002Fzaro\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc931586f-f5e7-4a3c-8e43-0062635e602d.png",1471,1968,"UI component from Zaro",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"zaro","Zaro","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdcfeb606-2235-48bf-83e3-948e2ac20719.png","AI workspace with agents and apps for business automation",[89,93,94,98],{"id":90,"title":91,"slug":92},23,"Collaboration","collaboration",{"id":61,"title":62,"slug":63},{"id":95,"title":96,"slug":97},22,"Knowledge Management","knowledge-management",{"id":99,"title":100,"slug":101},46,"Analytics","analytics",{"uuid":103,"title":104,"description":105,"canonical_path":106,"image":107,"width":108,"height":109,"image_alt":110,"kind":46,"categories":111,"app":113},"c896ddaa-d716-41b6-94d5-aecb583a1aec","Appwrite UI component","A modal window announcing a software feature update with a code snippet and a call to action.","\u002Fexamples\u002Fapps\u002Fappwrite\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F622f278c-6d03-4d44-8794-c366a8caae33.png",636,717,"UI component from Appwrite",[112],{"id":12,"title":13,"slug":49},{"slug":114,"title":115,"logo":116,"baseline":117,"categories":118},"appwrite","Appwrite","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Faba3119b-0179-4fbd-b6d0-2bb3a0bfda07.png","Open-source backend platform for building and scaling apps with Auth, Database, Storage, Functions, Realtime, Messaging, and Sites.",[119,120,121],{"id":57,"title":58,"slug":59},{"id":65,"title":66,"slug":67},{"id":69,"title":70,"slug":71},{"uuid":123,"title":124,"canonical_path":125,"image":126,"width":127,"height":128,"image_alt":129,"kind":46,"categories":130,"app":132},"0d6640cf-3d60-4ad2-88ff-a291dd050779","Voiceflow UI component","\u002Fexamples\u002Fapps\u002Fvoiceflow\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa20815a9-5dbf-47f2-b129-82a4e697ce0e.png",647,676,"UI component from Voiceflow",[131],{"id":12,"title":13,"slug":49},{"slug":133,"title":134,"logo":135,"baseline":136,"categories":137},"voiceflow","Voiceflow","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fvoiceflow-ba430e40.png","Build amazing conversational assistants",[138,139,143],{"id":61,"title":62,"slug":63},{"id":140,"title":141,"slug":142},47,"Customer Service","customer-service",{"id":144,"title":145,"slug":146},96,"No code","no-code",{"uuid":148,"title":149,"description":150,"canonical_path":151,"image":152,"width":153,"height":154,"image_alt":155,"kind":46,"categories":156,"app":158},"4ab6b686-ed8b-4f1f-aa08-a7fccaaa05eb","Display settings popover","Configures dashboard display options including balance view, benchmark selection, live estimate toggle, and account inclusion","\u002Fexamples\u002Fapps\u002Fcopilot-money\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fec07e79a-64c0-4881-a747-515f2cbec549.png",809,606,"Display settings popover from Copilot",[157],{"id":12,"title":13,"slug":49},{"slug":159,"title":160,"logo":161,"baseline":162,"categories":163},"copilot-money","Copilot","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F598cc9dd-791e-42fb-9fac-8f3f362f10ac.png","Personal finance app for organizing money across devices",[164],{"id":165,"title":166,"slug":167},36,"Finance","finance",{"uuid":169,"title":170,"description":171,"canonical_path":172,"image":173,"width":174,"height":175,"image_alt":176,"kind":46,"categories":177,"app":179},"d13aa01b-08ac-4b49-a74a-b72769386e67","Current Plan Card","Displays active subscription tier, trial status, credit balance, and key plan limits in the billing settings","\u002Fexamples\u002Fapps\u002Fexa\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd298410d-9f3a-4fd8-bc21-884728043b2a.jpg",778,944,"Current Plan Card from Exa",[178],{"id":12,"title":13,"slug":49},{"slug":180,"title":181,"logo":182,"baseline":183,"categories":184},"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",[185,189,190],{"id":186,"title":187,"slug":188},55,"Search engine","search-engine",{"id":61,"title":62,"slug":63},{"id":65,"title":66,"slug":67},{"uuid":192,"title":193,"description":194,"canonical_path":195,"image":196,"width":197,"height":198,"image_alt":199,"kind":46,"categories":200,"app":202},"de4a9bf2-5958-4b1e-aaea-7a4b9e115794","Aboard UI component","A notification panel displaying various alerts and updates within an application interface.","\u002Fexamples\u002Fapps\u002Faboard\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7f04a340-8e4f-45a8-9d0a-089946062f97.png",757,1751,"UI component from Aboard",[201],{"id":12,"title":13,"slug":49},{"slug":203,"title":204,"logo":205,"baseline":206,"categories":207},"aboard","Aboard","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fea3ae2e7-7419-4926-acae-b179668f6172.png","Bring joy to your workplace with Aboard",[208],{"id":209,"title":210,"slug":211},10,"Human resources","human-resources",{"uuid":213,"title":214,"description":215,"canonical_path":216,"image":217,"width":218,"height":219,"image_alt":220,"kind":46,"categories":221,"app":223},"4cb5034b-023e-463c-8959-daf234d5939b","Whop UI component","A modal dialog for creating a promo code with various configuration options.","\u002Fexamples\u002Fapps\u002Fwhop\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2be0473e-51c8-47f9-83fd-364d2c575608.png",949,1786,"UI component from Whop",[222],{"id":12,"title":13,"slug":49},{"slug":224,"title":225,"logo":226,"baseline":227,"categories":228},"whop","Whop","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F07610bdc-865b-4784-b147-569a8e62691e.png","Where the internet does business",[229,233,237],{"id":230,"title":231,"slug":232},1,"Communities","communities",{"id":234,"title":235,"slug":236},18,"Marketplace","marketplace",{"id":238,"title":239,"slug":240},39,"Payments","payments",{"uuid":242,"title":243,"description":244,"canonical_path":245,"image":246,"width":247,"height":248,"image_alt":249,"kind":46,"categories":250,"app":252},"585acccf-efaa-4df6-8fdd-dd0769475b38","Attio UI component","The screenshot shows a modal with options to add to list, send email, run workflow, and more.","\u002Fexamples\u002Fapps\u002Fattio\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F53541a4e-ca7f-4dc4-a5b9-fbbad2840e9c.png",1250,182,"UI component from Attio",[251],{"id":12,"title":13,"slug":49},{"slug":253,"title":254,"logo":255,"baseline":256,"categories":257},"attio","Attio","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fattio-nqag2fca.png","Customer relationship magic",[258,262],{"id":259,"title":260,"slug":261},53,"CRM","crm",{"id":61,"title":62,"slug":63},{"uuid":264,"title":265,"description":266,"canonical_path":267,"image":268,"width":269,"height":270,"image_alt":271,"kind":46,"categories":272,"app":274},"feca4351-4543-4d3b-8daa-3ed9bee337a7","Glide UI component","The screenshot displays a modal for sharing an app, including options to copy the app link, invite users via email, and export data.","\u002Fexamples\u002Fapps\u002Fglide\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe0871aa1-18c9-4ef4-9d2d-9b8b6b49d943.png",877,761,"UI component from Glide",[273],{"id":12,"title":13,"slug":49},{"slug":275,"title":276,"logo":277,"baseline":278,"categories":279},"glide","Glide","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fglide-688214ec.png","Create powerful apps and websites, without code",[280,284,288],{"id":281,"title":282,"slug":283},7,"Web Development","web-development",{"id":285,"title":286,"slug":287},54,"Mobile","mobile",{"id":144,"title":145,"slug":146},{"uuid":290,"title":291,"description":292,"canonical_path":293,"image":294,"width":295,"height":296,"image_alt":297,"kind":46,"categories":298,"app":300},"dafd6386-79c9-4c00-853a-ab5cef316670","Dropbox UI component","A modal displaying file uploads with status and actions.","\u002Fexamples\u002Fapps\u002Fdropbox\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb7c1599e-a714-4ffa-b685-8ecff67c06c3.png",971,1099,"UI component from Dropbox",[299],{"id":12,"title":13,"slug":49},{"slug":301,"title":302,"logo":303,"baseline":304,"categories":305},"dropbox","Dropbox","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdropbox-ae12c613.png","Keep life organized and work moving — all in one place",[306,307],{"id":90,"title":91,"slug":92},{"id":308,"title":309,"slug":310},71,"File sharing","file-sharing",{"uuid":312,"title":313,"description":314,"canonical_path":315,"image":316,"width":317,"height":318,"image_alt":319,"kind":46,"categories":320,"app":322},"964c1bd4-8b7f-434d-9696-26f3f3bc2be3","Framer UI component","A modal for setting up a free AI domain.","\u002Fexamples\u002Fapps\u002Fframer\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffa36c107-168b-4f49-9f36-d2ad0f6e529c.png",896,980,"UI component from Framer",[321],{"id":12,"title":13,"slug":49},{"slug":323,"title":324,"logo":325,"baseline":326,"categories":327},"framer","Framer","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fframer-4ee13abb.png","Always interactive, lightning fast design.",[328,332,333,334],{"id":329,"title":330,"slug":331},8,"Design","design",{"id":281,"title":282,"slug":283},{"id":61,"title":62,"slug":63},{"id":144,"title":145,"slug":146},[],[337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382],{"label":338,"to":339},"Add & Create","\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":341,"to":342},"Dashboard","\u002Fexamples\u002Fscreens\u002Fdashboard",{"label":344,"to":345},"Filter & Sort","\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":347,"to":348},"Getting Started","\u002Fexamples\u002Fscreens\u002Fgetting-started",{"label":350,"to":351},"Steel design examples","\u002Fexamples\u002Fapps\u002Fsteel",{"label":353,"to":354},"Zaro design examples","\u002Fexamples\u002Fapps\u002Fzaro",{"label":356,"to":357},"Appwrite design examples","\u002Fexamples\u002Fapps\u002Fappwrite",{"label":359,"to":360},"Voiceflow design examples","\u002Fexamples\u002Fapps\u002Fvoiceflow",{"label":362,"to":363},"Copilot design examples","\u002Fexamples\u002Fapps\u002Fcopilot-money",{"label":365,"to":366},"Exa design examples","\u002Fexamples\u002Fapps\u002Fexa",{"label":368,"to":369},"Aboard design examples","\u002Fexamples\u002Fapps\u002Faboard",{"label":371,"to":372},"Whop design examples","\u002Fexamples\u002Fapps\u002Fwhop",{"label":374,"to":375},"Attio design examples","\u002Fexamples\u002Fapps\u002Fattio",{"label":377,"to":378},"Glide design examples","\u002Fexamples\u002Fapps\u002Fglide",{"label":380,"to":381},"Dropbox design examples","\u002Fexamples\u002Fapps\u002Fdropbox",{"label":383,"to":384},"Framer design examples","\u002Fexamples\u002Fapps\u002Fframer",{"published_at":386,"updated_at":387},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]