[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fwhop\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":47,"showcases":200,"links":201,"dates":220},"\u002Fexamples\u002Fapps\u002Fwhop\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Whop UI components examples - Nicelydone","Browse Whop UI component design examples. Preview individual interface elements and explore related component categories. Where the internet does business","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0040f664-67a9-4048-ae6b-cdd3ce018500.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},"Whop design examples","\u002Fexamples\u002Fapps\u002Fwhop",{"label":23,"to":4},"Whop 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,"categories":34},"Whop","whop","Where the internet does business","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F07610bdc-865b-4784-b147-569a8e62691e.png","https:\u002F\u002Fwhop.com\u002F",[35,39,43],{"id":36,"title":37,"slug":38},1,"Communities","communities",{"id":40,"title":41,"slug":42},18,"Marketplace","marketplace",{"id":44,"title":45,"slug":46},39,"Payments","payments",[48,63,73,86,99,112,125,138,151,164,177,187],{"uuid":49,"title":50,"description":51,"canonical_path":4,"image":11,"width":52,"height":53,"image_alt":54,"kind":55,"categories":56,"app":61},"1019a5ed-b71a-4dc5-b19c-9b6f45d602d0","Whop UI component","A user interface displaying a navigation menu with a nested language selection dropdown.",860,930,"UI component from Whop","component",[57],{"id":58,"title":59,"slug":60},190,"Dropdown menu","dropdown-menu",{"slug":30,"title":29,"logo":32,"categories":62},[],{"uuid":64,"title":50,"description":65,"canonical_path":4,"image":66,"width":67,"height":68,"image_alt":54,"kind":55,"categories":69,"app":71},"cef390b1-4f24-40cc-8eab-cb748850018e","A popover menu displaying various account-related options and settings.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd0938536-ffde-42a4-81e5-7aa45cb505f4.png",552,903,[70],{"id":58,"title":59,"slug":60},{"slug":30,"title":29,"logo":32,"categories":72},[],{"uuid":74,"title":50,"description":75,"canonical_path":4,"image":76,"width":77,"height":78,"image_alt":54,"kind":55,"categories":79,"app":84},"157ee9d1-904c-4736-9178-bc5251141563","A card displaying a setup guide with a progress indicator for onboarding.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F596339a5-eefb-4c03-bfff-13a262295db5.png",789,367,[80],{"id":81,"title":82,"slug":83},213,"Progress indicator","progress-indicator",{"slug":30,"title":29,"logo":32,"categories":85},[],{"uuid":87,"title":50,"description":88,"canonical_path":4,"image":89,"width":90,"height":91,"image_alt":54,"kind":55,"categories":92,"app":97},"385aad10-7145-42f4-aefd-565323c37671","A warning message indicating that certain URLs (Discord or Slack) are not compatible with raw payloads.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9a9eb28a-e25b-4c89-976b-b55f60a9699d.png",824,272,[93],{"id":94,"title":95,"slug":96},244,"Message","message",{"slug":30,"title":29,"logo":32,"categories":98},[],{"uuid":100,"title":50,"description":101,"canonical_path":4,"image":102,"width":103,"height":104,"image_alt":54,"kind":55,"categories":105,"app":110},"e341cf35-4e28-4e57-8002-140fc5cabdc8","A dashboard interface displaying a list of products with their attributes, including visibility, pricing, revenue, and active users, alongside options for product creation, editing, and data filtering.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd0598d21-e3ce-48ec-aef9-6e5de689a26d.png",2514,806,[106],{"id":107,"title":108,"slug":109},248,"Table","table-2",{"slug":30,"title":29,"logo":32,"categories":111},[],{"uuid":113,"title":50,"description":114,"canonical_path":4,"image":115,"width":116,"height":117,"image_alt":54,"kind":55,"categories":118,"app":123},"f72502ce-1cdb-4def-8397-1fd2ab6188a5","User interface for setting up a local environment by copying environment variables.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd09ad98f-f801-405d-b639-e1bf0f8cddef.png",887,308,[119],{"id":120,"title":121,"slug":122},241,"Click to copy","click-to-copy",{"slug":30,"title":29,"logo":32,"categories":124},[],{"uuid":126,"title":50,"description":127,"canonical_path":4,"image":128,"width":129,"height":130,"image_alt":54,"kind":55,"categories":131,"app":136},"247fe197-2c23-4a1b-8d47-00a5011669fd","An empty state message for an app category, prompting the user to request an app.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6076991f-299a-4c01-8cf6-8e17cd248943.png",760,787,[132],{"id":133,"title":134,"slug":135},302,"Empty state","emptystate",{"slug":30,"title":29,"logo":32,"categories":137},[],{"uuid":139,"title":50,"description":140,"canonical_path":4,"image":141,"width":142,"height":143,"image_alt":54,"kind":55,"categories":144,"app":149},"4cb5034b-023e-463c-8959-daf234d5939b","A modal dialog for creating a promo code with various configuration options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2be0473e-51c8-47f9-83fd-364d2c575608.png",949,1786,[145],{"id":146,"title":147,"slug":148},214,"Popover","popover",{"slug":30,"title":29,"logo":32,"categories":150},[],{"uuid":152,"title":50,"description":153,"canonical_path":4,"image":154,"width":155,"height":156,"image_alt":54,"kind":55,"categories":157,"app":162},"ccddc1b9-536c-49b5-ab67-7204ed0d3743","A header with device preview toggles for a store page.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7abfecf5-52a7-4fef-a265-dcdacf289dbb.png",1054,336,[158],{"id":159,"title":160,"slug":161},236,"Toggle\u002FSwitch","toggle-switch",{"slug":30,"title":29,"logo":32,"categories":163},[],{"uuid":165,"title":50,"description":166,"canonical_path":4,"image":167,"width":168,"height":169,"image_alt":54,"kind":55,"categories":170,"app":175},"230f8196-3c84-4d48-92fd-a00392ded972","A user interface displaying a table with filter options, including an open dropdown menu for visibility status with multiple selected checkboxes.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F377fd4f8-cbb6-425f-8b82-f9d23332fdaf.png",901,410,[171],{"id":172,"title":173,"slug":174},225,"Sorting & filtering","sorting-filtering",{"slug":30,"title":29,"logo":32,"categories":176},[],{"uuid":178,"title":50,"description":179,"canonical_path":4,"image":180,"width":181,"height":182,"image_alt":54,"kind":55,"categories":183,"app":185},"f34ef089-9907-4ec9-9525-3c69b94d6e78","A dropdown menu displaying a list of actions for an item, including edit, control center, archive, delete, hide, duplicate, and details, with a hover state on 'Duplicate'.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Febd402c9-1fea-42a0-a3d3-fa3c6f194972.png",486,791,[184],{"id":58,"title":59,"slug":60},{"slug":30,"title":29,"logo":32,"categories":186},[],{"uuid":188,"title":50,"description":189,"canonical_path":4,"image":190,"width":191,"height":192,"image_alt":54,"kind":55,"categories":193,"app":198},"627c0b9d-7372-4f01-b345-f5c668f5f983","A modal interface for blocking users by IP address, featuring a search bar for countries and a list of selectable countries with associated user counts.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F13dcddeb-4a30-4d5b-8c77-af43b3ae2bd5.png",1064,1226,[194],{"id":195,"title":196,"slug":197},179,"Checkbox & radio","checkbox-radio",{"slug":30,"title":29,"logo":32,"categories":199},[],[],[202,205,208,211,214,217],{"label":203,"to":204},"Whop product screens","\u002Fexamples\u002Fapps\u002Fwhop\u002Fscreens",{"label":206,"to":207},"Whop marketing pages","\u002Fexamples\u002Fapps\u002Fwhop\u002Fmarketing",{"label":209,"to":210},"Whop user flows","\u002Fexamples\u002Fapps\u002Fwhop\u002Fflows",{"label":212,"to":213},"Communities app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcommunities",{"label":215,"to":216},"Marketplace app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmarketplace",{"label":218,"to":219},"Payments app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fpayments",{"published_at":221,"updated_at":222},"2026-02-15T11:00:48.000Z","2026-09-13T13:02:39.000Z"]