[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fswell\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":48,"showcases":212,"links":213,"dates":250},"\u002Fexamples\u002Fapps\u002Fswell\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Swell UI components examples - Nicelydone","Browse Swell UI component design examples. Preview individual interface elements and explore related component categories. Next-level ecommerce for everyone","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdcd88156-5b26-46d3-9b14-13764f246c56.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},"Swell design examples","\u002Fexamples\u002Fapps\u002Fswell",{"label":23,"to":4},"Swell 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":34,"categories":35},"Swell","swell","Next-level ecommerce for everyone","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fswell-81212618.png","https:\u002F\u002Fwww.swell.is","swellcommerce",[36,40,44],{"id":37,"title":38,"slug":39},48,"Developer Tools","developer-tools",{"id":41,"title":42,"slug":43},3,"Shopping","shopping",{"id":45,"title":46,"slug":47},7,"Web Development","web-development",[49,64,79,94,109,123,131,141,156,170,185,200],{"uuid":50,"title":51,"description":52,"canonical_path":4,"image":11,"width":53,"height":54,"image_alt":55,"kind":56,"categories":57,"app":62},"dcd88156-5b26-46d3-9b14-13764f246c56","Product detail tabs","A horizontal tab navigation component with four items. The 'Attributes' tab is currently selected, indicated by purple text and an underline.",825,188,"Product detail tabs from Swell","component",[58],{"id":59,"title":60,"slug":61},233,"Tabs","tabs",{"slug":30,"title":29,"logo":32,"categories":63},[],{"uuid":65,"title":66,"description":67,"canonical_path":4,"image":68,"width":69,"height":70,"image_alt":71,"kind":56,"categories":72,"app":77},"bdf330f6-9a6c-4820-8151-d6a165ed8de7","Help link pill","A pill-shaped button with a question mark icon and text linking to more information about products.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbdf330f6-9a6c-4820-8151-d6a165ed8de7.png",570,197,"Help link pill from Swell",[73],{"id":74,"title":75,"slug":76},235,"Tips","tips",{"slug":30,"title":29,"logo":32,"categories":78},[],{"uuid":80,"title":81,"description":82,"canonical_path":4,"image":83,"width":84,"height":85,"image_alt":86,"kind":56,"categories":87,"app":92},"5fb89d89-d0a3-4da3-adc5-cc9d6573477b","Admin Sidebar Navigation","A vertical sidebar navigation menu for an admin dashboard, featuring a logo, primary navigation links with icons, an 'Admin' section, and a user profile\u002Fworkspace switcher at the bottom.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5fb89d89-d0a3-4da3-adc5-cc9d6573477b.png",505,1738,"Admin Sidebar Navigation from Swell",[88],{"id":89,"title":90,"slug":91},209,"Vertical navigation","vertical-navigation",{"slug":30,"title":29,"logo":32,"categories":93},[],{"uuid":95,"title":96,"description":97,"canonical_path":4,"image":98,"width":99,"height":100,"image_alt":101,"kind":56,"categories":102,"app":107},"312c6924-557b-449e-872c-fd91662fb7e4","Success Toast","A toast notification confirming that a password recovery email has been sent.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F312c6924-557b-449e-872c-fd91662fb7e4.png",1182,391,"Success Toast from Swell",[103],{"id":104,"title":105,"slug":106},247,"Notification Toast","notification-element",{"slug":30,"title":29,"logo":32,"categories":108},[],{"uuid":110,"title":111,"description":112,"canonical_path":4,"image":113,"width":114,"height":115,"image_alt":116,"kind":56,"categories":117,"app":121},"60af8cc4-7a38-4626-84eb-fa4b6b4e1ac8","Newsletter signup form","A simple newsletter subscription form with a heading, descriptive text, and an email input field featuring an inline submit button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F60af8cc4-7a38-4626-84eb-fa4b6b4e1ac8.png",896,339,"Newsletter signup form from Swell",[118],{"id":119,"title":111,"slug":120},210,"newsletter-signup-form",{"slug":30,"title":29,"logo":32,"categories":122},[],{"uuid":124,"title":111,"description":125,"canonical_path":4,"image":126,"width":114,"height":115,"image_alt":116,"kind":56,"categories":127,"app":129},"3e696412-f741-4cfb-8ed2-9b757a152ce3","A simple newsletter subscription form featuring an eyebrow heading, a descriptive text, and an email input field.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3e696412-f741-4cfb-8ed2-9b757a152ce3.png",[128],{"id":119,"title":111,"slug":120},{"slug":30,"title":29,"logo":32,"categories":130},[],{"uuid":132,"title":111,"description":133,"canonical_path":4,"image":134,"width":135,"height":136,"image_alt":116,"kind":56,"categories":137,"app":139},"2f30e243-0fec-4f31-8d97-29502df12ee5","A centered newsletter signup form with an eyebrow, headline, email input field, submit button, and a success message.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2f30e243-0fec-4f31-8d97-29502df12ee5.png",1214,880,[138],{"id":119,"title":111,"slug":120},{"slug":30,"title":29,"logo":32,"categories":140},[],{"uuid":142,"title":143,"description":144,"canonical_path":4,"image":145,"width":146,"height":147,"image_alt":148,"kind":56,"categories":149,"app":154},"625d4dbe-52a1-441c-b42e-65db9ea43034","FAQ Accordion","A frequently asked questions section featuring a title, introductory text, and a list of expandable accordion items. The first item is expanded, showing its answer, while the others are collapsed.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F625d4dbe-52a1-441c-b42e-65db9ea43034.png",2876,1539,"FAQ Accordion from Swell",[150],{"id":151,"title":152,"slug":153},168,"Accordion","accordion",{"slug":30,"title":29,"logo":32,"categories":155},[],{"uuid":157,"title":158,"description":159,"canonical_path":4,"image":160,"width":161,"height":162,"image_alt":163,"kind":56,"categories":164,"app":168},"ae41e178-60a2-4e4a-9f56-37a054c3088f","Code block","A dark-themed code block displaying a base URL with a copy-to-clipboard icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fae41e178-60a2-4e4a-9f56-37a054c3088f.png",1793,446,"Code block from Swell",[165],{"id":166,"title":158,"slug":167},187,"code-block",{"slug":30,"title":29,"logo":32,"categories":169},[],{"uuid":171,"title":172,"description":173,"canonical_path":4,"image":174,"width":175,"height":176,"image_alt":177,"kind":56,"categories":178,"app":183},"9ec600da-42ec-4cb6-9ebc-09dca28e9cbc","Filter list","A vertical list of filter options with custom checkbox-like indicators and icons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9ec600da-42ec-4cb6-9ebc-09dca28e9cbc.png",559,482,"Filter list from Swell",[179],{"id":180,"title":181,"slug":182},225,"Sorting & filtering","sorting-filtering",{"slug":30,"title":29,"logo":32,"categories":184},[],{"uuid":186,"title":187,"description":188,"canonical_path":4,"image":189,"width":190,"height":191,"image_alt":192,"kind":56,"categories":193,"app":198},"f207b50d-865b-47fa-adde-d4dc41f2fd8f","Dark mode toggle","A pill-shaped switch component used to toggle between light and dark themes. The switch is currently in the active state, displaying a moon icon to indicate dark mode is enabled.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff207b50d-865b-47fa-adde-d4dc41f2fd8f.png",255,215,"Dark mode toggle from Swell",[194],{"id":195,"title":196,"slug":197},256,"Theme settings","theme-settings",{"slug":30,"title":29,"logo":32,"categories":199},[],{"uuid":201,"title":202,"description":203,"canonical_path":4,"image":204,"width":205,"height":206,"image_alt":207,"kind":56,"categories":208,"app":210},"ac947675-ef28-4f06-b4e1-46da57689cc8","Theme toggle switch","A pill-shaped toggle switch used to change the interface theme, currently showing a sun icon indicating light mode is active.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fac947675-ef28-4f06-b4e1-46da57689cc8.png",208,176,"Theme toggle switch from Swell",[209],{"id":195,"title":196,"slug":197},{"slug":30,"title":29,"logo":32,"categories":211},[],[],[214,217,220,223,226,229,232,234,238,242,246],{"label":215,"to":216},"Swell product screens","\u002Fexamples\u002Fapps\u002Fswell\u002Fscreens",{"label":218,"to":219},"Swell marketing pages","\u002Fexamples\u002Fapps\u002Fswell\u002Fmarketing",{"label":221,"to":222},"Swell user flows","\u002Fexamples\u002Fapps\u002Fswell\u002Fflows",{"label":224,"to":225},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":227,"to":228},"Shopping app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fshopping",{"label":230,"to":231},"Web Development app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fweb-development",{"label":233,"to":18},"All SaaS app examples",{"label":235,"to":236,"description":237},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":239,"to":240,"description":241},"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":243,"to":244,"description":245},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":247,"to":248,"description":249},"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":251,"updated_at":252},"2023-01-20T09:16:27.000Z","2026-09-13T13:02:39.000Z"]