[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fmessage":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":336,"links":337,"dates":386},"\u002Fexamples\u002Fcomponents\u002Fmessage","collection","components",true,{"example_count":9,"app_count":10},89,56,{"id":12,"title":13,"description":14},244,"Message","See how interfaces present notices within the page. Explore how message text, emphasis, and related actions explain a change, requirement, or current condition near the affected content.",{"title":16,"description":17,"og_image":18},"Message UI examples - Nicelydone","Message UI design examples from SaaS apps. See how interfaces present notices within the page. Explore how message text, emphasis, and related actions…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F60c10556-e46a-4f75-8583-ac03716e1efd.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Message UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Message UI design examples from SaaS apps. See how interfaces present notices within the page. Explore how message text, emphasis, and related actions explain a change, requirement, or current…",[32],{"title":33,"description":14,"links":34},"About Message",[],[36],"89 UI components",[38,68,86,119,138,163,189,216,239,258,287,316],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"ad1795d3-6746-4692-9fa3-babbb41b767a","Flask UI component","A notification bar indicating asset processing status and feedback saving.","\u002Fexamples\u002Fapps\u002Fflask\u002Fcomponents",1403,322,"UI component from Flask","component",[48],{"id":12,"title":13,"slug":49},"message",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"flask","Flask","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffb0bfd95-becd-46ec-9917-a82dd6bbe601.png","Give detailed video feedback in minutes without typing comments",[56,60,64],{"id":57,"title":58,"slug":59},100,"Video","video",{"id":61,"title":62,"slug":63},23,"Collaboration","collaboration",{"id":65,"title":66,"slug":67},35,"Feedback","feedback",{"uuid":69,"title":70,"description":71,"canonical_path":72,"image":73,"width":74,"height":75,"image_alt":76,"kind":46,"categories":77,"app":79},"71529f8e-695c-4432-b476-7500353c0613","Riverside UI component","An informational message providing guidance on video recording requirements, specifically regarding speaker layout and its impact on track separation.","\u002Fexamples\u002Fapps\u002Friverside\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F86aa0690-24e2-4e13-8f93-8deeb68e0fd8.png",1324,418,"UI component from Riverside",[78],{"id":12,"title":13,"slug":49},{"slug":80,"title":81,"logo":82,"baseline":83,"categories":84},"riverside","Riverside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcc94468d-7b59-49b7-b969-3aee258a2348.png","HD podcast and video recording and editing software",[85],{"id":57,"title":58,"slug":59},{"uuid":87,"title":88,"description":89,"canonical_path":90,"image":91,"width":92,"height":93,"image_alt":94,"kind":46,"categories":95,"app":97},"33927dda-7102-461a-95e8-7fdd723c43db","Email Connection Info Box","Displays a prompt to connect an email account for AI draft reply suggestions","\u002Fexamples\u002Fapps\u002Fbeside\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F380503a1-8bda-4a6a-81cc-44af270f6683.png",1664,503,"Email Connection Info Box from Beside",[96],{"id":12,"title":13,"slug":49},{"slug":98,"title":99,"logo":100,"baseline":101,"categories":102},"beside","Beside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F8c14025e-58b4-4801-bd91-3e31a3cf8f21.png","AI-powered business phone assistant that answers calls and takes action",[103,107,111,115],{"id":104,"title":105,"slug":106},80,"Artificial Intelligence","artificial-intelligence",{"id":108,"title":109,"slug":110},47,"Customer Service","customer-service",{"id":112,"title":113,"slug":114},53,"CRM","crm",{"id":116,"title":117,"slug":118},82,"Communication","communication",{"uuid":120,"title":121,"description":122,"canonical_path":123,"image":124,"width":125,"height":126,"image_alt":127,"kind":46,"categories":128,"app":130},"a4056aaa-f91e-465b-961a-c4ba128a196d","Prompt suggestion banner","Encourages selection of an example prompt to quickly start AI avatar configuration","\u002Fexamples\u002Fapps\u002Fheygen\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F49e1e14d-69d6-4c67-9e90-8496f77f15df.png",1458,382,"Prompt suggestion banner from HeyGen",[129],{"id":12,"title":13,"slug":49},{"slug":131,"title":132,"logo":133,"baseline":134,"categories":135},"heygen","HeyGen","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fd8cda81f-5b21-444e-8401-676a6cf2f817.png","AI video generator that turns ideas into professional videos in minutes",[136,137],{"id":57,"title":58,"slug":59},{"id":104,"title":105,"slug":106},{"uuid":139,"title":140,"description":141,"canonical_path":142,"image":143,"width":144,"height":145,"image_alt":146,"kind":46,"categories":147,"app":149},"3d55a92c-424f-45db-97fd-8a33134ec3b6","Recovery Code Prompt Card","Dismissible light-blue card with title, short description and blue CTA button encouraging generation of a recovery code.","\u002Fexamples\u002Fapps\u002Ffamily\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0ff2f7fe-2040-4dbf-aa47-682fe6bed4d8.png",1204,581,"Recovery Code Prompt Card from Family",[148],{"id":12,"title":13,"slug":49},{"slug":150,"title":151,"logo":152,"baseline":153,"categories":154},"family","Family","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F54b399c5-e1bc-4b2d-9748-6c66246cee2b.png","Your favorite crypto wallet.",[155,159],{"id":156,"title":157,"slug":158},36,"Finance","finance",{"id":160,"title":161,"slug":162},95,"Blockchain","blockchain",{"uuid":164,"title":165,"description":166,"canonical_path":167,"image":168,"width":169,"height":170,"image_alt":171,"kind":46,"categories":172,"app":174},"990afbb8-3c7f-4eac-8983-719b9919e52c","Search Success Toast","Shows success feedback after a search action and suggests refining parameters","\u002Fexamples\u002Fapps\u002Fexa\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F07c5e56f-c53b-4923-8c51-d956fdf04740.jpg",736,296,"Search Success Toast from Exa",[173],{"id":12,"title":13,"slug":49},{"slug":175,"title":176,"logo":177,"baseline":178,"categories":179},"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",[180,184,185],{"id":181,"title":182,"slug":183},55,"Search engine","search-engine",{"id":104,"title":105,"slug":106},{"id":186,"title":187,"slug":188},37,"Developer APIs","developer-apis",{"uuid":190,"title":191,"description":192,"canonical_path":193,"image":194,"width":195,"height":196,"image_alt":197,"kind":46,"categories":198,"app":200},"833a9d9f-26c5-47aa-85d3-015cb5023aa2","Assembly AI App Builder UI component","An informational message box with a link to update settings, displayed on a white background.","\u002Fexamples\u002Fapps\u002Fassembly-2\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fba7ab7f8-2417-4fb4-8345-a95930edd452.png",1892,450,"UI component from Assembly AI App Builder",[199],{"id":12,"title":13,"slug":49},{"slug":201,"title":202,"logo":203,"baseline":204,"categories":205},"assembly-2","Assembly AI App Builder","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fe0ead769-d687-403b-a7bd-124ca7356944.png","AI-powered platform for professional services firms to build client portals and CRM tools",[206,207,211,212],{"id":112,"title":113,"slug":114},{"id":208,"title":209,"slug":210},90,"Business","business",{"id":104,"title":105,"slug":106},{"id":213,"title":214,"slug":215},96,"No code","no-code",{"uuid":217,"title":218,"description":219,"canonical_path":220,"image":221,"width":222,"height":223,"image_alt":224,"kind":46,"categories":225,"app":227},"65a71bbf-0dc7-49d5-9ad4-36777a4149a7","Lovable UI component","A page section displaying domain management options with a warning message about an unpublished project and a call to action to publish.","\u002Fexamples\u002Fapps\u002Flovable\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F47cf18e8-5c10-4769-89ba-666385c6ce21.png",2514,505,"UI component from Lovable",[226],{"id":12,"title":13,"slug":49},{"slug":228,"title":229,"logo":230,"baseline":231,"categories":232},"lovable","Lovable","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F371498a3-d8de-4908-8af8-e73a603ffa34.png","Create apps and websites by chatting with AI",[233,234,238],{"id":104,"title":105,"slug":106},{"id":235,"title":236,"slug":237},7,"Web Development","web-development",{"id":213,"title":214,"slug":215},{"uuid":240,"title":241,"description":242,"canonical_path":243,"image":244,"width":245,"height":246,"image_alt":247,"kind":46,"categories":248,"app":250},"41ead614-5deb-4b5d-9385-714517018a0f","Elevenlabs UI component","A user interface displaying a model selection field and a promotional banner for a newer version of a text-to-speech model.","\u002Fexamples\u002Fapps\u002Felevenlabs\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6f1cb23d-b63b-45b8-b443-fa75565ee4ee.png",1054,337,"UI component from Elevenlabs",[249],{"id":12,"title":13,"slug":49},{"slug":251,"title":252,"logo":253,"baseline":254,"categories":255},"elevenlabs","Elevenlabs","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F040a4c11-6cc6-49d0-85e4-c7f5a0265a3a.png","Bringing technology to life",[256,257],{"id":104,"title":105,"slug":106},{"id":186,"title":187,"slug":188},{"uuid":259,"title":260,"description":261,"canonical_path":262,"image":263,"width":264,"height":265,"image_alt":266,"kind":46,"categories":267,"app":269},"e9e8700c-7eb8-4ec7-8cac-63f08ac8d8a3","Mailchimp UI component","An informational banner notifying users about a change in the location of comparative reports, providing options to learn more or view the reports.","\u002Fexamples\u002Fapps\u002Fmailchimp\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd12e8485-f97a-4880-9a4b-74dbabada8f7.png",2536,452,"UI component from Mailchimp",[268],{"id":12,"title":13,"slug":49},{"slug":270,"title":271,"logo":272,"baseline":273,"categories":274},"mailchimp","Mailchimp","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmailchimp-bd8e0c89.png","All-in-one marketing platform for small business",[275,279,283],{"id":276,"title":277,"slug":278},25,"Marketing","marketing",{"id":280,"title":281,"slug":282},27,"Email Newsletters","email-newsletters",{"id":284,"title":285,"slug":286},68,"SMS","sms",{"uuid":288,"title":289,"description":290,"canonical_path":291,"image":292,"width":293,"height":294,"image_alt":295,"kind":46,"categories":296,"app":298},"d77e2b9a-a692-4257-9b58-b27832828f28","Maze UI component","A warning message informing the user about trial usage limits and that deleted studies still count towards the limit.","\u002Fexamples\u002Fapps\u002Fmaze\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F556c9806-8da1-4c35-8f36-a9138ac06052.png",1032,320,"UI component from Maze",[297],{"id":12,"title":13,"slug":49},{"slug":299,"title":300,"logo":301,"baseline":302,"categories":303},"maze","Maze","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F29732693-68cb-43d3-8a42-056936993f0f.png","Rapid testing for modern teams",[304,308,312],{"id":305,"title":306,"slug":307},8,"Design","design",{"id":309,"title":310,"slug":311},69,"Surveys","surveys",{"id":313,"title":314,"slug":315},104,"User Research","user-research",{"uuid":317,"title":318,"description":319,"canonical_path":320,"image":321,"width":322,"height":323,"image_alt":324,"kind":46,"categories":325,"app":327},"084a37d8-41b7-4fc8-8347-e1a391d706bd","Morphic UI component","A dark mode banner notification prompting a user to upgrade their plan to invite more members, featuring a clickable upgrade link and a dismiss icon.","\u002Fexamples\u002Fapps\u002Fmorphic\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc4ed3548-c907-400f-9148-7cbe7abf9396.png",1584,332,"UI component from Morphic",[326],{"id":12,"title":13,"slug":49},{"slug":328,"title":329,"logo":330,"baseline":331,"categories":332},"morphic","Morphic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F17b1263a-8707-435d-8214-460280911e23.png","A new era of storytelling",[333,334,335],{"id":57,"title":58,"slug":59},{"id":305,"title":306,"slug":307},{"id":104,"title":105,"slug":106},[],[338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383],{"label":339,"to":340},"AI Editing","\u002Fexamples\u002Fscreens\u002Fai-editing",{"label":342,"to":343},"AI Generation","\u002Fexamples\u002Fscreens\u002Fai-generation",{"label":345,"to":346},"Media Editor","\u002Fexamples\u002Fscreens\u002Fmedia-editor",{"label":348,"to":349},"Feature Gate","\u002Fexamples\u002Fscreens\u002Ffeature-gate",{"label":351,"to":352},"Flask design examples","\u002Fexamples\u002Fapps\u002Fflask",{"label":354,"to":355},"Riverside design examples","\u002Fexamples\u002Fapps\u002Friverside",{"label":357,"to":358},"Beside design examples","\u002Fexamples\u002Fapps\u002Fbeside",{"label":360,"to":361},"HeyGen design examples","\u002Fexamples\u002Fapps\u002Fheygen",{"label":363,"to":364},"Family design examples","\u002Fexamples\u002Fapps\u002Ffamily",{"label":366,"to":367},"Exa design examples","\u002Fexamples\u002Fapps\u002Fexa",{"label":369,"to":370},"Assembly AI App Builder design examples","\u002Fexamples\u002Fapps\u002Fassembly-2",{"label":372,"to":373},"Lovable design examples","\u002Fexamples\u002Fapps\u002Flovable",{"label":375,"to":376},"Elevenlabs design examples","\u002Fexamples\u002Fapps\u002Felevenlabs",{"label":378,"to":379},"Mailchimp design examples","\u002Fexamples\u002Fapps\u002Fmailchimp",{"label":381,"to":382},"Maze design examples","\u002Fexamples\u002Fapps\u002Fmaze",{"label":384,"to":385},"Morphic design examples","\u002Fexamples\u002Fapps\u002Fmorphic",{"published_at":387,"updated_at":388},"2022-08-22T09:51:59.000Z","2026-09-17T10:44:16.000Z"]