[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fstandards\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":41,"showcases":204,"links":205,"dates":236},"\u002Fexamples\u002Fapps\u002Fstandards\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Standards UI components examples - Nicelydone","Browse Standards UI component design examples. Preview individual interface elements and explore related component categories. Online brand guidelines for…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd5cedc5b-85f4-4922-a0e7-89f208accdb9.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},"Standards design examples","\u002Fexamples\u002Fapps\u002Fstandards",{"label":23,"to":4},"Standards UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Standards UI component design examples. Preview individual interface elements and explore related component categories. Online brand guidelines for design today for design today",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Standards","standards","Online brand guidelines for design today for design today","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fstandards-7b4147c4.png","https:\u002F\u002Fstandards.site","standards_site",[37],{"id":38,"title":39,"slug":40},8,"Design","design",[42,57,71,86,101,113,128,141,156,170,180,194],{"uuid":43,"title":44,"description":45,"canonical_path":4,"image":11,"width":46,"height":47,"image_alt":48,"kind":49,"categories":50,"app":55},"6766ea8b-147f-4715-9457-bc86050ba465","URL Input Field","A dark-themed text input field displaying a base URL and an editable slug.",808,228,"URL Input Field from Standards","component",[51],{"id":52,"title":53,"slug":54},201,"Input text","input-text",{"slug":31,"title":30,"logo":33,"categories":56},[],{"uuid":58,"title":59,"description":60,"canonical_path":4,"image":61,"width":46,"height":62,"image_alt":63,"kind":49,"categories":64,"app":69},"cb710467-440a-4ade-91da-ff163e478490","Privacy toggle","A segmented control for selecting project privacy, with options for Private and Public.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2aeab9de-05f9-4b25-a38d-2907bc63b0ba.png",302,"Privacy toggle from Standards",[65],{"id":66,"title":67,"slug":68},218,"Segmented control","segmented-control",{"slug":31,"title":30,"logo":33,"categories":70},[],{"uuid":72,"title":73,"description":74,"canonical_path":4,"image":75,"width":76,"height":77,"image_alt":78,"kind":49,"categories":79,"app":84},"3e3c0ec5-cf6d-4623-9b32-83138c10bed8","Color picker panel","A dark-themed color picker panel with a gradient area, hue and opacity sliders, hex input, and a list of saved color swatches.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd523e5d1-629b-48e0-837f-a3f75d2fc182.png",599,1086,"Color picker panel from Standards",[80],{"id":81,"title":82,"slug":83},183,"Color picker","color-picker",{"slug":31,"title":30,"logo":33,"categories":85},[],{"uuid":87,"title":88,"description":89,"canonical_path":4,"image":90,"width":91,"height":92,"image_alt":93,"kind":49,"categories":94,"app":99},"fd1d70d6-e66d-403a-af0f-cbfcb0ad5785","Standards UI component","A modal with a slider to control sizing","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe9b6b6ad-357b-4164-a7f8-08486c3d213e.png",283,226,"UI component from Standards",[95],{"id":96,"title":97,"slug":98},223,"Slider","slider",{"slug":31,"title":30,"logo":33,"categories":100},[],{"uuid":102,"title":103,"description":104,"canonical_path":4,"image":105,"width":106,"height":107,"image_alt":108,"kind":49,"categories":109,"app":111},"baa3d38d-4794-4df5-85e5-a8ec3a319d21","Background theme toggle","A segmented control to toggle the background theme between Dark and Light modes.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F722ed73f-49d4-4c0f-905d-37a7fb0f5198.png",528,229,"Background theme toggle from Standards",[110],{"id":66,"title":67,"slug":68},{"slug":31,"title":30,"logo":33,"categories":112},[],{"uuid":114,"title":115,"description":116,"canonical_path":4,"image":117,"width":118,"height":119,"image_alt":120,"kind":49,"categories":121,"app":126},"84f1f326-9c12-4ecc-a722-7f852fb62e89","Design properties panel","A dark-themed sidebar panel for editing layout properties like sizing, spacing, fill, and stroke.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6eaa8a29-a3a0-4923-9de2-91454d594f4e.png",478,1738,"Design properties panel from Standards",[122],{"id":123,"title":124,"slug":125},246,"Toolbox","toolbox",{"slug":31,"title":30,"logo":33,"categories":127},[],{"uuid":129,"title":130,"description":131,"canonical_path":4,"image":132,"width":118,"height":119,"image_alt":133,"kind":49,"categories":134,"app":139},"b1c3ba84-77b3-4a1d-861c-ed0077760532","Sidebar navigation","A dark-themed vertical sidebar navigation menu with sections for Navigation, Pages, Contents, and support links.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F628dfb50-0ade-40fd-b7ff-d353bad50c87.png","Sidebar navigation from Standards",[135],{"id":136,"title":137,"slug":138},209,"Vertical navigation","vertical-navigation",{"slug":31,"title":30,"logo":33,"categories":140},[],{"uuid":142,"title":143,"description":144,"canonical_path":4,"image":145,"width":146,"height":147,"image_alt":148,"kind":49,"categories":149,"app":154},"5c39002b-79b4-4f02-b024-9d2adc1491bf","Editor Topbar","A dark-themed top navigation bar for a design editor, featuring a logo, tool selection, view toggles, and a publish button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa6a7a977-4e8e-4586-a159-8358da74c605.png",3022,80,"Editor Topbar from Standards",[150],{"id":151,"title":152,"slug":153},240,"Horizontal navigation","horizontal-navigation",{"slug":31,"title":30,"logo":33,"categories":155},[],{"uuid":157,"title":158,"description":159,"canonical_path":4,"image":160,"width":106,"height":161,"image_alt":162,"kind":49,"categories":163,"app":168},"a19f1867-d807-47cd-badf-275ec77974f6","Responsive scaling toggle","A toggle switch with a label for enabling or disabling responsive scaling.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8dffeaac-e73e-45a4-baeb-e1487d688467.png",153,"Responsive scaling toggle from Standards",[164],{"id":165,"title":166,"slug":167},236,"Toggle\u002FSwitch","toggle-switch",{"slug":31,"title":30,"logo":33,"categories":169},[],{"uuid":171,"title":73,"description":172,"canonical_path":4,"image":173,"width":174,"height":175,"image_alt":78,"kind":49,"categories":176,"app":178},"147d367b-2649-4089-be45-d6df131be2f8","A dark-themed color picker interface featuring a saturation\u002Fbrightness area, hue and opacity sliders, and hex\u002Fopacity input fields.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F95a51adf-7e3e-479f-a41c-fde66c4cded3.png",558,554,[177],{"id":81,"title":82,"slug":83},{"slug":31,"title":30,"logo":33,"categories":179},[],{"uuid":181,"title":182,"description":183,"canonical_path":4,"image":184,"width":106,"height":185,"image_alt":186,"kind":49,"categories":187,"app":192},"9593bd85-2a04-4e2f-88c8-e6f6034a1a5c","Vertical Stepper","A vertical stepper component showing progress through a project setup flow. Completed steps have green checkmarks, the current step is white, and future steps are muted. A blue Finish button sits at the bottom.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe0c0e8ac-a578-4d40-984e-60b1cc7c6cca.png",614,"Vertical Stepper from Standards",[188],{"id":189,"title":190,"slug":191},227,"Stepper","stepper",{"slug":31,"title":30,"logo":33,"categories":193},[],{"uuid":195,"title":196,"description":197,"canonical_path":4,"image":198,"width":106,"height":185,"image_alt":199,"kind":49,"categories":200,"app":202},"bd62a629-3b16-4d6e-ac92-8451789e0e9f","Onboarding Stepper","A vertical stepper showing the stages of a project setup wizard, with the first step active and subsequent steps muted. A 'Skip Setup' button is provided at the bottom.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe1505ca7-cab2-4f58-8b93-89a5c90f132b.png","Onboarding Stepper from Standards",[201],{"id":189,"title":190,"slug":191},{"slug":31,"title":30,"logo":33,"categories":203},[],[],[206,209,212,215,218,220,224,228,232],{"label":207,"to":208},"Standards product screens","\u002Fexamples\u002Fapps\u002Fstandards\u002Fscreens",{"label":210,"to":211},"Standards marketing pages","\u002Fexamples\u002Fapps\u002Fstandards\u002Fmarketing",{"label":213,"to":214},"Standards user flows","\u002Fexamples\u002Fapps\u002Fstandards\u002Fflows",{"label":216,"to":217},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":219,"to":18},"All SaaS app examples",{"label":221,"to":222,"description":223},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":225,"to":226,"description":227},"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":229,"to":230,"description":231},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":233,"to":234,"description":235},"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":237,"updated_at":238},"2023-05-30T09:21:15.000Z","2026-09-13T13:02:39.000Z"]