[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fmeiro\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":49,"showcases":223,"links":224,"dates":261},"\u002Fexamples\u002Fapps\u002Fmeiro\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Meiro UI components examples - Nicelydone","Browse Meiro UI component design examples. Preview individual interface elements and explore related component categories. AI-powered builder for tests,…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6f13276e-7489-4a09-b0f4-892962e49fae.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},"Meiro design examples","\u002Fexamples\u002Fapps\u002Fmeiro",{"label":23,"to":4},"Meiro UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Meiro UI component design examples. Preview individual interface elements and explore related component categories. AI-powered builder for tests, quizzes and text games",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Meiro","meiro","AI-powered builder for tests, quizzes and text games","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmeiro-1a1702c0.png","https:\u002F\u002Fmeiro.cc","MeiroAI",[37,41,45],{"id":38,"title":39,"slug":40},80,"Artificial Intelligence","artificial-intelligence",{"id":42,"title":43,"slug":44},32,"Education","education",{"id":46,"title":47,"slug":48},69,"Surveys","surveys",[50,65,80,95,110,125,140,154,169,184,196,208],{"uuid":51,"title":52,"description":53,"canonical_path":4,"image":11,"width":54,"height":55,"image_alt":56,"kind":57,"categories":58,"app":63},"615b76ea-ac40-4ce9-803a-9c2fde2537e0","Hero Section","A dark-themed hero section featuring a prominent headline with inline graphics, a subheadline, a primary call-to-action button, and trust badges. It also includes a top navigation bar with a logo, links, and login\u002Fsignup buttons.",3024,1722,"Hero Section from Meiro","component",[59],{"id":60,"title":61,"slug":62},197,"Hero section","hero-section",{"slug":31,"title":30,"logo":33,"categories":64},[],{"uuid":66,"title":67,"description":68,"canonical_path":4,"image":69,"width":70,"height":71,"image_alt":72,"kind":57,"categories":73,"app":78},"0d2bcbeb-2f06-4ee0-bc55-9af7386dbd60","Usage progress bar","A progress bar indicating the number of AI generations used out of a total limit.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4da10489-4022-4848-aba0-fa62294bc571.png",1004,349,"Usage progress bar from Meiro",[74],{"id":75,"title":76,"slug":77},213,"Progress indicator","progress-indicator",{"slug":31,"title":30,"logo":33,"categories":79},[],{"uuid":81,"title":82,"description":83,"canonical_path":4,"image":84,"width":85,"height":86,"image_alt":87,"kind":57,"categories":88,"app":93},"1c75af32-7673-47ae-81d3-ac155c6a5444","Settings Navigation Tabs","A horizontal tab navigation component for switching between Account, Plans, and Billing settings. The active tab is indicated by a bright yellow underline and white text, while inactive tabs use muted gray text.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3e1785e2-b9ff-4574-90c2-4be827f65c94.png",591,133,"Settings Navigation Tabs from Meiro",[89],{"id":90,"title":91,"slug":92},233,"Tabs","tabs",{"slug":31,"title":30,"logo":33,"categories":94},[],{"uuid":96,"title":97,"description":98,"canonical_path":4,"image":99,"width":100,"height":101,"image_alt":102,"kind":57,"categories":103,"app":108},"718016e0-19aa-4865-aacb-b7e8745bb6c1","Number of questions select","An open select dropdown for choosing the number of questions, showing options from 2 to 6 with the first option selected.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8d38a8e6-b9d5-42a2-9f01-1c2b5844649b.png",1452,919,"Number of questions select from Meiro",[104],{"id":105,"title":106,"slug":107},204,"Input select","input-select",{"slug":31,"title":30,"logo":33,"categories":109},[],{"uuid":111,"title":112,"description":113,"canonical_path":4,"image":114,"width":115,"height":116,"image_alt":117,"kind":57,"categories":118,"app":123},"a0e03a08-8bff-4fe5-a1fa-b72817d63d82","Meiro UI component","A multi-step process with a creation guide button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5c39ea65-64c4-4efd-a019-1446a52a87f8.png",566,968,"UI component from Meiro",[119],{"id":120,"title":121,"slug":122},227,"Stepper","stepper",{"slug":31,"title":30,"logo":33,"categories":124},[],{"uuid":126,"title":127,"description":128,"canonical_path":4,"image":129,"width":130,"height":131,"image_alt":132,"kind":57,"categories":133,"app":138},"9f37ad9b-e437-4044-b89f-29888d9bcd35","Embed Code Block","A section displaying an embeddable code snippet with a prominent 'Copy code' button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4e52c785-d78c-4660-bfa5-bcd0f1285b58.png",1512,1043,"Embed Code Block from Meiro",[134],{"id":135,"title":136,"slug":137},187,"Code block","code-block",{"slug":31,"title":30,"logo":33,"categories":139},[],{"uuid":141,"title":142,"description":143,"canonical_path":4,"image":144,"width":100,"height":145,"image_alt":146,"kind":57,"categories":147,"app":152},"08c876b8-2004-4d41-a377-945a39dcc405","Toggle switch row","A dark-themed row containing a text label and a toggle switch, currently in the active state.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6ca0fed9-e73d-4c86-9aac-53b837a8c679.png",360,"Toggle switch row from Meiro",[148],{"id":149,"title":150,"slug":151},216,"Radio button","radio-button",{"slug":31,"title":30,"logo":33,"categories":153},[],{"uuid":155,"title":156,"description":157,"canonical_path":4,"image":158,"width":159,"height":160,"image_alt":161,"kind":57,"categories":162,"app":167},"e0ebc378-f88e-4492-a076-afd78d7785e2","Success Toast","A floating toast notification confirming a successful save action, featuring a green checkmark icon, a brief message, and a close button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe7de7a1b-b375-4aaa-b376-dd8f55cbae22.png",731,209,"Success Toast from Meiro",[163],{"id":164,"title":165,"slug":166},167,"Alert","alert",{"slug":31,"title":30,"logo":33,"categories":168},[],{"uuid":170,"title":171,"description":172,"canonical_path":4,"image":173,"width":174,"height":175,"image_alt":176,"kind":57,"categories":177,"app":182},"329263cb-e3d4-4e53-bcd9-4a1ef92c3d0e","Color picker popover","A color picker popover with a gradient selection area, hue and opacity sliders, HEX and RGBA input fields, and an 'Apply color' button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb26bb682-3589-4154-b6af-24544dee7aee.png",728,835,"Color picker popover from Meiro",[178],{"id":179,"title":180,"slug":181},183,"Color picker","color-picker",{"slug":31,"title":30,"logo":33,"categories":183},[],{"uuid":185,"title":186,"description":187,"canonical_path":4,"image":188,"width":189,"height":190,"image_alt":191,"kind":57,"categories":192,"app":194},"f48a7884-4e7c-48b7-9ae1-112e5f20e3ba","Published status toast","A dark-themed toast notification confirming a published status, featuring a success icon, an 'Open' action button, and a close button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe1f6c870-492f-4e6f-a617-11dcfd3ebccd.png",693,290,"Published status toast from Meiro",[193],{"id":164,"title":165,"slug":166},{"slug":31,"title":30,"logo":33,"categories":195},[],{"uuid":197,"title":198,"description":199,"canonical_path":4,"image":200,"width":201,"height":202,"image_alt":203,"kind":57,"categories":204,"app":206},"1142eb3b-06dd-4449-841c-21a8e2945adb","Generations used tracker","A dark-themed panel displaying two progress bars tracking AI generation usage limits.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F47320e4b-203f-49e0-b530-6d6cf68f9b6a.png",667,432,"Generations used tracker from Meiro",[205],{"id":75,"title":76,"slug":77},{"slug":31,"title":30,"logo":33,"categories":207},[],{"uuid":209,"title":210,"description":211,"canonical_path":4,"image":212,"width":213,"height":214,"image_alt":215,"kind":57,"categories":216,"app":221},"d7ebd288-def3-4927-92da-dcd4c890e181","Breadcrumb navigation","A dark-themed breadcrumb trail showing the user's current location within a quiz editor. It includes an icon for the root, a truncated quiz title, and the current question number, separated by chevron icons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5c04085f-2835-4895-89ea-d08b8ca2bc2f.png",1023,164,"Breadcrumb navigation from Meiro",[217],{"id":218,"title":219,"slug":220},177,"Breadcrumb","breadcrumb",{"slug":31,"title":30,"logo":33,"categories":222},[],[],[225,228,231,234,237,240,243,245,249,253,257],{"label":226,"to":227},"Meiro product screens","\u002Fexamples\u002Fapps\u002Fmeiro\u002Fscreens",{"label":229,"to":230},"Meiro marketing pages","\u002Fexamples\u002Fapps\u002Fmeiro\u002Fmarketing",{"label":232,"to":233},"Meiro user flows","\u002Fexamples\u002Fapps\u002Fmeiro\u002Fflows",{"label":235,"to":236},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"label":238,"to":239},"Education app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Feducation",{"label":241,"to":242},"Surveys app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fsurveys",{"label":244,"to":18},"All SaaS app examples",{"label":246,"to":247,"description":248},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":250,"to":251,"description":252},"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":254,"to":255,"description":256},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":258,"to":259,"description":260},"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":262,"updated_at":263},"2024-04-08T12:48:13.000Z","2026-09-26T00:10:32.000Z"]