[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fbard\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":40,"showcases":198,"links":199,"dates":230},"\u002Fexamples\u002Fapps\u002Fbard\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Bard UI components examples - Nicelydone","Browse Bard UI component design examples. Preview individual interface elements and explore related component categories. A conversational AI tool by Google","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F07a2f41b-0cbe-46f6-ab32-ae174d2d5fcb.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},"Bard design examples","\u002Fexamples\u002Fapps\u002Fbard",{"label":23,"to":4},"Bard 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":34,"categories":35},"Bard","bard","A conversational AI tool by Google","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fbard-n5q02ehw.png","https:\u002F\u002Fbard.google.com\u002F","https:\u002F\u002Ftwitter.com\u002FGoogle",[36],{"id":37,"title":38,"slug":39},80,"Artificial Intelligence","artificial-intelligence",[41,56,69,82,95,108,121,134,146,159,172,185],{"uuid":42,"title":43,"description":44,"canonical_path":4,"image":11,"width":45,"height":46,"image_alt":47,"kind":48,"categories":49,"app":54},"0b5a0e13-f008-4e55-8edc-5cc8cd633fa7","Bard UI component","A modal with a double-check feature.",2463,1226,"UI component from Bard","component",[50],{"id":51,"title":52,"slug":53},294,"Artificial intelligence","ai",{"slug":30,"title":29,"logo":32,"categories":55},[],{"uuid":57,"title":43,"description":58,"canonical_path":4,"image":59,"width":60,"height":61,"image_alt":47,"kind":48,"categories":62,"app":67},"aec67857-4799-4939-be9f-b7ed165831d8","A modal with a toggle and suggested search queries for Google Hotels.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F67650418-9f14-4931-b83f-6956afd871f2.png",656,866,[63],{"id":64,"title":65,"slug":66},236,"Toggle\u002FSwitch","toggle-switch",{"slug":30,"title":29,"logo":32,"categories":68},[],{"uuid":70,"title":43,"description":71,"canonical_path":4,"image":72,"width":73,"height":74,"image_alt":47,"kind":48,"categories":75,"app":80},"552d315d-5f72-45ed-94b7-e561548b7596","This is a chat interface with a list of recent chats.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F47bd9adb-aa3d-455e-b12c-dd5c0fa9de9f.png",677,1741,[76],{"id":77,"title":78,"slug":79},209,"Vertical navigation","vertical-navigation",{"slug":30,"title":29,"logo":32,"categories":81},[],{"uuid":83,"title":43,"description":84,"canonical_path":4,"image":85,"width":86,"height":87,"image_alt":47,"kind":48,"categories":88,"app":93},"a1a17568-4ee8-454a-b792-f93dad641baf","A meal plan table.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4fb43099-8ecc-4152-9e01-e167ab13b7b7.png",2313,1232,[89],{"id":90,"title":91,"slug":92},248,"Table","table-2",{"slug":30,"title":29,"logo":32,"categories":94},[],{"uuid":96,"title":43,"description":97,"canonical_path":4,"image":98,"width":99,"height":100,"image_alt":47,"kind":48,"categories":101,"app":106},"b55c6071-6cb1-4721-b477-c7468a7329ad","A code snippet in Python.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F862d3739-f89a-467e-a83b-9331efde01e3.png",2272,1070,[102],{"id":103,"title":104,"slug":105},187,"Code block","code-block",{"slug":30,"title":29,"logo":32,"categories":107},[],{"uuid":109,"title":43,"description":110,"canonical_path":4,"image":111,"width":112,"height":113,"image_alt":47,"kind":48,"categories":114,"app":119},"103f3b28-55da-440b-afdc-4ffaeed2922d","A notification modal","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0c4951e5-4dcb-4b92-a026-9f632f37cc9d.png",877,277,[115],{"id":116,"title":117,"slug":118},247,"Notification Toast","notification-element",{"slug":30,"title":29,"logo":32,"categories":120},[],{"uuid":122,"title":43,"description":123,"canonical_path":4,"image":124,"width":125,"height":126,"image_alt":47,"kind":48,"categories":127,"app":132},"1cdb2091-d1d2-402a-8a4a-0518bc7b2419","A modal with a public link and social sharing options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5cf71b2b-baca-46c1-b047-3b68ccd00410.png",1375,947,[128],{"id":129,"title":130,"slug":131},241,"Click to copy","click-to-copy",{"slug":30,"title":29,"logo":32,"categories":133},[],{"uuid":135,"title":43,"description":136,"canonical_path":4,"image":137,"width":99,"height":138,"image_alt":47,"kind":48,"categories":139,"app":144},"e20a1859-97ef-4c4c-b8ca-3886513f8078","A list of sources with a link","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa1719084-3775-4aac-a84e-602c9eebcd7d.png",416,[140],{"id":141,"title":142,"slug":143},167,"Alert","alert",{"slug":30,"title":29,"logo":32,"categories":145},[],{"uuid":147,"title":43,"description":148,"canonical_path":4,"image":149,"width":150,"height":151,"image_alt":47,"kind":48,"categories":152,"app":157},"caee441f-101d-4053-a0f5-f09b5637e36f","A modal with a message about double-checking Bard's response.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff6c8cb20-d8f9-4cfa-a36c-72c9466d1855.png",843,633,[153],{"id":154,"title":155,"slug":156},254,"Tooltip","tooltip-element",{"slug":30,"title":29,"logo":32,"categories":158},[],{"uuid":160,"title":43,"description":161,"canonical_path":4,"image":162,"width":163,"height":164,"image_alt":47,"kind":48,"categories":165,"app":170},"8ab32b43-3e7c-41a0-b54e-f4b74986a391","A chat modal with a prompt.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa728ba56-1292-43b9-97a9-b349b7387aa9.png",2498,610,[166],{"id":167,"title":168,"slug":169},201,"Input text","input-text",{"slug":30,"title":29,"logo":32,"categories":171},[],{"uuid":173,"title":43,"description":174,"canonical_path":4,"image":175,"width":176,"height":177,"image_alt":47,"kind":48,"categories":178,"app":183},"6d0bb8a8-e5aa-4c31-8440-7c0ff603e5a4","A modal with three options","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F822bf68c-cc31-41e6-846a-16b94aefd30c.png",827,684,[179],{"id":180,"title":181,"slug":182},204,"Input select","input-select",{"slug":30,"title":29,"logo":32,"categories":184},[],{"uuid":186,"title":43,"description":187,"canonical_path":4,"image":188,"width":189,"height":190,"image_alt":47,"kind":48,"categories":191,"app":196},"b3340673-00b8-4df2-99e3-a97fcad718f4","This is a simple header with a logo, a link, a menu and a button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fec98fb75-de66-4905-9923-07a2b80e4181.png",3199,328,[192],{"id":193,"title":194,"slug":195},258,"Header","header",{"slug":30,"title":29,"logo":32,"categories":197},[],[],[200,203,206,209,212,214,218,222,226],{"label":201,"to":202},"Bard product screens","\u002Fexamples\u002Fapps\u002Fbard\u002Fscreens",{"label":204,"to":205},"Bard marketing pages","\u002Fexamples\u002Fapps\u002Fbard\u002Fmarketing",{"label":207,"to":208},"Bard user flows","\u002Fexamples\u002Fapps\u002Fbard\u002Fflows",{"label":210,"to":211},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"label":213,"to":18},"All SaaS app examples",{"label":215,"to":216,"description":217},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":219,"to":220,"description":221},"SaaS marketing page examples","\u002Fexamples\u002Fpages","Browse real SaaS marketing pages grouped by page type, from landing pages to pricing and customer story pages.",{"label":223,"to":224,"description":225},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":227,"to":228,"description":229},"User flow examples from SaaS apps","\u002Fexamples\u002Fflows","Explore user flow examples for sign-up, onboarding, billing, and other SaaS tasks. Compare the order of screens and preview the opening steps from real apps.",{"published_at":231,"updated_at":232},"2023-11-05T15:25:41.000Z","2026-09-13T13:02:39.000Z"]