[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ffront\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":52,"showcases":204,"links":205,"dates":224},"\u002Fexamples\u002Fapps\u002Ffront\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Front UI components examples - Nicelydone","Browse Front UI component design examples. Preview individual interface elements and explore related component categories. Email redesigned for teams","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff6046d73-17a1-4c0a-b95a-61fe8d1f1cc8.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},"Front design examples","\u002Fexamples\u002Fapps\u002Ffront",{"label":23,"to":4},"Front 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},"Front","front","Email redesigned for teams","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffront-f25c6b6e.png","https:\u002F\u002Ffrontapp.com","FrontHQ",[36,40,44,48],{"id":37,"title":38,"slug":39},23,"Collaboration","collaboration",{"id":41,"title":42,"slug":43},47,"Customer Service","customer-service",{"id":45,"title":46,"slug":47},82,"Communication","communication",{"id":49,"title":50,"slug":51},92,"Email","email",[53,68,81,94,107,120,133,145,155,168,181,191],{"uuid":54,"title":55,"description":56,"canonical_path":4,"image":11,"width":57,"height":58,"image_alt":59,"kind":60,"categories":61,"app":66},"8c403300-afb6-46e8-ad78-d973ef4f3757","Front UI component","The screenshot shows a dropdown menu with options to select or create a new knowledge base.",592,575,"UI component from Front","component",[62],{"id":63,"title":64,"slug":65},190,"Dropdown menu","dropdown-menu",{"slug":30,"title":29,"logo":32,"categories":67},[],{"uuid":69,"title":55,"description":70,"canonical_path":4,"image":71,"width":72,"height":73,"image_alt":59,"kind":60,"categories":74,"app":79},"208b8aea-3a4c-419c-8e62-7aa8aec202fe","A pricing table with different plans and features.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F63b368c0-8034-4f1e-8fd4-850e35aaac0d.png",2620,1946,[75],{"id":76,"title":77,"slug":78},303,"Pricing section","pricing-section",{"slug":30,"title":29,"logo":32,"categories":80},[],{"uuid":82,"title":55,"description":83,"canonical_path":4,"image":84,"width":85,"height":86,"image_alt":59,"kind":60,"categories":87,"app":92},"c8dcf47e-89fa-4ef4-bb2f-b80fb3ed7d27","The screenshot displays an automation feature for resolving customer inquiries in front chat using AI-generated responses.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd3c1a38d-1943-4817-8d54-847e214c0912.png",1558,494,[88],{"id":89,"title":90,"slug":91},255,"Upgrade your plan","upgrade-your-plan",{"slug":30,"title":29,"logo":32,"categories":93},[],{"uuid":95,"title":55,"description":96,"canonical_path":4,"image":97,"width":98,"height":99,"image_alt":59,"kind":60,"categories":100,"app":105},"b71a7434-bb69-4c09-b6aa-044dad5601fc","The screenshot promotes the use of SSO for added security.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff6984a91-953c-4215-9703-af9e1c00c67c.png",957,1257,[101],{"id":102,"title":103,"slug":104},302,"Empty state","emptystate",{"slug":30,"title":29,"logo":32,"categories":106},[],{"uuid":108,"title":55,"description":109,"canonical_path":4,"image":110,"width":111,"height":112,"image_alt":59,"kind":60,"categories":113,"app":118},"33cd6b73-b6a8-4e8b-a3e5-1a0e00eb90ca","The screenshot shows a widget code snippet with instructions for installation.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9b39a569-9f17-4302-9fe8-64a63460c106.png",1178,786,[114],{"id":115,"title":116,"slug":117},187,"Code block","code-block",{"slug":30,"title":29,"logo":32,"categories":119},[],{"uuid":121,"title":55,"description":122,"canonical_path":4,"image":123,"width":124,"height":125,"image_alt":59,"kind":60,"categories":126,"app":131},"1194c52f-ea98-4feb-a9a3-de9c24a3e025","A notification setting with a toggle and a number input.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd6e6a62a-cf8d-4b8b-b234-78e02a9810f3.png",1812,336,[127],{"id":128,"title":129,"slug":130},257,"Input number","input-number",{"slug":30,"title":29,"logo":32,"categories":132},[],{"uuid":134,"title":55,"description":135,"canonical_path":4,"image":136,"width":137,"height":125,"image_alt":59,"kind":60,"categories":138,"app":143},"35d147c8-f796-44ed-8e8c-39c3bb87c14a","A notification alert indicating that a teammate has not accepted an invitation, with an option to resend the invitation.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc80eea2c-cca3-4bce-802d-fbab90257075.png",1460,[139],{"id":140,"title":141,"slug":142},244,"Message","message",{"slug":30,"title":29,"logo":32,"categories":144},[],{"uuid":146,"title":55,"description":147,"canonical_path":4,"image":148,"width":149,"height":150,"image_alt":59,"kind":60,"categories":151,"app":153},"3e853dcd-80e4-4f1b-8013-f7a01e7b852c","The screenshot shows an alert message indicating a webhook verification failure.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5116ec5f-b6e5-4105-8315-f758c09a9854.png",1368,364,[152],{"id":140,"title":141,"slug":142},{"slug":30,"title":29,"logo":32,"categories":154},[],{"uuid":156,"title":55,"description":157,"canonical_path":4,"image":158,"width":159,"height":160,"image_alt":59,"kind":60,"categories":161,"app":166},"73aab9ae-2e0f-4ab5-829f-95dba5ebd3b7","The screenshot shows a UI for transforming URLs into an application object, with an input field for URL patterns and a popover displaying character types.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F501dd39a-f783-43b0-9fa8-7b5d3b650ee3.png",1905,831,[162],{"id":163,"title":164,"slug":165},254,"Tooltip","tooltip-element",{"slug":30,"title":29,"logo":32,"categories":167},[],{"uuid":169,"title":55,"description":170,"canonical_path":4,"image":171,"width":172,"height":173,"image_alt":59,"kind":60,"categories":174,"app":179},"4ccba133-5ce8-4f13-bb9d-35eb813f4208","The modal allows users to upload an image by dragging and dropping or choosing a file.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F05dbe6e7-3e96-4f7f-91fd-7dc21c019918.png",800,821,[175],{"id":176,"title":177,"slug":178},188,"File upload input","file-upload-input",{"slug":30,"title":29,"logo":32,"categories":180},[],{"uuid":182,"title":55,"description":183,"canonical_path":4,"image":184,"width":185,"height":186,"image_alt":59,"kind":60,"categories":187,"app":189},"c6783ba1-b000-44f9-a395-88c7ec35bf2e","A help modal with recommended resources and other support options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1f8f5c59-71e7-4e08-b958-31ef293157fc.png",1270,1229,[188],{"id":63,"title":64,"slug":65},{"slug":30,"title":29,"logo":32,"categories":190},[],{"uuid":192,"title":55,"description":193,"canonical_path":4,"image":194,"width":195,"height":196,"image_alt":59,"kind":60,"categories":197,"app":202},"df0ba595-7bc4-4aae-9715-1307b96ae58f","The screenshot shows a modal for setting site visibility with radio buttons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd3080098-4aaf-41dd-8f66-af15e38ce332.png",1108,758,[198],{"id":199,"title":200,"slug":201},179,"Checkbox & radio","checkbox-radio",{"slug":30,"title":29,"logo":32,"categories":203},[],[],[206,209,212,215,218,221],{"label":207,"to":208},"Front product screens","\u002Fexamples\u002Fapps\u002Ffront\u002Fscreens",{"label":210,"to":211},"Front marketing pages","\u002Fexamples\u002Fapps\u002Ffront\u002Fmarketing",{"label":213,"to":214},"Front user flows","\u002Fexamples\u002Fapps\u002Ffront\u002Fflows",{"label":216,"to":217},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"label":219,"to":220},"Customer Service app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcustomer-service",{"label":222,"to":223},"Communication app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcommunication",{"published_at":225,"updated_at":226},"2016-07-13T08:45:02.000Z","2026-09-13T13:02:39.000Z"]