[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fmercury\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":39,"showcases":211,"links":212,"dates":225},"\u002Fexamples\u002Fapps\u002Fmercury\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Mercury UI components examples - Nicelydone","Browse Mercury UI component design examples. Preview individual interface elements and explore related component categories. Banking for startups","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F939467ff-69d2-4f15-81c2-3400e9d6e743.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},"Mercury design examples","\u002Fexamples\u002Fapps\u002Fmercury",{"label":23,"to":4},"Mercury 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,"twitter_username":30,"categories":34},"Mercury","mercury","Banking for startups","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmercury-2e3d5425.png","http:\u002F\u002Fmercury.com",[35],{"id":36,"title":37,"slug":38},36,"Finance","finance",[40,55,70,85,100,115,130,142,157,171,186,197],{"uuid":41,"title":42,"description":43,"canonical_path":4,"image":11,"width":44,"height":45,"image_alt":46,"kind":47,"categories":48,"app":53},"939467ff-69d2-4f15-81c2-3400e9d6e743","Error Toast Notification","A dark-themed toast notification displaying an error message with a retry action.",1000,287,"Error Toast Notification from Mercury","component",[49],{"id":50,"title":51,"slug":52},247,"Notification Toast","notification-element",{"slug":30,"title":29,"logo":32,"categories":54},[],{"uuid":56,"title":57,"description":58,"canonical_path":4,"image":59,"width":60,"height":61,"image_alt":62,"kind":47,"categories":63,"app":68},"8aba821f-c813-41f1-b800-23855b3cbaa8","API Token Copy Field","A read-only field displaying a generated API token with a tooltip indicating it can be clicked to copy. A warning message above explains that the token will only be shown once.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8aba821f-c813-41f1-b800-23855b3cbaa8.png",1216,469,"API Token Copy Field from Mercury",[64],{"id":65,"title":66,"slug":67},241,"Click to copy","click-to-copy",{"slug":30,"title":29,"logo":32,"categories":69},[],{"uuid":71,"title":72,"description":73,"canonical_path":4,"image":74,"width":75,"height":76,"image_alt":77,"kind":47,"categories":78,"app":83},"9db4594c-3751-496b-8a32-29dc3f8cdcaa","API Tokens Table","A data table displaying a list of API tokens with columns for Nickname, Permissions, Last used, Created by, Created, and Whitelisted IPs. Each row includes a more options menu icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9db4594c-3751-496b-8a32-29dc3f8cdcaa.png",2364,644,"API Tokens Table from Mercury",[79],{"id":80,"title":81,"slug":82},248,"Table","table-2",{"slug":30,"title":29,"logo":32,"categories":84},[],{"uuid":86,"title":87,"description":88,"canonical_path":4,"image":89,"width":90,"height":91,"image_alt":92,"kind":47,"categories":93,"app":98},"40e2ab40-4bc9-4276-8c15-04daa9659321","Create API Token Button","A button to create a new API token, featuring a circular plus icon with a dashed border next to the text label.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F40e2ab40-4bc9-4276-8c15-04daa9659321.png",531,208,"Create API Token Button from Mercury",[94],{"id":95,"title":96,"slug":97},175,"Button","button",{"slug":30,"title":29,"logo":32,"categories":99},[],{"uuid":101,"title":102,"description":103,"canonical_path":4,"image":104,"width":105,"height":106,"image_alt":107,"kind":47,"categories":108,"app":113},"023ac5c5-1e82-4f72-8ba3-3a4ca4358e8b","Date Picker Calendar","A calendar component for selecting a specific date. It includes a header with the selected date, current month and year, and navigation arrows. The calendar grid displays days of the week and dates, with the selected date highlighted.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F023ac5c5-1e82-4f72-8ba3-3a4ca4358e8b.png",772,791,"Date Picker Calendar from Mercury",[109],{"id":110,"title":111,"slug":112},184,"Datepicker","datepicker",{"slug":30,"title":29,"logo":32,"categories":114},[],{"uuid":116,"title":117,"description":118,"canonical_path":4,"image":119,"width":120,"height":121,"image_alt":122,"kind":47,"categories":123,"app":128},"ecdf3346-09ff-4d43-b414-6fecd741b74b","Country Code Combobox","An expanded dropdown menu for selecting a country code, featuring a search input at the top and a scrollable list of countries with flags and calling codes.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fecdf3346-09ff-4d43-b414-6fecd741b74b.png",778,680,"Country Code Combobox from Mercury",[124],{"id":125,"title":126,"slug":127},203,"Input phone number","input-phone-number",{"slug":30,"title":29,"logo":32,"categories":129},[],{"uuid":131,"title":132,"description":133,"canonical_path":4,"image":134,"width":135,"height":136,"image_alt":137,"kind":47,"categories":138,"app":140},"ef93cea1-1d71-4012-930e-936fca9702a7","Phone number input","A phone number input field with a country code selector.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fef93cea1-1d71-4012-930e-936fca9702a7.png",834,249,"Phone number input from Mercury",[139],{"id":125,"title":126,"slug":127},{"slug":30,"title":29,"logo":32,"categories":141},[],{"uuid":143,"title":144,"description":145,"canonical_path":4,"image":146,"width":147,"height":148,"image_alt":149,"kind":47,"categories":150,"app":155},"57926634-04da-4e90-bf7b-d5581bbca813","Avatar with label","A rounded square avatar containing a single initial, accompanied by a text label to its right.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F57926634-04da-4e90-bf7b-d5581bbca813.png",390,192,"Avatar with label from Mercury",[151],{"id":152,"title":153,"slug":154},169,"Avatar","avatar",{"slug":30,"title":29,"logo":32,"categories":156},[],{"uuid":158,"title":159,"description":160,"canonical_path":4,"image":161,"width":162,"height":50,"image_alt":163,"kind":47,"categories":164,"app":169},"17393595-44ea-48d4-97e4-3c878debc21e","Spending limit inputs","A row containing a dropdown to select the limit type and a number input for the monthly spending limit.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F17393595-44ea-48d4-97e4-3c878debc21e.png",832,"Spending limit inputs from Mercury",[165],{"id":166,"title":167,"slug":168},198,"Input amount","input-amount",{"slug":30,"title":29,"logo":32,"categories":170},[],{"uuid":172,"title":173,"description":174,"canonical_path":4,"image":175,"width":176,"height":177,"image_alt":178,"kind":47,"categories":179,"app":184},"79b0b7f5-b0d6-4801-bdd5-197dbeb2e4cd","Card type radio group","A radio group allowing the user to select between Credit and Debit card types, styled as large selectable cards.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F79b0b7f5-b0d6-4801-bdd5-197dbeb2e4cd.png",629,273,"Card type radio group from Mercury",[180],{"id":181,"title":182,"slug":183},179,"Checkbox & radio","checkbox-radio",{"slug":30,"title":29,"logo":32,"categories":185},[],{"uuid":187,"title":188,"description":189,"canonical_path":4,"image":190,"width":191,"height":110,"image_alt":192,"kind":47,"categories":193,"app":195},"7f9c1801-f861-4720-af90-9d459c181c5d","Avatar group with text","A horizontal row showing two overlapping circular avatars with initials, followed by descriptive text indicating the number of users.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7f9c1801-f861-4720-af90-9d459c181c5d.png",1015,"Avatar group with text from Mercury",[194],{"id":152,"title":153,"slug":154},{"slug":30,"title":29,"logo":32,"categories":196},[],{"uuid":198,"title":199,"description":200,"canonical_path":4,"image":201,"width":202,"height":91,"image_alt":203,"kind":47,"categories":204,"app":209},"3e9bbbe4-50fe-4929-9b44-b4d4bbc674a3","Select input","A standard select input field displaying a selected value with a dropdown arrow.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3e9bbbe4-50fe-4929-9b44-b4d4bbc674a3.png",443,"Select input from Mercury",[205],{"id":206,"title":207,"slug":208},204,"Input select","input-select",{"slug":30,"title":29,"logo":32,"categories":210},[],[],[213,216,219,222],{"label":214,"to":215},"Mercury product screens","\u002Fexamples\u002Fapps\u002Fmercury\u002Fscreens",{"label":217,"to":218},"Mercury marketing pages","\u002Fexamples\u002Fapps\u002Fmercury\u002Fmarketing",{"label":220,"to":221},"Mercury user flows","\u002Fexamples\u002Fapps\u002Fmercury\u002Fflows",{"label":223,"to":224},"Finance app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ffinance",{"published_at":226,"updated_at":227},"2023-02-28T15:58:22.000Z","2026-09-13T13:02:39.000Z"]