[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fleapsome\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":189,"links":190,"dates":224},"\u002Fexamples\u002Fapps\u002Fleapsome\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Leapsome UI components examples - Nicelydone","Browse Leapsome UI component design examples. Preview individual interface elements and explore related component categories. People enablement platform","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcfeafd40-324c-4ee9-b17a-d3c99fb3575e.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},"Leapsome design examples","\u002Fexamples\u002Fapps\u002Fleapsome",{"label":23,"to":4},"Leapsome 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},"Leapsome","leapsome","People enablement platform","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fleapsome-0fe97911.png","https:\u002F\u002Fleapsome.com",[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,98,113,125,135,145,154,166,179],{"uuid":45,"title":46,"description":47,"canonical_path":4,"image":11,"width":48,"height":49,"image_alt":50,"kind":51,"categories":52,"app":57},"a537826f-a7d1-417d-b1ed-4333f8f79296","Gender Pay Distribution Chart","A horizontal bar chart displaying gender pay distribution across different departments and regions. It compares average, female, diverse, and male compensation.",1365,2085,"Gender Pay Distribution Chart from Leapsome","component",[53],{"id":54,"title":55,"slug":56},186,"Charts","charts",{"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},"8abd60e0-11ca-4cd0-a012-21d6dbc55c01","KPI row with donut charts","A row of three key performance indicators (KPIs), each featuring a donut chart, a primary metric, and a descriptive label. The metrics show progress or status, such as '19\u002F22' and '12'.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F61af377d-3189-41b5-8ae5-965d1bab1cc5.png",2292,555,"KPI row with donut charts from Leapsome",[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},"cc71190e-972a-4d2b-ae80-bb007831f710","Progress timeline","A vertical timeline showing the progress of a multi-step process. Each step includes a status icon, a title, a progress bar with a percentage, and a date.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F76b22a96-c69d-4bfe-be18-bedd623786e7.png",2585,1156,"Progress timeline from Leapsome",[80],{"id":81,"title":82,"slug":83},249,"Timeline & history","timeline-history",{"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":96},"05ad7e60-4668-4641-ad01-7f256cf5ff37","Budget distribution chart","A donut chart showing the distribution of a salary budget, with a total amount and a breakdown of distributed and remaining funds.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe09fd6a1-8d8f-4d8d-b749-c0f25524cf98.png",789,386,"Budget distribution chart from Leapsome",[95],{"id":54,"title":55,"slug":56},{"slug":30,"title":29,"logo":32,"categories":97},[],{"uuid":99,"title":100,"description":101,"canonical_path":4,"image":102,"width":103,"height":104,"image_alt":105,"kind":51,"categories":106,"app":111},"789ee465-6cc8-4024-8efa-c5993cc607e9","Learning path timeline","A vertical timeline showing a user's progress through a learning path. It includes a summary sentence at the top, followed by a series of steps with icons indicating completion status (completed, current, locked) and corresponding descriptive cards.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8bb4b1b9-4041-4b48-a949-edb9f8643587.png",1360,1515,"Learning path timeline from Leapsome",[107],{"id":108,"title":109,"slug":110},213,"Progress indicator","progress-indicator",{"slug":30,"title":29,"logo":32,"categories":112},[],{"uuid":114,"title":115,"description":116,"canonical_path":4,"image":117,"width":118,"height":119,"image_alt":120,"kind":51,"categories":121,"app":123},"fd08dcc1-7b67-4920-8554-d2eaa8e01c78","Leapsome UI component","A modal with a list of steps","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F300e63d6-70ca-4ac8-b93a-ee10f84d39ac.png",2488,924,"UI component from Leapsome",[122],{"id":81,"title":82,"slug":83},{"slug":30,"title":29,"logo":32,"categories":124},[],{"uuid":126,"title":115,"description":127,"canonical_path":4,"image":128,"width":129,"height":130,"image_alt":120,"kind":51,"categories":131,"app":133},"1473d2a9-28c6-4dd1-a3c1-31e8fc889b0d","A bar chart showing employee count over time.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F21e1e17f-e4a0-4101-89ef-38cff733dabc.png",1989,1098,[132],{"id":54,"title":55,"slug":56},{"slug":30,"title":29,"logo":32,"categories":134},[],{"uuid":136,"title":115,"description":137,"canonical_path":4,"image":138,"width":139,"height":140,"image_alt":120,"kind":51,"categories":141,"app":143},"302c0048-b361-4847-8e76-6b89d9a85df1","A visualization of employee feedback with a bubble chart.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5ee99cbb-d781-49b9-a8e0-cac1b31f2591.png",2588,1314,[142],{"id":54,"title":55,"slug":56},{"slug":30,"title":29,"logo":32,"categories":144},[],{"uuid":146,"title":115,"description":147,"canonical_path":4,"image":148,"width":139,"height":149,"image_alt":120,"kind":51,"categories":150,"app":152},"3601ae27-2a59-4035-9d71-b562ba16457f","A table displaying survey results across different categories and teams.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9f709b62-75dc-495f-bd6a-9f68fd3bdb28.png",1306,[151],{"id":54,"title":55,"slug":56},{"slug":30,"title":29,"logo":32,"categories":153},[],{"uuid":155,"title":115,"description":156,"canonical_path":4,"image":157,"width":139,"height":158,"image_alt":120,"kind":51,"categories":159,"app":164},"27d3521c-fc52-4cc1-bba5-32cff2bb7741","A card displaying a statement with a progress bar and score.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0047cae2-8288-4272-b32a-08577f30e1f1.png",436,[160],{"id":161,"title":162,"slug":163},174,"Card","card",{"slug":30,"title":29,"logo":32,"categories":165},[],{"uuid":167,"title":115,"description":168,"canonical_path":4,"image":169,"width":170,"height":171,"image_alt":120,"kind":51,"categories":172,"app":177},"e0c21718-1fa4-4064-9034-c9473023ffe5","A survey interface with multiple tabs.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F617ba636-053f-49de-965e-02e964cb20f1.png",1457,416,[173],{"id":174,"title":175,"slug":176},233,"Tabs","tabs",{"slug":30,"title":29,"logo":32,"categories":178},[],{"uuid":180,"title":115,"description":181,"canonical_path":4,"image":182,"width":183,"height":184,"image_alt":120,"kind":51,"categories":185,"app":187},"6b2a2bc9-b229-4e2e-bd1a-0180b5b6ea0d","A survey result visualization.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc35b6439-3417-4feb-b61a-89513380c77b.png",1140,785,[186],{"id":54,"title":55,"slug":56},{"slug":30,"title":29,"logo":32,"categories":188},[],[],[191,194,197,200,203,206,208,212,216,220],{"label":192,"to":193},"Leapsome product screens","\u002Fexamples\u002Fapps\u002Fleapsome\u002Fscreens",{"label":195,"to":196},"Leapsome marketing pages","\u002Fexamples\u002Fapps\u002Fleapsome\u002Fmarketing",{"label":198,"to":199},"Leapsome user flows","\u002Fexamples\u002Fapps\u002Fleapsome\u002Fflows",{"label":201,"to":202},"Human resources app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fhuman-resources",{"label":204,"to":205},"Recruiting app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Frecruiting",{"label":207,"to":18},"All SaaS app examples",{"label":209,"to":210,"description":211},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":213,"to":214,"description":215},"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":217,"to":218,"description":219},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":221,"to":222,"description":223},"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":225,"updated_at":226},"2023-08-07T08:47:49.000Z","2026-09-16T12:10:03.000Z"]