[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fvercel\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":43,"showcases":212,"links":213,"dates":229},"\u002Fexamples\u002Fapps\u002Fvercel\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Vercel UI components examples - Nicelydone","Browse Vercel UI component design examples. Preview individual interface elements and explore related component categories. Develop. Preview. Ship.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdd08d982-148b-4633-a0f7-378d423775c9.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},"Vercel design examples","\u002Fexamples\u002Fapps\u002Fvercel",{"label":23,"to":4},"Vercel 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},"Vercel","vercel","Develop. Preview. Ship.","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fvercel-c74059ac.png","https:\u002F\u002Fvercel.com",[35,39],{"id":36,"title":37,"slug":38},48,"Developer Tools","developer-tools",{"id":40,"title":41,"slug":42},7,"Web Development","web-development",[44,59,74,89,104,116,131,146,154,168,183,197],{"uuid":45,"title":46,"description":47,"canonical_path":4,"image":11,"width":48,"height":49,"image_alt":50,"kind":51,"categories":52,"app":57},"1dede83c-36d2-45a2-a6c5-050c9ab5550b","Mega Menu Dropdown","A navigation bar with an expanded 'Features' dropdown menu. The dropdown displays a grid of feature categories, each with an icon, title, and short description.",1380,725,"Mega Menu Dropdown from Vercel","component",[53],{"id":54,"title":55,"slug":56},290,"Flyout menu","flyout-menu",{"slug":30,"title":29,"logo":32,"categories":58},[],{"uuid":60,"title":61,"description":62,"canonical_path":4,"image":63,"width":64,"height":65,"image_alt":66,"kind":51,"categories":67,"app":72},"b85f37f5-13db-4e1b-9ec7-ed3486db6990","Hero Section with Logo Wall","A landing page hero section featuring a prominent headline, a subheadline, two call-to-action buttons, and a logo wall of trusted companies.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F162a4696-8bea-439f-96a0-c9d0c43b04e9.png",3024,1757,"Hero Section with Logo Wall from Vercel",[68],{"id":69,"title":70,"slug":71},197,"Hero section","hero-section",{"slug":30,"title":29,"logo":32,"categories":73},[],{"uuid":75,"title":76,"description":77,"canonical_path":4,"image":78,"width":79,"height":80,"image_alt":81,"kind":51,"categories":82,"app":87},"2eedfb95-f610-47b9-9dbb-8a8f72c756fb","Overdue payment alert","A full-width alert banner notifying the user of an overdue payment, with a call to action to update the payment method.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7ea17c3a-a7d1-428b-97eb-f132e0597d9c.png",2656,352,"Overdue payment alert from Vercel",[83],{"id":84,"title":85,"slug":86},167,"Alert","alert",{"slug":30,"title":29,"logo":32,"categories":88},[],{"uuid":90,"title":91,"description":92,"canonical_path":4,"image":93,"width":94,"height":95,"image_alt":96,"kind":51,"categories":97,"app":102},"627bf0ac-483c-42d9-9436-c005d3e7194d","Success Toast Notification","A stacked toast notification showing a success message for deleting a team.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7d1e3221-b878-4a25-ba20-1245342071ed.png",1128,472,"Success Toast Notification from Vercel",[98],{"id":99,"title":100,"slug":101},247,"Notification Toast","notification-element",{"slug":30,"title":29,"logo":32,"categories":103},[],{"uuid":105,"title":106,"description":107,"canonical_path":4,"image":108,"width":109,"height":110,"image_alt":111,"kind":51,"categories":112,"app":114},"02434750-7364-48fa-bcdd-c6539de989b4","Destructive warning alert","A simple inline alert box with a light red background and dark red text warning the user that an action is irreversible.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F57af0003-c17e-4b93-97c9-71dd7966e579.png",1000,208,"Destructive warning alert from Vercel",[113],{"id":84,"title":85,"slug":86},{"slug":30,"title":29,"logo":32,"categories":115},[],{"uuid":117,"title":118,"description":119,"canonical_path":4,"image":120,"width":121,"height":122,"image_alt":123,"kind":51,"categories":124,"app":129},"6bd51732-fe67-4a22-8f3b-3b811ce6711d","Username input field","A text input field for setting a username, featuring a fixed prefix indicating the URL namespace.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe050258a-70d3-430a-8c4f-47080ad97d46.png",728,339,"Username input field from Vercel",[125],{"id":126,"title":127,"slug":128},201,"Input text","input-text",{"slug":30,"title":29,"logo":32,"categories":130},[],{"uuid":132,"title":133,"description":134,"canonical_path":4,"image":135,"width":136,"height":137,"image_alt":138,"kind":51,"categories":139,"app":144},"54703259-fac1-4ac7-9c9d-017731ec6426","Theme selector","A form field row containing a label 'Theme' and a dropdown select input currently set to 'Dark', featuring a moon icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F518cec3a-c21b-42ea-868b-982e44cc1e9d.png",547,176,"Theme selector from Vercel",[140],{"id":141,"title":142,"slug":143},256,"Theme settings","theme-settings",{"slug":30,"title":29,"logo":32,"categories":145},[],{"uuid":147,"title":133,"description":148,"canonical_path":4,"image":149,"width":136,"height":137,"image_alt":138,"kind":51,"categories":150,"app":152},"dbf92f94-8b10-4c30-b823-ea3f36a958ad","A row containing a 'Theme' label and a dropdown select menu currently set to 'System'.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F64358e07-0b2a-450e-985c-4e01cdf0abed.png",[151],{"id":141,"title":142,"slug":143},{"slug":30,"title":29,"logo":32,"categories":153},[],{"uuid":155,"title":156,"description":157,"canonical_path":4,"image":158,"width":159,"height":126,"image_alt":160,"kind":51,"categories":161,"app":166},"6954a5ca-cb47-4348-b7c4-fe7cec6dcb0e","User profile row","A user profile row displaying a circular gradient avatar, a username, and an email address.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffb452474-f27d-4f25-b037-25c0dd42f2b7.png",571,"User profile row from Vercel",[162],{"id":163,"title":164,"slug":165},169,"Avatar","avatar",{"slug":30,"title":29,"logo":32,"categories":167},[],{"uuid":169,"title":170,"description":171,"canonical_path":4,"image":172,"width":173,"height":174,"image_alt":175,"kind":51,"categories":176,"app":181},"c6538050-6bb8-45f6-8635-19d2afedf495","Invoice details table","An expanded accordion showing a detailed breakdown of a monthly invoice. It lists various services, their usage, unit price, and total amount, concluding with a total row.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc05c3afb-9592-4726-b1b1-744b82ec3ad9.png",2080,3576,"Invoice details table from Vercel",[177],{"id":178,"title":179,"slug":180},248,"Table","table-2",{"slug":30,"title":29,"logo":32,"categories":182},[],{"uuid":184,"title":185,"description":186,"canonical_path":4,"image":187,"width":79,"height":188,"image_alt":189,"kind":51,"categories":190,"app":195},"b9f944a2-7d79-43b5-8b56-c71bb07297db","Code snippet block with tabs","A code block component displaying a connection snippet. It features a top tab bar to switch between different languages or frameworks, a 'Copy Snippet' button, and syntax-highlighted code with line numbers.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd1637154-80f7-436b-8e26-ccced0a9758c.png",1060,"Code snippet block with tabs from Vercel",[191],{"id":192,"title":193,"slug":194},187,"Code block","code-block",{"slug":30,"title":29,"logo":32,"categories":196},[],{"uuid":198,"title":199,"description":200,"canonical_path":4,"image":201,"width":202,"height":203,"image_alt":204,"kind":51,"categories":205,"app":210},"5e433ca2-83d5-4307-b824-41b7c6a7f34c","Chart with tooltip and data table","A stacked bar chart showing requests over time, with a detailed tooltip displaying the breakdown for a specific timestamp. Below the chart is a data table listing the user agents and their corresponding request counts.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fde73644a-c670-4b05-94db-f56743951463.png",1924,1575,"Chart with tooltip and data table from Vercel",[206],{"id":207,"title":208,"slug":209},186,"Charts","charts",{"slug":30,"title":29,"logo":32,"categories":211},[],[],[214,217,220,223,226],{"label":215,"to":216},"Vercel product screens","\u002Fexamples\u002Fapps\u002Fvercel\u002Fscreens",{"label":218,"to":219},"Vercel marketing pages","\u002Fexamples\u002Fapps\u002Fvercel\u002Fmarketing",{"label":221,"to":222},"Vercel user flows","\u002Fexamples\u002Fapps\u002Fvercel\u002Fflows",{"label":224,"to":225},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":227,"to":228},"Web Development app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fweb-development",{"published_at":230,"updated_at":231},"2021-09-05T13:58:15.000Z","2026-09-26T12:10:14.000Z"]