[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fhireproof\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":218,"links":219,"dates":253},"\u002Fexamples\u002Fapps\u002Fhireproof\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Hireproof UI components examples - Nicelydone","Browse Hireproof UI component design examples. Preview individual interface elements and explore related component categories. Your new interviewing superpower","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F37ef73e3-555e-4e7f-941f-3d34ed559f2e.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},"Hireproof design examples","\u002Fexamples\u002Fapps\u002Fhireproof",{"label":23,"to":4},"Hireproof 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":30,"categories":34},"Hireproof","hireproof","Your new interviewing superpower","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fhireproof-793a0355.png","https:\u002F\u002Fhireproof.io",[35,39],{"id":36,"title":37,"slug":38},10,"Human resources","human-resources",{"id":40,"title":41,"slug":42},64,"Recruiting","recruiting",[44,59,71,86,101,116,128,143,158,173,188,203],{"uuid":45,"title":46,"description":47,"canonical_path":4,"image":11,"width":48,"height":49,"image_alt":50,"kind":51,"categories":52,"app":57},"b2b3e046-4658-48db-b391-0658668bc1f1","Dark theme toggle","A settings row with a title, description, and a toggle switch to enable or disable the dark theme.",1936,460,"Dark theme toggle from Hireproof","component",[53],{"id":54,"title":55,"slug":56},256,"Theme settings","theme-settings",{"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":69},"ca9a347d-7ffa-4b06-bafe-c5ca22319c7f","Hireproof UI component","A toggle switch for dark mode","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd2be2356-11ea-4871-a663-26a144706026.png",563,176,"UI component from Hireproof",[68],{"id":54,"title":55,"slug":56},{"slug":30,"title":29,"logo":32,"categories":70},[],{"uuid":72,"title":73,"description":74,"canonical_path":4,"image":75,"width":76,"height":77,"image_alt":78,"kind":51,"categories":79,"app":84},"ec423daf-b2e9-48a3-884b-f6a8e3e4b4fe","User profile dropdown menu","A dropdown menu triggered by an email address pill, containing options for upgrading, account settings, help, dark mode toggle, and logout.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe4302f2e-e42f-4a65-89b5-463670c5f95c.png",702,815,"User profile dropdown menu from Hireproof",[80],{"id":81,"title":82,"slug":83},190,"Dropdown menu","dropdown-menu",{"slug":30,"title":29,"logo":32,"categories":85},[],{"uuid":87,"title":88,"description":89,"canonical_path":4,"image":90,"width":91,"height":92,"image_alt":93,"kind":51,"categories":94,"app":99},"a446c4c2-1d86-4c15-b4d0-23b18a0bee2c","Filter dropdown","A dropdown menu for filtering candidates by status, showing options for Active, Archived, and All with radio button selection.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4868d829-008c-4a67-81a5-20ef726dd5ab.png",828,443,"Filter dropdown from Hireproof",[95],{"id":96,"title":97,"slug":98},179,"Checkbox & radio","checkbox-radio",{"slug":30,"title":29,"logo":32,"categories":100},[],{"uuid":102,"title":103,"description":104,"canonical_path":4,"image":105,"width":106,"height":107,"image_alt":108,"kind":51,"categories":109,"app":114},"6c938db6-0acf-4e2d-9b27-abf5007cb170","Segmented Progress Indicator","A segmented progress bar showing 100% completion with a label and a dropdown chevron.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6a65b528-b17d-4359-97cd-18d97f75433b.png",385,173,"Segmented Progress Indicator from Hireproof",[110],{"id":111,"title":112,"slug":113},213,"Progress indicator","progress-indicator",{"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":126},"eb5b174e-fc65-4a9c-8c96-3999507e9e89","Segmented progress bar","A horizontal progress indicator split into three equal segments. The middle segment is highlighted with a darker color, indicating the current step or progress.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd923c30d-7abf-4931-bb97-ba83cadac16c.png",1264,284,"Segmented progress bar from Hireproof",[125],{"id":111,"title":112,"slug":113},{"slug":30,"title":29,"logo":32,"categories":127},[],{"uuid":129,"title":130,"description":131,"canonical_path":4,"image":132,"width":133,"height":134,"image_alt":135,"kind":51,"categories":136,"app":141},"b9664e96-5494-4905-8af4-87723549dbe9","Success Toast Notification","A toast notification confirming a successful action, featuring a success icon, a title, a descriptive message, and a close button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9b315c8f-34e8-4629-bc44-5b7bcf9119ec.png",1077,469,"Success Toast Notification from Hireproof",[137],{"id":138,"title":139,"slug":140},247,"Notification Toast","notification-element",{"slug":30,"title":29,"logo":32,"categories":142},[],{"uuid":144,"title":145,"description":146,"canonical_path":4,"image":147,"width":148,"height":149,"image_alt":150,"kind":51,"categories":151,"app":156},"f7191598-4332-4c6b-9498-e74ab7349e8f","Upgrade prompt card","A card component displaying a quota limit message and an upgrade call-to-action. It includes a disabled 'Create new' button, indicating the user cannot perform the primary action until they upgrade.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F10cbeb5f-0000-4980-a5de-72b7213be4c2.png",656,600,"Upgrade prompt card from Hireproof",[152],{"id":153,"title":154,"slug":155},255,"Upgrade your plan","upgrade-your-plan",{"slug":30,"title":29,"logo":32,"categories":157},[],{"uuid":159,"title":160,"description":161,"canonical_path":4,"image":162,"width":163,"height":164,"image_alt":165,"kind":51,"categories":166,"app":171},"338b9d84-d143-42f6-8434-afadf815197c","Interview step configuration card","A card component used to configure a specific step in an interview process. It includes a title, description, a toggle switch to enable\u002Fdisable the step, a text area for instructions, and an input field for estimated duration.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9dddc693-9476-4d41-8228-889733ff960d.png",2024,781,"Interview step configuration card from Hireproof",[167],{"id":168,"title":169,"slug":170},236,"Toggle\u002FSwitch","toggle-switch",{"slug":30,"title":29,"logo":32,"categories":172},[],{"uuid":174,"title":175,"description":176,"canonical_path":4,"image":177,"width":178,"height":179,"image_alt":180,"kind":51,"categories":181,"app":186},"7bbca06b-9e6d-4168-8dec-071036ff8d54","Combobox with create option","A combobox input field for selecting a skill, showing an active dropdown menu with an option to add a new skill based on the typed text.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fccea3561-c231-4187-bc37-3bfdd6956f8b.png",1110,494,"Combobox with create option from Hireproof",[182],{"id":183,"title":184,"slug":185},204,"Input select","input-select",{"slug":30,"title":29,"logo":32,"categories":187},[],{"uuid":189,"title":190,"description":191,"canonical_path":4,"image":192,"width":193,"height":194,"image_alt":195,"kind":51,"categories":196,"app":201},"b2bb918b-b3d1-4085-ad68-37f733d301ae","Interview Template Card","A card displaying details for an interview template, including duration, number of questions, and evaluated skills, with actions to add, preview, or duplicate.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa3c9b40d-899a-43ea-a356-488e22d3f467.png",684,544,"Interview Template Card from Hireproof",[197],{"id":198,"title":199,"slug":200},174,"Card","card",{"slug":30,"title":29,"logo":32,"categories":202},[],{"uuid":204,"title":205,"description":206,"canonical_path":4,"image":207,"width":208,"height":209,"image_alt":210,"kind":51,"categories":211,"app":216},"2e28db91-792d-4406-ab1b-a148cdab3829","Onboarding checklist accordion","An onboarding checklist presented as an accordion. The first step is completed, and the second step is expanded, showing a description and a primary action button. A progress indicator sits above the accordion.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0898851b-2911-45c1-8218-f4d491ee54d8.png",733,1146,"Onboarding checklist accordion from Hireproof",[212],{"id":213,"title":214,"slug":215},168,"Accordion","accordion",{"slug":30,"title":29,"logo":32,"categories":217},[],[],[220,223,226,229,232,235,237,241,245,249],{"label":221,"to":222},"Hireproof product screens","\u002Fexamples\u002Fapps\u002Fhireproof\u002Fscreens",{"label":224,"to":225},"Hireproof marketing pages","\u002Fexamples\u002Fapps\u002Fhireproof\u002Fmarketing",{"label":227,"to":228},"Hireproof user flows","\u002Fexamples\u002Fapps\u002Fhireproof\u002Fflows",{"label":230,"to":231},"Human resources app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fhuman-resources",{"label":233,"to":234},"Recruiting app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Frecruiting",{"label":236,"to":18},"All SaaS app examples",{"label":238,"to":239,"description":240},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":242,"to":243,"description":244},"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":246,"to":247,"description":248},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":250,"to":251,"description":252},"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":254,"updated_at":255},"2023-06-19T19:33:00.000Z","2026-09-13T13:02:39.000Z"]