[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fuizard\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":44,"showcases":213,"links":214,"dates":248},"\u002Fexamples\u002Fapps\u002Fuizard\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Uizard UI components examples - Nicelydone","Browse Uizard UI component design examples. Preview individual interface elements and explore related component categories. Visualize product ideas fast and…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa1ded588-f5da-46bc-830f-6aa98bd26cd3.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},"Uizard design examples","\u002Fexamples\u002Fapps\u002Fuizard",{"label":23,"to":4},"Uizard UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Uizard UI component design examples. Preview individual interface elements and explore related component categories. Visualize product ideas fast and easy with AI",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":31,"categories":35},"Uizard","uizard","Visualize product ideas fast and easy with AI","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fuizard-06915bef.png","https:\u002F\u002Fuizard.io",[36,40],{"id":37,"title":38,"slug":39},8,"Design","design",{"id":41,"title":42,"slug":43},80,"Artificial Intelligence","artificial-intelligence",[45,60,75,90,105,117,132,147,162,177,189,201],{"uuid":46,"title":47,"description":48,"canonical_path":4,"image":11,"width":49,"height":50,"image_alt":51,"kind":52,"categories":53,"app":58},"b07168c1-cc28-4b80-b009-1f28df30a7cf","AI Design Tool Hero Section","A hero section for an AI design tool featuring a top banner, a navigation header, a large headline, a subheadline, an AI prompt input field with a generate button, and a partial view of the product interface below.",3024,1731,"AI Design Tool Hero Section from Uizard","component",[54],{"id":55,"title":56,"slug":57},197,"Hero section","hero-section",{"slug":31,"title":30,"logo":33,"categories":59},[],{"uuid":61,"title":62,"description":63,"canonical_path":4,"image":64,"width":65,"height":66,"image_alt":67,"kind":52,"categories":68,"app":73},"a3635017-dda0-4660-a2a9-569c98a92104","Upgrade Modal","A modal prompting the user to upgrade to a Pro plan to unlock a specific feature. It includes a title, a brief explanation of the free plan limits, a list of Pro features, a call-to-action button, and an illustrative graphic.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F82426107-8e30-4c5d-9f5e-8def51795651.png",1575,1284,"Upgrade Modal from Uizard",[69],{"id":70,"title":71,"slug":72},236,"Toggle\u002FSwitch","toggle-switch",{"slug":31,"title":30,"logo":33,"categories":74},[],{"uuid":76,"title":77,"description":78,"canonical_path":4,"image":79,"width":80,"height":81,"image_alt":82,"kind":52,"categories":83,"app":88},"412a591c-67c3-498c-944a-040d23eb85b9","Share modal header with segmented control","A modal header showing a title and a segmented control with three options: Share, Published, and Embed. The 'Published' option is currently selected and includes a checkmark icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff0ede6a3-200b-486b-a392-66a6e57d626e.png",676,293,"Share modal header with segmented control from Uizard",[84],{"id":85,"title":86,"slug":87},218,"Segmented control","segmented-control",{"slug":31,"title":30,"logo":33,"categories":89},[],{"uuid":91,"title":92,"description":93,"canonical_path":4,"image":94,"width":95,"height":96,"image_alt":97,"kind":52,"categories":98,"app":103},"222b1ce5-8b14-4cda-8c53-5e336c05e6de","Segmented progress bar","A segmented progress indicator showing 4 out of 5 steps completed, accompanied by a numeric badge.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2432e404-42b1-4f9e-80fb-ebbf6d6b35d6.png",588,176,"Segmented progress bar from Uizard",[99],{"id":100,"title":101,"slug":102},213,"Progress indicator","progress-indicator",{"slug":31,"title":30,"logo":33,"categories":104},[],{"uuid":106,"title":107,"description":108,"canonical_path":4,"image":109,"width":110,"height":111,"image_alt":112,"kind":52,"categories":113,"app":115},"76a72890-cdb2-481a-a4ca-42fffc035525","Template toggle setting","A toggle switch with a label and helper text to enable using a project as a template.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4c114b0f-26ca-480c-8f73-4b326416f9ae.png",968,222,"Template toggle setting from Uizard",[114],{"id":70,"title":71,"slug":72},{"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":52,"categories":125,"app":130},"154e94d4-6032-441f-ab6e-1927aaa54c81","Privacy radio group","A radio group for selecting privacy settings, with options for 'Public to organization' and 'Private to me'. Each option includes an icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdffa6759-869b-4a6a-a665-674871e2e994.png",489,270,"Privacy radio group from Uizard",[126],{"id":127,"title":128,"slug":129},179,"Checkbox & radio","checkbox-radio",{"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":52,"categories":140,"app":145},"d25c487e-30fd-4702-9a4b-56473ae43486","Screen Color Picker","A collapsible panel section titled 'Screen Color' containing a row of circular color swatches for selection.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F76a6f4ee-9de8-4da0-b4cf-2eb66aa0991d.png",582,249,"Screen Color Picker from Uizard",[141],{"id":142,"title":143,"slug":144},183,"Color picker","color-picker",{"slug":31,"title":30,"logo":33,"categories":146},[],{"uuid":148,"title":149,"description":150,"canonical_path":4,"image":151,"width":152,"height":153,"image_alt":154,"kind":52,"categories":155,"app":160},"d726f870-3ab0-42a1-b272-038824035615","Design properties panel","A floating panel containing design controls for alignment, layering, layout, style, screen color, and grouping, along with a prominent call to action to save the selection as a template.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F588032f3-b90d-487c-bc3a-64fc5b429c7c.png",656,1236,"Design properties panel from Uizard",[156],{"id":157,"title":158,"slug":159},246,"Toolbox","toolbox",{"slug":31,"title":30,"logo":33,"categories":161},[],{"uuid":163,"title":164,"description":165,"canonical_path":4,"image":166,"width":167,"height":168,"image_alt":169,"kind":52,"categories":170,"app":175},"f7a5a430-8f08-4404-b672-2b67de3ae8a3","AI Screen Generation Modal","A modal window for generating UI screens using AI. It features a top toolbar with dropdowns for generation type, prompt style, and device format, along with a 'Beta' badge. The main area displays a carousel of generated screen previews on a checkered background, with a 'Use screen' button. Below the preview is a text area containing the prompt used, a character count, and action buttons to 'Try example', 'Reset', or 'Try Again'.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcedab2cc-d435-4384-a2d9-9935d0190175.png",1356,988,"AI Screen Generation Modal from Uizard",[171],{"id":172,"title":173,"slug":174},294,"Artificial intelligence","ai",{"slug":31,"title":30,"logo":33,"categories":176},[],{"uuid":178,"title":179,"description":180,"canonical_path":4,"image":181,"width":182,"height":183,"image_alt":184,"kind":52,"categories":185,"app":187},"07f6159c-59f3-4824-8b32-3b4b70bcf4f8","AI Screen Generator Prompt","A floating prompt interface for generating UI screens using AI. It includes dropdowns for configuration, a text area for the prompt, a character counter, and a primary generate button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd595dca3-4945-46fb-a088-535d6f8fee72.png",1574,663,"AI Screen Generator Prompt from Uizard",[186],{"id":172,"title":173,"slug":174},{"slug":31,"title":30,"logo":33,"categories":188},[],{"uuid":190,"title":191,"description":192,"canonical_path":4,"image":193,"width":194,"height":195,"image_alt":196,"kind":52,"categories":197,"app":199},"2f45a1e5-2426-4f18-8dd8-c45aafeff624","AI Autodesigner Button","A pill-shaped button labeled 'Use Autodesigner 1.5' with a sparkle icon, indicating an AI-powered feature.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffc39b0fd-8906-47e4-8dd8-a3092c75e7b4.png",539,116,"AI Autodesigner Button from Uizard",[198],{"id":172,"title":173,"slug":174},{"slug":31,"title":30,"logo":33,"categories":200},[],{"uuid":202,"title":203,"description":204,"canonical_path":4,"image":205,"width":206,"height":207,"image_alt":208,"kind":52,"categories":209,"app":211},"85eb5937-4ff2-42b5-acd9-074edc9431ac","Design Editor Sidebar Menu","A vertical sidebar menu for a design editor, featuring a top navigation bar with project details and a main area for adding new screens via various methods like empty screens, generating screens, scanning from wireframes or screenshots, and importing from other design tools.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F89a84c0e-d90b-4f9a-ae78-68eaed1a64c1.png",912,1747,"Design Editor Sidebar Menu from Uizard",[210],{"id":157,"title":158,"slug":159},{"slug":31,"title":30,"logo":33,"categories":212},[],[],[215,218,221,224,227,230,232,236,240,244],{"label":216,"to":217},"Uizard product screens","\u002Fexamples\u002Fapps\u002Fuizard\u002Fscreens",{"label":219,"to":220},"Uizard marketing pages","\u002Fexamples\u002Fapps\u002Fuizard\u002Fmarketing",{"label":222,"to":223},"Uizard user flows","\u002Fexamples\u002Fapps\u002Fuizard\u002Fflows",{"label":225,"to":226},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":228,"to":229},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"label":231,"to":18},"All SaaS app examples",{"label":233,"to":234,"description":235},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":237,"to":238,"description":239},"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":241,"to":242,"description":243},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":245,"to":246,"description":247},"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":249,"updated_at":250},"2024-05-12T09:30:43.000Z","2026-09-26T00:10:29.000Z"]