[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fworkos\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":47,"showcases":221,"links":222,"dates":259},"\u002Fexamples\u002Fapps\u002Fworkos\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"WorkOs UI components examples - Nicelydone","Browse WorkOs UI component design examples. Preview individual interface elements and explore related component categories. Your app, enterprise-ready","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffd6a0b13-da63-43a3-b7b3-9b7738c34bd4.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},"WorkOs design examples","\u002Fexamples\u002Fapps\u002Fworkos",{"label":23,"to":4},"WorkOs 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},"WorkOs","workos","Your app, enterprise-ready","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fworkos-b22ba394.png","https:\u002F\u002Fworkos.com",[35,39,43],{"id":36,"title":37,"slug":38},37,"Developer APIs","developer-apis",{"id":40,"title":41,"slug":42},48,"Developer Tools","developer-tools",{"id":44,"title":45,"slug":46},78,"Security","security",[48,63,78,93,105,116,131,146,161,176,191,206],{"uuid":49,"title":50,"description":51,"canonical_path":4,"image":11,"width":52,"height":53,"image_alt":54,"kind":55,"categories":56,"app":61},"da1febf3-5cc3-4566-9ab4-b9e74082f90e","Feature Bento Grid","A bento grid layout highlighting key features of a Single Sign-On product. It includes a prominent headline, a primary call-to-action button, and a grid of cards detailing specific capabilities like SAML support and identity provider integrations.",2656,1670,"Feature Bento Grid from WorkOs","component",[57],{"id":58,"title":59,"slug":60},298,"Bento box","bento-grid",{"slug":30,"title":29,"logo":32,"categories":62},[],{"uuid":64,"title":65,"description":66,"canonical_path":4,"image":67,"width":68,"height":69,"image_alt":70,"kind":55,"categories":71,"app":76},"36003079-c0a5-4030-98c0-f70bb144058a","WorkOs UI component","An error message modal","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdbbf77c2-954d-4677-aaa7-cc901adcb707.png",1276,360,"UI component from WorkOs",[72],{"id":73,"title":74,"slug":75},244,"Message","message",{"slug":30,"title":29,"logo":32,"categories":77},[],{"uuid":79,"title":80,"description":81,"canonical_path":4,"image":82,"width":83,"height":84,"image_alt":85,"kind":55,"categories":86,"app":91},"9323111b-6887-4dd0-9c40-65a69c023356","Status Badge","A pill-shaped badge indicating an 'Enabled' status.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe250f520-e249-4753-bfc9-9b3930034fcb.png",255,168,"Status Badge from WorkOs",[87],{"id":88,"title":89,"slug":90},260,"Badge","badge",{"slug":30,"title":29,"logo":32,"categories":92},[],{"uuid":94,"title":95,"description":96,"canonical_path":4,"image":97,"width":98,"height":99,"image_alt":100,"kind":55,"categories":101,"app":103},"eaa14abb-3b99-4c3d-b56a-da3abad64326","Warning Alert","A full-width warning alert banner containing a single line of text instructing the user to add the ACS URL to complete the connection.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd05a8604-cb1b-4a91-9343-e676a4647f03.png",2385,356,"Warning Alert from WorkOs",[102],{"id":73,"title":74,"slug":75},{"slug":30,"title":29,"logo":32,"categories":104},[],{"uuid":106,"title":107,"description":108,"canonical_path":4,"image":109,"width":110,"height":84,"image_alt":111,"kind":55,"categories":112,"app":114},"d8258ea0-ea7f-4e09-919c-8f6edfa5b22c","Inactive Status Badge","A pill-shaped badge indicating an 'Inactive' status, featuring yellow text on a dark olive background.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1a318a5c-eb63-4455-b630-7219dfd2be3a.png",252,"Inactive Status Badge from WorkOs",[113],{"id":88,"title":89,"slug":90},{"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":55,"categories":124,"app":129},"43c16166-f1a4-4ce3-9693-a7497e2476d3","Sidebar Navigation","A dark-themed vertical sidebar navigation menu. It features an environment selector dropdown at the top, followed by a list of navigation links with icons. The 'Organizations' link is currently active.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe3811fa2-9043-4c63-bab2-9483e0bd6394.png",590,1802,"Sidebar Navigation from WorkOs",[125],{"id":126,"title":127,"slug":128},209,"Vertical navigation","vertical-navigation",{"slug":30,"title":29,"logo":32,"categories":130},[],{"uuid":132,"title":133,"description":134,"canonical_path":4,"image":135,"width":136,"height":137,"image_alt":138,"kind":55,"categories":139,"app":144},"513c96d3-1a51-4dfb-90b8-90e27453628e","Breadcrumb Navigation","A breadcrumb trail showing the hierarchical path to the current page, with clickable links for parent levels and plain text for the current level.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd5cef449-d669-4dcb-ba64-fff40a4c66d3.png",676,156,"Breadcrumb Navigation from WorkOs",[140],{"id":141,"title":142,"slug":143},177,"Breadcrumb","breadcrumb",{"slug":30,"title":29,"logo":32,"categories":145},[],{"uuid":147,"title":148,"description":149,"canonical_path":4,"image":150,"width":151,"height":152,"image_alt":153,"kind":55,"categories":154,"app":159},"792719cf-68a4-487a-a78d-354f11ddfe61","MFA Passcode Input","A 6-digit one-time passcode (OTP) input field with instructional text above and below, and a submit arrow button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F774154fe-7f04-4db6-a5e2-139918410a65.png",948,386,"MFA Passcode Input from WorkOs",[155],{"id":156,"title":157,"slug":158},288,"Input code","input-code",{"slug":30,"title":29,"logo":32,"categories":160},[],{"uuid":162,"title":163,"description":164,"canonical_path":4,"image":165,"width":166,"height":167,"image_alt":168,"kind":55,"categories":169,"app":174},"45fbd7a6-ad25-43fa-9d00-a25d01718c9f","Value Proposition List","A list of product benefits with a headline and checkmark icons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa7976e03-ca06-4fec-8bf1-dc24c328a13e.png",1163,921,"Value Proposition List from WorkOs",[170],{"id":171,"title":172,"slug":173},172,"Benefit List","benefit-list",{"slug":30,"title":29,"logo":32,"categories":175},[],{"uuid":177,"title":178,"description":179,"canonical_path":4,"image":180,"width":181,"height":182,"image_alt":183,"kind":55,"categories":184,"app":189},"453fc657-fe12-40d4-80de-68c219429b1c","FAQ Section","A frequently asked questions section featuring a list of collapsible questions and a final card prompting users to schedule a call if they have more questions.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4296e64a-133c-48bd-8326-2587adb50a83.png",1808,2640,"FAQ Section from WorkOs",[185],{"id":186,"title":187,"slug":188},189,"FAQ","faq",{"slug":30,"title":29,"logo":32,"categories":190},[],{"uuid":192,"title":193,"description":194,"canonical_path":4,"image":195,"width":196,"height":197,"image_alt":198,"kind":55,"categories":199,"app":204},"fec4d7e3-2e39-4da6-b9f8-ac837d127faf","Feature toggle card","A card component displaying a feature category with a toggle switch and a list of included features.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4f989c09-f4b9-42e4-9749-3f08e10f1a35.png",651,488,"Feature toggle card from WorkOs",[200],{"id":201,"title":202,"slug":203},236,"Toggle\u002FSwitch","toggle-switch",{"slug":30,"title":29,"logo":32,"categories":205},[],{"uuid":207,"title":208,"description":209,"canonical_path":4,"image":210,"width":211,"height":212,"image_alt":213,"kind":55,"categories":214,"app":219},"ed7976aa-58b0-4d18-97f7-d71c8805aa5a","Pricing slider","A horizontal slider control used to select a numeric value, featuring a label, an info icon, and a track with tick marks and numeric labels at intervals.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff170446f-1ee8-4152-9b31-883e9a8a7789.png",1951,401,"Pricing slider from WorkOs",[215],{"id":216,"title":217,"slug":218},223,"Slider","slider",{"slug":30,"title":29,"logo":32,"categories":220},[],[],[223,226,229,232,235,238,241,243,247,251,255],{"label":224,"to":225},"WorkOs product screens","\u002Fexamples\u002Fapps\u002Fworkos\u002Fscreens",{"label":227,"to":228},"WorkOs marketing pages","\u002Fexamples\u002Fapps\u002Fworkos\u002Fmarketing",{"label":230,"to":231},"WorkOs user flows","\u002Fexamples\u002Fapps\u002Fworkos\u002Fflows",{"label":233,"to":234},"Developer APIs app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-apis",{"label":236,"to":237},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":239,"to":240},"Security app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fsecurity",{"label":242,"to":18},"All SaaS app examples",{"label":244,"to":245,"description":246},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":248,"to":249,"description":250},"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":252,"to":253,"description":254},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":256,"to":257,"description":258},"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":260,"updated_at":261},"2021-03-17T19:26:55.000Z","2026-09-13T13:02:39.000Z"]