[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fcycle\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":209,"links":210,"dates":244},"\u002Fexamples\u002Fapps\u002Fcycle\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Cycle UI components examples - Nicelydone","Browse Cycle UI component design examples. Preview individual interface elements and explore related component categories. Turn product feedback into…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa0388d12-a1c3-4780-84e9-de04bfadf3ac.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},"Cycle design examples","\u002Fexamples\u002Fapps\u002Fcycle",{"label":23,"to":4},"Cycle UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Cycle UI component design examples. Preview individual interface elements and explore related component categories. Turn product feedback into customer love",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Cycle","cycle","Turn product feedback into customer love","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcycle-db354499.png","https:\u002F\u002Fwww.cycle.app","cycleproduct",[37,41],{"id":38,"title":39,"slug":40},86,"Product management","product-management",{"id":42,"title":43,"slug":44},35,"Feedback","feedback",[46,61,76,91,106,117,132,144,156,168,183,194],{"uuid":47,"title":48,"description":49,"canonical_path":4,"image":11,"width":50,"height":51,"image_alt":52,"kind":53,"categories":54,"app":59},"a0388d12-a1c3-4780-84e9-de04bfadf3ac","Theme selector","A radio group presenting three visual theme options (Nightfall, Eclipse, Sunrise) using thumbnail previews. The Sunrise option is currently selected, indicated by a blue border and a checkmark badge.",1364,681,"Theme selector from Cycle","component",[55],{"id":56,"title":57,"slug":58},256,"Theme settings","theme-settings",{"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},"89bcb456-9b91-4484-af3e-985e8f0520b1","Avatar Upload Field","A form field section allowing users to view their current avatar and upload a new one.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F89bcb456-9b91-4484-af3e-985e8f0520b1.png",516,313,"Avatar Upload Field from Cycle",[70],{"id":71,"title":72,"slug":73},188,"File upload input","file-upload-input",{"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},"a181ccc4-15f8-4d73-9678-7afc457b93f5","Color picker popover","A popover displaying a grid of color swatches for selection. One swatch is currently selected, indicated by a checkmark.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa181ccc4-15f8-4d73-9678-7afc457b93f5.png",444,296,"Color picker popover from Cycle",[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},"d9c04ece-4cb2-4034-8d03-150cca7ab1f2","Avatar with label","A circular initial avatar paired with a text label, representing a company or user entity.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd9c04ece-4cb2-4034-8d03-150cca7ab1f2.png",259,168,"Avatar with label from Cycle",[100],{"id":101,"title":102,"slug":103},169,"Avatar","avatar",{"slug":31,"title":30,"logo":33,"categories":105},[],{"uuid":107,"title":108,"description":109,"canonical_path":4,"image":110,"width":111,"height":97,"image_alt":112,"kind":53,"categories":113,"app":115},"a85d47de-caf5-46f5-83fa-fde4fe2199d1","Company Avatar and Name","A circular logo avatar paired with the company name 'Cycle App'.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa85d47de-caf5-46f5-83fa-fde4fe2199d1.png",318,"Company Avatar and Name from Cycle",[114],{"id":101,"title":102,"slug":103},{"slug":31,"title":30,"logo":33,"categories":116},[],{"uuid":118,"title":119,"description":120,"canonical_path":4,"image":121,"width":122,"height":123,"image_alt":124,"kind":53,"categories":125,"app":130},"033ab7b9-c8ec-4ae2-9b3e-966b9f327be8","Tabs with counts","A horizontal tab navigation component showing two tabs, 'People' and 'Companies', each with a numerical count badge. The 'Companies' tab is currently active, indicated by a green underline.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F033ab7b9-c8ec-4ae2-9b3e-966b9f327be8.png",595,208,"Tabs with counts from Cycle",[126],{"id":127,"title":128,"slug":129},233,"Tabs","tabs",{"slug":31,"title":30,"logo":33,"categories":131},[],{"uuid":133,"title":134,"description":135,"canonical_path":4,"image":136,"width":137,"height":138,"image_alt":139,"kind":53,"categories":140,"app":142},"b4dee829-8279-440d-a1c3-fc4895f78529","User identity row","A horizontal layout displaying a placeholder avatar next to an email address.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb4dee829-8279-440d-a1c3-fc4895f78529.png",467,176,"User identity row from Cycle",[141],{"id":101,"title":102,"slug":103},{"slug":31,"title":30,"logo":33,"categories":143},[],{"uuid":145,"title":146,"description":147,"canonical_path":4,"image":148,"width":149,"height":150,"image_alt":151,"kind":53,"categories":152,"app":154},"f1cab65b-6f56-4f49-b9c4-fdb9176dd1a2","Cycle UI component","User profile card","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff1cab65b-6f56-4f49-b9c4-fdb9176dd1a2.png",560,203,"UI component from Cycle",[153],{"id":101,"title":102,"slug":103},{"slug":31,"title":30,"logo":33,"categories":155},[],{"uuid":157,"title":158,"description":159,"canonical_path":4,"image":160,"width":161,"height":162,"image_alt":163,"kind":53,"categories":164,"app":166},"d2833486-a3ce-48ce-9639-af0fe041d74e","User profile summary","A circular avatar with a letter initial and a status indicator, stacked above an email address and a signup status message.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd2833486-a3ce-48ce-9639-af0fe041d74e.png",330,356,"User profile summary from Cycle",[165],{"id":101,"title":102,"slug":103},{"slug":31,"title":30,"logo":33,"categories":167},[],{"uuid":169,"title":170,"description":171,"canonical_path":4,"image":172,"width":173,"height":174,"image_alt":175,"kind":53,"categories":176,"app":181},"e0bac63b-f285-44c4-8af7-e4aea8c5267a","Filter builder","A filter builder component showing two active filter rules and an option to add more. Each rule consists of a property, an operator, and a value, displayed as inline chips within a gray container.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe0bac63b-f285-44c4-8af7-e4aea8c5267a.png",944,389,"Filter builder from Cycle",[177],{"id":178,"title":179,"slug":180},225,"Sorting & filtering","sorting-filtering",{"slug":31,"title":30,"logo":33,"categories":182},[],{"uuid":184,"title":185,"description":186,"canonical_path":4,"image":187,"width":173,"height":188,"image_alt":189,"kind":53,"categories":190,"app":192},"cabb3b38-cb55-40e0-8a00-3b25f8e508d9","Filter builder row","A single filter rule row within a filter builder, showing an active condition for 'Assignee is Select users' with an option to add more filters.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcabb3b38-cb55-40e0-8a00-3b25f8e508d9.png",301,"Filter builder row from Cycle",[191],{"id":178,"title":179,"slug":180},{"slug":31,"title":30,"logo":33,"categories":193},[],{"uuid":195,"title":196,"description":197,"canonical_path":4,"image":198,"width":199,"height":200,"image_alt":201,"kind":53,"categories":202,"app":207},"e4dca740-5bcf-4d82-bf99-9f951b14b52e","Feedback toggle row","A horizontal row containing an icon, a label, and a toggle switch, used to enable or disable a specific setting.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe4dca740-5bcf-4d82-bf99-9f951b14b52e.png",892,164,"Feedback toggle row from Cycle",[203],{"id":204,"title":205,"slug":206},236,"Toggle\u002FSwitch","toggle-switch",{"slug":31,"title":30,"logo":33,"categories":208},[],[],[211,214,217,220,223,226,228,232,236,240],{"label":212,"to":213},"Cycle product screens","\u002Fexamples\u002Fapps\u002Fcycle\u002Fscreens",{"label":215,"to":216},"Cycle marketing pages","\u002Fexamples\u002Fapps\u002Fcycle\u002Fmarketing",{"label":218,"to":219},"Cycle user flows","\u002Fexamples\u002Fapps\u002Fcycle\u002Fflows",{"label":221,"to":222},"Product management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fproduct-management",{"label":224,"to":225},"Feedback app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ffeedback",{"label":227,"to":18},"All SaaS app examples",{"label":229,"to":230,"description":231},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":233,"to":234,"description":235},"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":237,"to":238,"description":239},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":241,"to":242,"description":243},"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":245,"updated_at":246},"2023-02-03T14:44:59.000Z","2026-09-13T13:02:39.000Z"]