[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ffernand\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":45,"showcases":221,"links":222,"dates":238},"\u002Fexamples\u002Fapps\u002Ffernand\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Fernand UI components examples - Nicelydone","Browse Fernand UI component design examples. Preview individual interface elements and explore related component categories. The fast, calm customer support…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F520a0ec2-0761-42c3-94aa-1ea73bb9dac0.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},"Fernand design examples","\u002Fexamples\u002Fapps\u002Ffernand",{"label":23,"to":4},"Fernand UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Fernand UI component design examples. Preview individual interface elements and explore related component categories. The fast, calm customer support platform for SaaS",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Fernand","fernand","The fast, calm customer support platform for SaaS","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffernand-a050bf87.png","https:\u002F\u002Fgetfernand.com","getfernand",[37,41],{"id":38,"title":39,"slug":40},47,"Customer Service","customer-service",{"id":42,"title":43,"slug":44},92,"Email","email",[46,61,76,91,106,121,133,148,162,177,191,206],{"uuid":47,"title":48,"description":49,"canonical_path":4,"image":11,"width":50,"height":51,"image_alt":52,"kind":53,"categories":54,"app":59},"5a548e98-f937-416a-be00-284476a4c8c3","Feature bento grid","A bento grid layout showcasing product features with a title, description, and visual examples for each feature.",2836,3164,"Feature bento grid from Fernand","component",[55],{"id":56,"title":57,"slug":58},298,"Bento box","bento-grid",{"slug":31,"title":30,"logo":33,"categories":60},[],{"uuid":62,"title":63,"description":64,"canonical_path":4,"image":65,"width":66,"height":67,"image_alt":68,"kind":53,"categories":69,"app":74},"5300f17f-25a4-42fe-ad79-8836839e16d4","Automation rule builder","A logical rule builder interface with 'WHEN', 'IF', and 'THEN' sections. The 'WHEN' section contains two dropdowns to set a trigger event. The 'IF' and 'THEN' sections contain buttons to add conditions and actions.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5300f17f-25a4-42fe-ad79-8836839e16d4.png",1702,867,"Automation rule builder from Fernand",[70],{"id":71,"title":72,"slug":73},217,"Query builder","query-builder",{"slug":31,"title":30,"logo":33,"categories":75},[],{"uuid":77,"title":78,"description":79,"canonical_path":4,"image":80,"width":81,"height":82,"image_alt":83,"kind":53,"categories":84,"app":89},"96233461-bd98-4ce8-b293-db3af2d86b13","Color picker popover","A horizontal popover displaying a palette of ten circular color swatches, anchored to a trigger button showing the currently selected color.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F96233461-bd98-4ce8-b293-db3af2d86b13.png",874,180,"Color picker popover from Fernand",[85],{"id":86,"title":87,"slug":88},183,"Color picker","color-picker",{"slug":31,"title":30,"logo":33,"categories":90},[],{"uuid":92,"title":93,"description":94,"canonical_path":4,"image":95,"width":96,"height":97,"image_alt":98,"kind":53,"categories":99,"app":104},"658228a5-e7c9-4eca-82b7-0be7baa3efba","Success Toast","A success toast notification indicating a channel was added.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F658228a5-e7c9-4eca-82b7-0be7baa3efba.png",974,443,"Success Toast from Fernand",[100],{"id":101,"title":102,"slug":103},247,"Notification Toast","notification-element",{"slug":31,"title":30,"logo":33,"categories":105},[],{"uuid":107,"title":108,"description":109,"canonical_path":4,"image":110,"width":111,"height":112,"image_alt":113,"kind":53,"categories":114,"app":119},"5e1044db-b92a-4c8f-9a92-3919ff52aa07","Descriptive radio option","A single radio button option with a title and a multi-line descriptive text explaining the role.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5e1044db-b92a-4c8f-9a92-3919ff52aa07.png",1052,259,"Descriptive radio option from Fernand",[115],{"id":116,"title":117,"slug":118},179,"Checkbox & radio","checkbox-radio",{"slug":31,"title":30,"logo":33,"categories":120},[],{"uuid":122,"title":123,"description":124,"canonical_path":4,"image":125,"width":126,"height":127,"image_alt":128,"kind":53,"categories":129,"app":131},"ee6c504a-2d40-4340-bbcd-86435452b77c","Selected role option","A selected radio-style option for a 'Support agent' role, featuring a blue checkmark icon, a title, and a descriptive subtitle.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fee6c504a-2d40-4340-bbcd-86435452b77c.png",1011,258,"Selected role option from Fernand",[130],{"id":116,"title":117,"slug":118},{"slug":31,"title":30,"logo":33,"categories":132},[],{"uuid":134,"title":135,"description":136,"canonical_path":4,"image":137,"width":138,"height":139,"image_alt":140,"kind":53,"categories":141,"app":146},"f5a8b1e0-8bf2-4879-808c-66449d6b83bf","Informational Alert","An inline alert box providing information about default business hours settings.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff5a8b1e0-8bf2-4879-808c-66449d6b83bf.png",1536,472,"Informational Alert from Fernand",[142],{"id":143,"title":144,"slug":145},235,"Tips","tips",{"slug":31,"title":30,"logo":33,"categories":147},[],{"uuid":149,"title":150,"description":151,"canonical_path":4,"image":152,"width":153,"height":154,"image_alt":155,"kind":53,"categories":156,"app":160},"33e24f7f-f07a-4314-8274-8e377b64956a","Message Composer","A message composer component with tabs for 'Reply' and 'Note', a text area with placeholder text, and a toolbar with formatting and attachment options, plus a 'Send' button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F33e24f7f-f07a-4314-8274-8e377b64956a.png",2106,595,"Message Composer from Fernand",[157],{"id":112,"title":158,"slug":159},"Textarea","input-textarea",{"slug":31,"title":30,"logo":33,"categories":161},[],{"uuid":163,"title":164,"description":165,"canonical_path":4,"image":166,"width":167,"height":168,"image_alt":169,"kind":53,"categories":170,"app":175},"07502f62-8deb-4ce9-9681-5c8e9c92d2cf","User Profile Header","A simple profile header displaying an avatar, name, and email address.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F07502f62-8deb-4ce9-9681-5c8e9c92d2cf.png",550,207,"User Profile Header from Fernand",[171],{"id":172,"title":173,"slug":174},169,"Avatar","avatar",{"slug":31,"title":30,"logo":33,"categories":176},[],{"uuid":178,"title":179,"description":180,"canonical_path":4,"image":181,"width":138,"height":182,"image_alt":183,"kind":53,"categories":184,"app":189},"38505351-13bb-44a6-bcf4-44e300408d11","Onboarding Checklist","A vertical list of onboarding tasks. The first task is marked as done, while the remaining tasks have call-to-action buttons to complete them.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F38505351-13bb-44a6-bcf4-44e300408d11.png",1106,"Onboarding Checklist from Fernand",[185],{"id":186,"title":187,"slug":188},227,"Stepper","stepper",{"slug":31,"title":30,"logo":33,"categories":190},[],{"uuid":192,"title":193,"description":194,"canonical_path":4,"image":195,"width":196,"height":197,"image_alt":198,"kind":53,"categories":199,"app":204},"e81c2567-30a8-4d68-be24-0c21fcbbc53e","Onboarding Banner","A full-width informational banner prompting the user to complete an onboarding step.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe81c2567-30a8-4d68-be24-0c21fcbbc53e.png",2942,324,"Onboarding Banner from Fernand",[200],{"id":201,"title":202,"slug":203},167,"Alert","alert",{"slug":31,"title":30,"logo":33,"categories":205},[],{"uuid":207,"title":208,"description":209,"canonical_path":4,"image":210,"width":211,"height":212,"image_alt":213,"kind":53,"categories":214,"app":219},"7826868f-d29c-4f78-86d4-72d5e5f5c58b","Meditating Postman Illustration","A flat-style vector illustration of a postman in a blue uniform meditating in a lotus position. Envelopes and email icons orbit around him.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7826868f-d29c-4f78-86d4-72d5e5f5c58b.png",849,792,"Meditating Postman Illustration from Fernand",[215],{"id":216,"title":217,"slug":218},278,"Illustration","illustration",{"slug":31,"title":30,"logo":33,"categories":220},[],[],[223,226,229,232,235],{"label":224,"to":225},"Fernand product screens","\u002Fexamples\u002Fapps\u002Ffernand\u002Fscreens",{"label":227,"to":228},"Fernand marketing pages","\u002Fexamples\u002Fapps\u002Ffernand\u002Fmarketing",{"label":230,"to":231},"Fernand user flows","\u002Fexamples\u002Fapps\u002Ffernand\u002Fflows",{"label":233,"to":234},"Customer Service app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcustomer-service",{"label":236,"to":237},"Email app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Femail",{"published_at":239,"updated_at":240},"2023-03-17T14:00:24.000Z","2026-09-13T13:02:39.000Z"]