[{"data":1,"prerenderedAt":1665},["ShallowReactive",2],{"docs-nav":3,"\u002Fdocs\u002Fcomponents\u002Fqrcode":316},[4,9,15,19,24,28,33,37,41,45,49,53,57,60,63,67,70,74,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,156,159,162,165,168,171,175,178,181,184,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,244,247,250,253,257,261,264,267,270,273,276,279,282,285,287,290,293,296,299,302,305,308,311,313],{"path":5,"title":6,"section":7,"order":7,"sidebar":8},"\u002Fbrand","Brand",null,false,{"path":10,"title":11,"section":12,"order":13,"sidebar":14},"\u002Fdocs\u002Fapi\u002Fcomposables","Composables","API",2,true,{"path":16,"title":17,"section":12,"order":18,"sidebar":14},"\u002Fdocs\u002Fapi\u002Futilities","Utilities",1,{"path":20,"title":21,"section":22,"order":23,"sidebar":14},"\u002Fdocs\u002Fcli","CLI","Getting Started",9,{"path":25,"title":26,"section":22,"order":27,"sidebar":14},"\u002Fdocs\u002Fcompatibility","Compatibility",4,{"path":29,"title":30,"section":31,"order":32,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fbody","Body","Components",3,{"path":34,"title":35,"section":31,"order":36,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fbutton","Button",13,{"path":38,"title":39,"section":31,"order":40,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcodeblock","CodeBlock",18,{"path":42,"title":43,"section":31,"order":44,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcodeinline","CodeInline",19,{"path":46,"title":47,"section":31,"order":48,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcolumn","Column",8,{"path":50,"title":51,"section":31,"order":52,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcontainer","Container",5,{"path":54,"title":55,"section":31,"order":56,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ffont","Font",11,{"path":58,"title":59,"section":31,"order":13,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhead","Head",{"path":61,"title":62,"section":31,"order":23,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fheading","Heading",{"path":64,"title":65,"section":31,"order":66,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhr","Hr",16,{"path":68,"title":69,"section":31,"order":18,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhtml","Html",{"path":71,"title":72,"section":31,"order":73,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fimg","Img",14,{"path":75,"title":76,"section":31,"order":27,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Flayout","Layout",{"path":78,"title":79,"section":31,"order":80,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Flink","Link",12,{"path":82,"title":83,"section":31,"order":84,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fmarkdown","Markdown",20,{"path":86,"title":87,"section":31,"order":88,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fnotoutlook","NotOutlook",22,{"path":90,"title":91,"section":31,"order":92,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fnowidows","NoWidows",26,{"path":94,"title":95,"section":31,"order":96,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foutlook","Outlook",21,{"path":98,"title":99,"section":31,"order":100,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foutlookbg","OutlookBg",23,{"path":102,"title":103,"section":31,"order":104,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foverview","Overview",0,{"path":106,"title":107,"section":31,"order":108,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fplaintext","Plaintext",31,{"path":110,"title":111,"section":31,"order":112,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fpreheader","Preheader",17,{"path":114,"title":115,"section":31,"order":116,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fqrcode","QrCode",30,{"path":118,"title":119,"section":31,"order":120,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fraw","Raw",28,{"path":122,"title":123,"section":31,"order":124,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Frow","Row",7,{"path":126,"title":127,"section":31,"order":128,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fsection","Section",6,{"path":130,"title":131,"section":31,"order":132,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fspacer","Spacer",15,{"path":134,"title":135,"section":31,"order":136,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ftailwind","Tailwind",29,{"path":138,"title":139,"section":31,"order":140,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ftext","Text",10,{"path":142,"title":143,"section":31,"order":144,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fvml","Vml",24,{"path":146,"title":147,"section":31,"order":148,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fwithurl","WithUrl",27,{"path":150,"title":151,"section":152,"order":128,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Faws-ses","AWS SES","Deploy",{"path":154,"title":155,"section":152,"order":124,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fcloudflare","Cloudflare",{"path":157,"title":158,"section":152,"order":32,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fmailgun","Mailgun",{"path":160,"title":161,"section":152,"order":18,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fnodemailer","Nodemailer",{"path":163,"title":164,"section":152,"order":27,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fpostmark","Postmark",{"path":166,"title":167,"section":152,"order":52,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fresend","Resend",{"path":169,"title":170,"section":152,"order":13,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fsendgrid","SendGrid",{"path":172,"title":173,"section":174,"order":32,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fconfiguration","Configuration","Development",{"path":176,"title":177,"section":174,"order":52,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fevents","Events",{"path":179,"title":180,"section":174,"order":128,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fi18n","i18n",{"path":182,"title":183,"section":174,"order":13,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Flocal","Dev Server",{"path":185,"title":107,"section":174,"order":27,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fplaintext",{"path":187,"title":188,"section":174,"order":18,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Ftemplates","Templates",{"path":190,"title":191,"section":22,"order":32,"sidebar":14},"\u002Fdocs\u002Feditor-setup","Editor Setup",{"path":193,"title":194,"section":22,"order":48,"sidebar":14},"\u002Fdocs\u002Fglossary","Glossary",{"path":196,"title":197,"section":22,"order":128,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fframeworks","Framework Guides",{"path":199,"title":200,"section":197,"order":52,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fadonisjs","AdonisJS",{"path":202,"title":203,"section":197,"order":32,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fastro","Astro",{"path":205,"title":206,"section":197,"order":18,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Flaravel","Laravel",{"path":208,"title":209,"section":197,"order":48,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnextjs","Next.js",{"path":211,"title":212,"section":197,"order":13,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnuxt","Nuxt",{"path":214,"title":215,"section":197,"order":124,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fqwik","Qwik",{"path":217,"title":218,"section":197,"order":128,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsolid","Solid",{"path":220,"title":221,"section":197,"order":27,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsveltekit","SvelteKit",{"path":223,"title":224,"section":197,"order":23,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Ftanstack","TanStack Start",{"path":226,"title":227,"section":22,"order":13,"sidebar":14},"\u002Fdocs\u002Finstallation","Installation",{"path":229,"title":230,"section":22,"order":32,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fmanual","Manual Installation",{"path":232,"title":233,"section":22,"order":27,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fmonorepo","Monorepo Installation",{"path":235,"title":236,"section":22,"order":52,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fvite","Vite Plugin",{"path":238,"title":239,"section":22,"order":18,"sidebar":14},"\u002Fdocs\u002Fintroduction","What is Maizzle?",{"path":241,"title":242,"section":243,"order":13,"sidebar":14},"\u002Fdocs\u002Fmigrate\u002Fmjml","MJML","Migrate to Maizzle",{"path":245,"title":246,"section":243,"order":18,"sidebar":14},"\u002Fdocs\u002Fmigrate\u002Freact-email","React Email",{"path":248,"title":249,"section":22,"order":124,"sidebar":14},"\u002Fdocs\u002Fresources","Resources",{"path":251,"title":252,"section":22,"order":128,"sidebar":14},"\u002Fdocs\u002Fskill","Agent Skill",{"path":254,"title":255,"section":256,"order":18,"sidebar":14},"\u002Fdocs\u002Ftailwindcss","Tailwind CSS","Core Concepts",{"path":258,"title":259,"section":260,"order":13,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fadd-attributes","Add Attributes","Transformers",{"path":262,"title":263,"section":260,"order":48,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fattribute-to-style","Attribute to Style",{"path":265,"title":266,"section":260,"order":36,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fbase-url","Base URL",{"path":268,"title":269,"section":260,"order":66,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fentities","Entities",{"path":271,"title":272,"section":260,"order":80,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Ffilters","Filters",{"path":274,"title":275,"section":260,"order":112,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fformat","Format",{"path":277,"title":278,"section":260,"order":32,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Finline-css","Inline CSS",{"path":280,"title":281,"section":260,"order":56,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Finline-link","Inline Link",{"path":283,"title":284,"section":260,"order":40,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fminify","Minify",{"path":286,"title":103,"section":260,"order":18,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Foverview",{"path":288,"title":289,"section":260,"order":27,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fpurge-css","Purge CSS",{"path":291,"title":292,"section":260,"order":140,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fremove-attributes","Remove Attributes",{"path":294,"title":295,"section":260,"order":132,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Freplace-strings","Replace Strings",{"path":297,"title":298,"section":260,"order":52,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fsafe-selectors","Safe Selectors",{"path":300,"title":301,"section":260,"order":128,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fshorthand-css","Shorthand CSS",{"path":303,"title":304,"section":260,"order":124,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fsix-hex","Six-digit HEX",{"path":306,"title":307,"section":260,"order":73,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Furl-parameters","URL Parameters",{"path":309,"title":310,"section":22,"order":52,"sidebar":14},"\u002Fdocs\u002Fupgrade-guide","Upgrade Guide",{"path":312,"title":236,"section":256,"order":13,"sidebar":14},"\u002Fdocs\u002Fvite-plugin",{"path":314,"title":315,"section":7,"order":7,"sidebar":8},"\u002Fprivacy","Privacy Policy",{"id":317,"title":115,"body":318,"description":1659,"extension":1660,"meta":1661,"navigation":14,"order":116,"path":114,"section":31,"seo":1662,"sidebar":14,"stem":1663,"toc":14,"__hash__":1664},"docs\u002Fdocs\u002Fcomponents\u002Fqrcode.md",{"type":319,"value":320,"toc":1635},"minimark",[321,325,342,347,445,452,557,568,572,579,689,692,706,710,715,726,760,766,770,781,827,849,853,856,896,900,903,963,1013,1019,1023,1029,1067,1070,1075,1079,1097,1132,1135,1139,1145,1148,1152,1154,1168,1171,1174,1184,1191,1193,1203,1209,1211,1220,1226,1230,1237,1243,1246,1250,1256,1260,1268,1311,1314,1358,1371,1519,1526,1530,1541,1583,1590,1625,1631],[322,323,115],"h1",{"id":324},"qrcode",[326,327,328,329,333,334,337,338,341],"p",{},"Renders a scannable QR code as a ",[330,331,332],"code",{},"\u003Ctable>"," of colored cells. No SVG, no PNG, no images — just rows of ",[330,335,336],{},"\u003Ctr>","\u002F",[330,339,340],{},"\u003Ctd>"," that every email client can render.",[343,344,346],"h2",{"id":345},"usage","Usage",[348,349,355],"pre",{"className":350,"code":351,"filename":352,"language":353,"meta":354,"style":354},"language-vue shiki shiki-themes laserwave has-highlighted","\u003Ctemplate>\n  \u003CLayout>\n    \u003CContainer>\n      \u003CQrCode value=\"https:\u002F\u002Fmaizzle.com\" \u002F> \u002F\u002F [!code highlight]\n    \u003C\u002FContainer>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n","emails\u002Fexample.vue","vue","",[330,356,357,372,381,390,418,427,436],{"__ignoreMap":354},[358,359,361,365,369],"span",{"class":360,"line":18},"line",[358,362,364],{"class":363},"sGGKt","\u003C",[358,366,368],{"class":367},"sb4Pa","template",[358,370,371],{"class":363},">\n",[358,373,374,377,379],{"class":360,"line":13},[358,375,376],{"class":363},"  \u003C",[358,378,76],{"class":367},[358,380,371],{"class":363},[358,382,383,386,388],{"class":360,"line":32},[358,384,385],{"class":363},"    \u003C",[358,387,51],{"class":367},[358,389,371],{"class":363},[358,391,394,397,399,403,406,409,413,415],{"class":392,"line":27},[360,393],"highlighted",[358,395,396],{"class":363},"      \u003C",[358,398,115],{"class":367},[358,400,402],{"class":401},"sZNF3"," value",[358,404,405],{"class":363},"=",[358,407,408],{"class":363},"\"",[358,410,412],{"class":411},"sXiT_","https:\u002F\u002Fmaizzle.com",[358,414,408],{"class":363},[358,416,417],{"class":363}," \u002F>",[358,419,420,423,425],{"class":360,"line":52},[358,421,422],{"class":363},"    \u003C\u002F",[358,424,51],{"class":367},[358,426,371],{"class":363},[358,428,429,432,434],{"class":360,"line":128},[358,430,431],{"class":363},"  \u003C\u002F",[358,433,76],{"class":367},[358,435,371],{"class":363},[358,437,438,441,443],{"class":360,"line":124},[358,439,440],{"class":363},"\u003C\u002F",[358,442,368],{"class":367},[358,444,371],{"class":363},[326,446,447,448,451],{},"QR codes don't make much sense on mobile since you can't use your phone to scan a code on the same phone's screen. Instead of hiding it, you could link the QR code to the same URL in the ",[330,449,450],{},"value"," prop, so mobile users can tap it as a fallback:",[348,453,455],{"className":350,"code":454,"filename":352,"language":353,"meta":354,"style":354},"\u003Ctemplate>\n  \u003CLayout>\n    \u003CContainer>\n      \u003Ca href=\"https:\u002F\u002Fmaizzle.com\"> \u002F\u002F [!code highlight]\n        \u003CQrCode value=\"https:\u002F\u002Fmaizzle.com\" \u002F>\n      \u003C\u002Fa> \u002F\u002F [!code highlight]\n    \u003C\u002FContainer>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n",[330,456,457,465,473,481,503,523,533,541,549],{"__ignoreMap":354},[358,458,459,461,463],{"class":360,"line":18},[358,460,364],{"class":363},[358,462,368],{"class":367},[358,464,371],{"class":363},[358,466,467,469,471],{"class":360,"line":13},[358,468,376],{"class":363},[358,470,76],{"class":367},[358,472,371],{"class":363},[358,474,475,477,479],{"class":360,"line":32},[358,476,385],{"class":363},[358,478,51],{"class":367},[358,480,371],{"class":363},[358,482,484,486,489,492,494,496,498,500],{"class":483,"line":27},[360,393],[358,485,396],{"class":363},[358,487,488],{"class":367},"a",[358,490,491],{"class":401}," href",[358,493,405],{"class":363},[358,495,408],{"class":363},[358,497,412],{"class":411},[358,499,408],{"class":363},[358,501,502],{"class":363},">",[358,504,505,508,510,512,514,516,518,520],{"class":360,"line":52},[358,506,507],{"class":363},"        \u003C",[358,509,115],{"class":367},[358,511,402],{"class":401},[358,513,405],{"class":363},[358,515,408],{"class":363},[358,517,412],{"class":411},[358,519,408],{"class":363},[358,521,522],{"class":363}," \u002F>\n",[358,524,526,529,531],{"class":525,"line":128},[360,393],[358,527,528],{"class":363},"      \u003C\u002F",[358,530,488],{"class":367},[358,532,502],{"class":363},[358,534,535,537,539],{"class":360,"line":124},[358,536,422],{"class":363},[358,538,51],{"class":367},[358,540,371],{"class":363},[358,542,543,545,547],{"class":360,"line":48},[358,544,431],{"class":363},[358,546,76],{"class":367},[358,548,371],{"class":363},[358,550,551,553,555],{"class":360,"line":23},[358,552,440],{"class":363},[358,554,368],{"class":367},[358,556,371],{"class":363},[558,559,561],"callout",{"type":560},"warning",[326,562,563,564,567],{},"Outlook (classic) on Windows does not support wrapping tables in ",[330,565,566],{},"\u003Ca>"," tags, so the QR won't be clickable there. Consider adding a text link as a fallback for Outlook users.",[343,569,571],{"id":570},"sizing","Sizing",[326,573,574,575,578],{},"Sizing is done via Tailwind utilities. By default, QR codes are 120px (",[330,576,577],{},"size-30","):",[348,580,583],{"className":581,"code":582,"language":353,"meta":354,"style":354},"language-vue shiki shiki-themes laserwave","\u003C!-- Set width and height together -->\n\u003CQrCode value=\"https:\u002F\u002Fmaizzle.com\" class=\"size-40\" \u002F>\n\n\u003C!-- Or just use width, height is proportional -->\n\u003CQrCode value=\"https:\u002F\u002Fmaizzle.com\" class=\"w-40\" \u002F>\n\u003CQrCode value=\"https:\u002F\u002Fmaizzle.com\" class=\"w-[200px]\" \u002F>\n",[330,584,585,591,621,626,631,660],{"__ignoreMap":354},[358,586,587],{"class":360,"line":18},[358,588,590],{"class":589},"sVsQ9","\u003C!-- Set width and height together -->\n",[358,592,593,595,597,599,601,603,605,607,610,612,614,617,619],{"class":360,"line":13},[358,594,364],{"class":363},[358,596,115],{"class":367},[358,598,402],{"class":401},[358,600,405],{"class":363},[358,602,408],{"class":363},[358,604,412],{"class":411},[358,606,408],{"class":363},[358,608,609],{"class":401}," class",[358,611,405],{"class":363},[358,613,408],{"class":363},[358,615,616],{"class":411},"size-40",[358,618,408],{"class":363},[358,620,522],{"class":363},[358,622,623],{"class":360,"line":32},[358,624,625],{"emptyLinePlaceholder":14},"\n",[358,627,628],{"class":360,"line":27},[358,629,630],{"class":589},"\u003C!-- Or just use width, height is proportional -->\n",[358,632,633,635,637,639,641,643,645,647,649,651,653,656,658],{"class":360,"line":52},[358,634,364],{"class":363},[358,636,115],{"class":367},[358,638,402],{"class":401},[358,640,405],{"class":363},[358,642,408],{"class":363},[358,644,412],{"class":411},[358,646,408],{"class":363},[358,648,609],{"class":401},[358,650,405],{"class":363},[358,652,408],{"class":363},[358,654,655],{"class":411},"w-40",[358,657,408],{"class":363},[358,659,522],{"class":363},[358,661,662,664,666,668,670,672,674,676,678,680,682,685,687],{"class":360,"line":128},[358,663,364],{"class":363},[358,665,115],{"class":367},[358,667,402],{"class":401},[358,669,405],{"class":363},[358,671,408],{"class":363},[358,673,412],{"class":411},[358,675,408],{"class":363},[358,677,609],{"class":401},[358,679,405],{"class":363},[358,681,408],{"class":363},[358,683,684],{"class":411},"w-[200px]",[358,686,408],{"class":363},[358,688,522],{"class":363},[326,690,691],{},"The component picks an integer pixel size for each cell that fits the requested table size, then sizes the outer table to match exactly — there's never an empty stripe between the cells and the table edge. The actual rendered width may therefore be a few pixels under the requested value.",[558,693,695],{"type":694},"info",[326,696,697,698,701,702,705],{},"If your project customizes Tailwind's ",[330,699,700],{},"--spacing"," token, pass an arbitrary value like ",[330,703,704],{},"size-[200px]"," so the cell math doesn't depend on the default 4 px-per-unit scale.",[343,707,709],{"id":708},"colors","Colors",[711,712,714],"h3",{"id":713},"background","Background",[326,716,717,718,721,722,725],{},"Use any Tailwind ",[330,719,720],{},"bg-*"," or ",[330,723,724],{},"dark:bg-*"," utility on the component to change the QR's background color from the default white:",[348,727,729],{"className":581,"code":728,"language":353,"meta":354,"style":354},"\u003CQrCode value=\"https:\u002F\u002Fmaizzle.com\" class=\"bg-teal-300 dark:bg-teal-700\" \u002F>\n",[330,730,731],{"__ignoreMap":354},[358,732,733,735,737,739,741,743,745,747,749,751,753,756,758],{"class":360,"line":18},[358,734,364],{"class":363},[358,736,115],{"class":367},[358,738,402],{"class":401},[358,740,405],{"class":363},[358,742,408],{"class":363},[358,744,412],{"class":411},[358,746,408],{"class":363},[358,748,609],{"class":401},[358,750,405],{"class":363},[358,752,408],{"class":363},[358,754,755],{"class":411},"bg-teal-300 dark:bg-teal-700",[358,757,408],{"class":363},[358,759,522],{"class":363},[326,761,762,763,765],{},"The class lands on the ",[330,764,332],{}," element. Light cells are transparent, so the table's background fills them.",[711,767,769],{"id":768},"foreground","Foreground",[326,771,772,773,776,777,780],{},"Use the ",[330,774,775],{},"qr:"," variant to paint the data modules, the actual shapes that make up the QR. It composes with ",[330,778,779],{},"dark:"," like any other variant:",[348,782,784],{"className":581,"code":783,"language":353,"meta":354,"style":354},"\u003CQrCode\n  value=\"https:\u002F\u002Fmaizzle.com\"\n  class=\"qr:bg-blue-900 dark:qr:bg-blue-100\"\n\u002F>\n",[330,785,786,793,807,821],{"__ignoreMap":354},[358,787,788,790],{"class":360,"line":18},[358,789,364],{"class":363},[358,791,792],{"class":367},"QrCode\n",[358,794,795,798,800,802,804],{"class":360,"line":13},[358,796,797],{"class":401},"  value",[358,799,405],{"class":363},[358,801,408],{"class":363},[358,803,412],{"class":411},[358,805,806],{"class":363},"\"\n",[358,808,809,812,814,816,819],{"class":360,"line":32},[358,810,811],{"class":401},"  class",[358,813,405],{"class":363},[358,815,408],{"class":363},[358,817,818],{"class":411},"qr:bg-blue-900 dark:qr:bg-blue-100",[358,820,806],{"class":363},[358,822,823],{"class":360,"line":27},[358,824,826],{"class":825},"sLaUg","\u002F>\n",[558,828,829],{"type":694},[326,830,831,832,834,835,844,845,848],{},"The ",[330,833,775],{}," variant is provided by ",[488,836,841],{"href":837,"rel":838,"target":840},"https:\u002F\u002Fgithub.com\u002Fmaizzle\u002Ftailwindcss",[839],"nofollow","_blank",[330,842,843],{},"@maizzle\u002Ftailwindcss",". If for some reason you are not using it in your project, register the variant yourself with ",[330,846,847],{},"@custom-variant qr (& td.qd);",".",[711,850,852],{"id":851},"combined","Combined",[326,854,855],{},"Background and foreground colors can be set together:",[348,857,859],{"className":581,"code":858,"language":353,"meta":354,"style":354},"\u003CQrCode\n  value=\"https:\u002F\u002Fmaizzle.com\"\n  class=\"bg-red-600 qr:bg-white dark:bg-gray-950 dark:qr:bg-amber-300\"\n\u002F>\n",[330,860,861,867,879,892],{"__ignoreMap":354},[358,862,863,865],{"class":360,"line":18},[358,864,364],{"class":363},[358,866,792],{"class":367},[358,868,869,871,873,875,877],{"class":360,"line":13},[358,870,797],{"class":401},[358,872,405],{"class":363},[358,874,408],{"class":363},[358,876,412],{"class":411},[358,878,806],{"class":363},[358,880,881,883,885,887,890],{"class":360,"line":32},[358,882,811],{"class":401},[358,884,405],{"class":363},[358,886,408],{"class":363},[358,888,889],{"class":411},"bg-red-600 qr:bg-white dark:bg-gray-950 dark:qr:bg-amber-300",[358,891,806],{"class":363},[358,893,894],{"class":360,"line":27},[358,895,826],{"class":825},[343,897,899],{"id":898},"error-correction","Error correction",[326,901,902],{},"Higher levels of error correction add redundancy that lets the code stay scannable when partially obscured (a logo overlay, print smudge, etc.), at the cost of a larger matrix and smaller cells at a given size.",[904,905,906,919],"table",{},[907,908,909],"thead",{},[910,911,912,916],"tr",{},[913,914,915],"th",{},"Level",[913,917,918],{},"Recovery",[920,921,922,933,943,953],"tbody",{},[910,923,924,930],{},[925,926,927],"td",{},[330,928,929],{},"L",[925,931,932],{},"~7%",[910,934,935,940],{},[925,936,937],{},[330,938,939],{},"M",[925,941,942],{},"~15% (default)",[910,944,945,950],{},[925,946,947],{},[330,948,949],{},"Q",[925,951,952],{},"~25%",[910,954,955,960],{},[925,956,957],{},[330,958,959],{},"H",[925,961,962],{},"~30%",[348,964,967],{"className":581,"code":965,"highlights":966,"language":353,"meta":354,"style":354},"\u003CQrCode \n  value=\"https:\u002F\u002Fmaizzle.com\" \n  ecc=\"H\" \n\u002F>\n",[32],[330,968,969,978,992,1009],{"__ignoreMap":354},[358,970,971,973,975],{"class":360,"line":18},[358,972,364],{"class":363},[358,974,115],{"class":367},[358,976,977],{"class":825}," \n",[358,979,980,982,984,986,988,990],{"class":360,"line":13},[358,981,797],{"class":401},[358,983,405],{"class":363},[358,985,408],{"class":363},[358,987,412],{"class":411},[358,989,408],{"class":363},[358,991,977],{"class":825},[358,993,996,999,1001,1003,1005,1007],{"class":994,"line":32},[360,995],"highlight",[358,997,998],{"class":401},"  ecc",[358,1000,405],{"class":363},[358,1002,408],{"class":363},[358,1004,959],{"class":411},[358,1006,408],{"class":363},[358,1008,977],{"class":825},[358,1010,1011],{"class":360,"line":27},[358,1012,826],{"class":825},[326,1014,1015,1016,1018],{},"For on-screen email QR codes with no occlusion, ",[330,1017,939],{}," is plenty. Bump it up if you composite a logo over the center of the code, or if you expect the code to be printed.",[343,1020,1022],{"id":1021},"quiet-zone","Quiet zone",[326,1024,831,1025,1028],{},[330,1026,1027],{},"border"," prop controls the width of the light \"quiet zone\" around the code, expressed in modules. The QR spec recommends ≥ 4; the default of 1 is enough when the code sits in a clean content card with surrounding whitespace.",[348,1030,1032],{"className":581,"code":1031,"language":353,"meta":354,"style":354},"\u003CQrCode value=\"https:\u002F\u002Fmaizzle.com\" :border=\"4\" \u002F>\n",[330,1033,1034],{"__ignoreMap":354},[358,1035,1036,1038,1040,1042,1044,1046,1048,1050,1053,1055,1057,1059,1063,1065],{"class":360,"line":18},[358,1037,364],{"class":363},[358,1039,115],{"class":367},[358,1041,402],{"class":401},[358,1043,405],{"class":363},[358,1045,408],{"class":363},[358,1047,412],{"class":411},[358,1049,408],{"class":363},[358,1051,1052],{"class":363}," :",[358,1054,1027],{"class":401},[358,1056,405],{"class":363},[358,1058,408],{"class":363},[358,1060,1062],{"class":1061},"s0EtI","4",[358,1064,408],{"class":363},[358,1066,522],{"class":363},[326,1068,1069],{},"Increase it when the code sits flush against colored backgrounds, photos, or other visual elements that could muddy the contrast boundary scanners rely on.",[558,1071,1072],{"type":560},[326,1073,1074],{},"Increasing the quiet zone also increases the HTML size of the code, since more cells are added around the edges. If you need a larger quiet zone but are tight on email size, try reducing the overall code size or error correction level to compensate.",[343,1076,1078],{"id":1077},"accessibility","Accessibility",[326,1080,1081,1082,1085,1086,1089,1090,1092,1093,1096],{},"Use ",[330,1083,1084],{},"alt"," to set an ",[330,1087,1088],{},"aria-label"," on the QR's ",[330,1091,332],{},", which is rendered with ",[330,1094,1095],{},"role=\"img\"",":",[348,1098,1100],{"className":581,"code":1099,"language":353,"meta":354,"style":354},"\u003CQrCode value=\"https:\u002F\u002Fmaizzle.com\" alt=\"Scan to visit Maizzle\" \u002F>\n",[330,1101,1102],{"__ignoreMap":354},[358,1103,1104,1106,1108,1110,1112,1114,1116,1118,1121,1123,1125,1128,1130],{"class":360,"line":18},[358,1105,364],{"class":363},[358,1107,115],{"class":367},[358,1109,402],{"class":401},[358,1111,405],{"class":363},[358,1113,408],{"class":363},[358,1115,412],{"class":411},[358,1117,408],{"class":363},[358,1119,1120],{"class":401}," alt",[358,1122,405],{"class":363},[358,1124,408],{"class":363},[358,1126,1127],{"class":411},"Scan to visit Maizzle",[358,1129,408],{"class":363},[358,1131,522],{"class":363},[326,1133,1134],{},"Screen readers announce the table as an image with the provided label instead of attempting to read individual cells.",[343,1136,1138],{"id":1137},"outlook-dark-mode","Outlook dark mode",[326,1140,1141,1142,848],{},"Dark mode in QR codes works via ",[330,1143,1144],{},"prefers-color-scheme: dark",[326,1146,1147],{},"Outlook desktop on Windows does not support media queries, so QR codes there always render with their light-mode colors. Default black\u002Fwhite colors get inverted in Outlook's auto dark-mode, so the code is still scannable.",[343,1149,1151],{"id":1150},"props","Props",[711,1153,450],{"id":450},[326,1155,1156,1157,1160,1163,1164],{},"Type: ",[330,1158,1159],{},"String",[1161,1162],"br",{},"\nDefault: ",[1165,1166,1167],"em",{},"required",[326,1169,1170],{},"The data to encode in the QR code. Can be any string — a URL, plain text, contact info, a Wi-Fi config, etc.",[711,1172,1173],{"id":1173},"ecc",[326,1175,1156,1176,1179,1163,1181],{},[330,1177,1178],{},"'L' | 'M' | 'Q' | 'H'",[1161,1180],{},[330,1182,1183],{},"'M'",[326,1185,1186,1187,1190],{},"Error correction level. See ",[488,1188,899],{"href":1189},"#error-correction"," above.",[711,1192,1027],{"id":1027},[326,1194,1156,1195,1198,1163,1200],{},[330,1196,1197],{},"Number",[1161,1199],{},[330,1201,1202],{},"1",[326,1204,1205,1206,1190],{},"Width of the quiet zone around the code, in modules. See ",[488,1207,1022],{"href":1208},"#quiet-zone",[711,1210,1084],{"id":1084},[326,1212,1156,1213,1215,1163,1217],{},[330,1214,1159],{},[1161,1216],{},[330,1218,1219],{},"''",[326,1221,1222,1223,1225],{},"Accessible label exposed via ",[330,1224,1088],{}," on the table.",[343,1227,1229],{"id":1228},"html-size","HTML size",[326,1231,1232,1233,848],{},"This component may output tens or even hundreds of KB-worth of HTML for large or complex QR codes, severely increasing the risk of ",[488,1234,1236],{"href":1235},"\u002Fdocs\u002Fglossary#gmail-clipping","Gmail clipping",[326,1238,1239,1240,1242],{},"Knowing this, you should avoid rendering the same QR code multiple times in the same email, for example showing a linked QR code for mobile and a regular QR code for desktop, because of Outlook's lack of support for ",[330,1241,566],{}," around tables.",[326,1244,1245],{},"In such cases, consider using an image-based QR code instead.",[343,1247,1249],{"id":1248},"examples","Examples",[326,1251,1252,1253,1255],{},"The component just encodes whatever string you pass to ",[330,1254,450],{},". The conventions below are standard QR data formats that phone camera apps recognize natively — no app required on the recipient's side.",[711,1257,1259],{"id":1258},"contact-info","Contact info",[326,1261,1262,1263,1267],{},"For compact contacts, ",[1264,1265,1266],"strong",{},"MECARD"," fits in a small matrix:",[348,1269,1272],{"className":581,"code":1270,"filename":1271,"language":353,"meta":354,"style":354},"\u003CQrCode\n  value=\"MECARD:N:Doe,Jane;TEL:+15551234567;EMAIL:jane@example.com;ORG:Acme Inc.;URL:https:\u002F\u002Fexample.com;;\"\n  alt=\"Save Jane Doe's contact\"\n\u002F>\n","emails\u002Fsignature.vue",[330,1273,1274,1280,1293,1307],{"__ignoreMap":354},[358,1275,1276,1278],{"class":360,"line":18},[358,1277,364],{"class":363},[358,1279,792],{"class":367},[358,1281,1282,1284,1286,1288,1291],{"class":360,"line":13},[358,1283,797],{"class":401},[358,1285,405],{"class":363},[358,1287,408],{"class":363},[358,1289,1290],{"class":411},"MECARD:N:Doe,Jane;TEL:+15551234567;EMAIL:jane@example.com;ORG:Acme Inc.;URL:https:\u002F\u002Fexample.com;;",[358,1292,806],{"class":363},[358,1294,1295,1298,1300,1302,1305],{"class":360,"line":32},[358,1296,1297],{"class":401},"  alt",[358,1299,405],{"class":363},[358,1301,408],{"class":363},[358,1303,1304],{"class":411},"Save Jane Doe's contact",[358,1306,806],{"class":363},[358,1308,1309],{"class":360,"line":27},[358,1310,826],{"class":825},[326,1312,1313],{},"Grammar:",[1315,1316,1317,1323,1329,1335,1341,1347,1352],"ul",{},[1318,1319,1320],"li",{},[330,1321,1322],{},"N:Last,First",[1318,1324,1325,1328],{},[330,1326,1327],{},"TEL:"," phone (E.164 format recommended)",[1318,1330,1331,1334],{},[330,1332,1333],{},"EMAIL:"," address",[1318,1336,1337,1340],{},[330,1338,1339],{},"ORG:"," organization",[1318,1342,1343,1346],{},[330,1344,1345],{},"URL:"," website",[1318,1348,1349],{},[330,1350,1351],{},"ADR:,,Street,City,State,Postal,Country",[1318,1353,1354,1357],{},[330,1355,1356],{},"NOTE:"," free-form text",[326,1359,1360,1361,1364,1365,1367,1368,1370],{},"For richer fields (photo, multiple phones, birthday, etc.), use ",[1264,1362,1363],{},"vCard 3.0",". The matrix is larger, so bump ",[330,1366,1173],{}," to ",[330,1369,949],{}," for reliable scanning:",[348,1372,1374],{"className":581,"code":1373,"filename":1271,"language":353,"meta":354,"style":354},"\u003Cscript setup>\n  const vcard = `BEGIN:VCARD\nVERSION:3.0\nN:Doe;Jane\nFN:Jane Doe\nORG:Acme Inc.\nTEL;TYPE=CELL:+15551234567\nEMAIL:jane@example.com\nURL:https:\u002F\u002Fexample.com\nEND:VCARD`\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CQrCode :value=\"vcard\" ecc=\"Q\" alt=\"Save Jane Doe's contact\" \u002F>\n\u003C\u002Ftemplate>\n",[330,1375,1376,1388,1407,1412,1417,1422,1427,1432,1437,1442,1450,1458,1462,1470,1511],{"__ignoreMap":354},[358,1377,1378,1380,1383,1386],{"class":360,"line":18},[358,1379,364],{"class":363},[358,1381,1382],{"class":367},"script",[358,1384,1385],{"class":401}," setup",[358,1387,371],{"class":363},[358,1389,1390,1394,1398,1401,1404],{"class":360,"line":13},[358,1391,1393],{"class":1392},"sIihq","  const",[358,1395,1397],{"class":1396},"skd8d"," vcard",[358,1399,1400],{"class":367}," =",[358,1402,1403],{"class":363}," `",[358,1405,1406],{"class":411},"BEGIN:VCARD\n",[358,1408,1409],{"class":360,"line":32},[358,1410,1411],{"class":411},"VERSION:3.0\n",[358,1413,1414],{"class":360,"line":27},[358,1415,1416],{"class":411},"N:Doe;Jane\n",[358,1418,1419],{"class":360,"line":52},[358,1420,1421],{"class":411},"FN:Jane Doe\n",[358,1423,1424],{"class":360,"line":128},[358,1425,1426],{"class":411},"ORG:Acme Inc.\n",[358,1428,1429],{"class":360,"line":124},[358,1430,1431],{"class":411},"TEL;TYPE=CELL:+15551234567\n",[358,1433,1434],{"class":360,"line":48},[358,1435,1436],{"class":411},"EMAIL:jane@example.com\n",[358,1438,1439],{"class":360,"line":23},[358,1440,1441],{"class":411},"URL:https:\u002F\u002Fexample.com\n",[358,1443,1444,1447],{"class":360,"line":140},[358,1445,1446],{"class":411},"END:VCARD",[358,1448,1449],{"class":363},"`\n",[358,1451,1452,1454,1456],{"class":360,"line":56},[358,1453,440],{"class":363},[358,1455,1382],{"class":367},[358,1457,371],{"class":363},[358,1459,1460],{"class":360,"line":80},[358,1461,625],{"emptyLinePlaceholder":14},[358,1463,1464,1466,1468],{"class":360,"line":36},[358,1465,364],{"class":363},[358,1467,368],{"class":367},[358,1469,371],{"class":363},[358,1471,1472,1474,1476,1479,1481,1483,1486,1488,1491,1493,1495,1497,1499,1501,1503,1505,1507,1509],{"class":360,"line":73},[358,1473,376],{"class":363},[358,1475,115],{"class":367},[358,1477,1478],{"class":401}," :value",[358,1480,405],{"class":363},[358,1482,408],{"class":363},[358,1484,1485],{"class":411},"vcard",[358,1487,408],{"class":363},[358,1489,1490],{"class":401}," ecc",[358,1492,405],{"class":363},[358,1494,408],{"class":363},[358,1496,949],{"class":411},[358,1498,408],{"class":363},[358,1500,1120],{"class":401},[358,1502,405],{"class":363},[358,1504,408],{"class":363},[358,1506,1304],{"class":411},[358,1508,408],{"class":363},[358,1510,522],{"class":363},[358,1512,1513,1515,1517],{"class":360,"line":132},[358,1514,440],{"class":363},[358,1516,368],{"class":367},[358,1518,371],{"class":363},[558,1520,1521],{"type":560},[326,1522,1523,1524,848],{},"Complex QR data significantly increases the number of modules in the code, resulting in a higher HTML size and increased risk of ",[488,1525,1236],{"href":1235},[711,1527,1529],{"id":1528},"deep-app-url","Deep app URL",[326,1531,1532,1533,1536,1537,1540],{},"For an app you control, prefer ",[1264,1534,1535],{},"Universal Links (iOS) \u002F App Links (Android)"," — a regular ",[330,1538,1539],{},"https:\u002F\u002F"," URL the OS routes to your installed app, with a web fallback when the app isn't installed:",[348,1542,1545],{"className":581,"code":1543,"filename":1544,"language":353,"meta":354,"style":354},"\u003CQrCode\n  value=\"https:\u002F\u002Fapp.example.com\u002Forders\u002Fabc123?utm_source=email_qr\"\n  alt=\"Open order in the Acme app\"\n\u002F>\n","emails\u002Forder-confirmation.vue",[330,1546,1547,1553,1566,1579],{"__ignoreMap":354},[358,1548,1549,1551],{"class":360,"line":18},[358,1550,364],{"class":363},[358,1552,792],{"class":367},[358,1554,1555,1557,1559,1561,1564],{"class":360,"line":13},[358,1556,797],{"class":401},[358,1558,405],{"class":363},[358,1560,408],{"class":363},[358,1562,1563],{"class":411},"https:\u002F\u002Fapp.example.com\u002Forders\u002Fabc123?utm_source=email_qr",[358,1565,806],{"class":363},[358,1567,1568,1570,1572,1574,1577],{"class":360,"line":32},[358,1569,1297],{"class":401},[358,1571,405],{"class":363},[358,1573,408],{"class":363},[358,1575,1576],{"class":411},"Open order in the Acme app",[358,1578,806],{"class":363},[358,1580,1581],{"class":360,"line":27},[358,1582,826],{"class":825},[326,1584,1585,1586,1589],{},"A ",[1264,1587,1588],{},"custom URL scheme"," opens the app directly when installed, but fails silently when it isn't (no web fallback):",[348,1591,1593],{"className":581,"code":1592,"language":353,"meta":354,"style":354},"\u003CQrCode value=\"acme:\u002F\u002Forders\u002Fabc123\" alt=\"Open order in the app\" \u002F>\n",[330,1594,1595],{"__ignoreMap":354},[358,1596,1597,1599,1601,1603,1605,1607,1610,1612,1614,1616,1618,1621,1623],{"class":360,"line":18},[358,1598,364],{"class":363},[358,1600,115],{"class":367},[358,1602,402],{"class":401},[358,1604,405],{"class":363},[358,1606,408],{"class":363},[358,1608,1609],{"class":411},"acme:\u002F\u002Forders\u002Fabc123",[358,1611,408],{"class":363},[358,1613,1120],{"class":401},[358,1615,405],{"class":363},[358,1617,408],{"class":363},[358,1619,1620],{"class":411},"Open order in the app",[358,1622,408],{"class":363},[358,1624,522],{"class":363},[326,1626,1627,1628,1630],{},"If you need both behaviors, point the QR at an ",[330,1629,1539],{}," URL on a domain configured for Universal Links and App Links. The OS handles dispatch — the user just scans.",[1632,1633,1634],"style",{},"html pre.shiki code .sGGKt, html code.shiki .sGGKt{--shiki-default:#7B6995}html pre.shiki code .sb4Pa, html code.shiki .sb4Pa{--shiki-default:#74DFC4}html pre.shiki code .sZNF3, html code.shiki .sZNF3{--shiki-default:#EB64B9}html pre.shiki code .sXiT_, html code.shiki .sXiT_{--shiki-default:#B4DCE7}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sVsQ9, html code.shiki .sVsQ9{--shiki-default:#91889B}html pre.shiki code .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}html pre.shiki code .s0EtI, html code.shiki .s0EtI{--shiki-default:#B381C5}html pre.shiki code .sIihq, html code.shiki .sIihq{--shiki-default:#A96BC0}html pre.shiki code .skd8d, html code.shiki .skd8d{--shiki-default:#FFE261}",{"title":354,"searchDepth":13,"depth":13,"links":1636},[1637,1638,1639,1644,1645,1646,1647,1648,1654,1655],{"id":345,"depth":13,"text":346},{"id":570,"depth":13,"text":571},{"id":708,"depth":13,"text":709,"children":1640},[1641,1642,1643],{"id":713,"depth":32,"text":714},{"id":768,"depth":32,"text":769},{"id":851,"depth":32,"text":852},{"id":898,"depth":13,"text":899},{"id":1021,"depth":13,"text":1022},{"id":1077,"depth":13,"text":1078},{"id":1137,"depth":13,"text":1138},{"id":1150,"depth":13,"text":1151,"children":1649},[1650,1651,1652,1653],{"id":450,"depth":32,"text":450},{"id":1173,"depth":32,"text":1173},{"id":1027,"depth":32,"text":1027},{"id":1084,"depth":32,"text":1084},{"id":1228,"depth":13,"text":1229},{"id":1248,"depth":13,"text":1249,"children":1656},[1657,1658],{"id":1258,"depth":32,"text":1259},{"id":1528,"depth":32,"text":1529},"Renders a scannable QR code as a Tailwind-styled, email-safe table.","md",{},{"title":115,"description":1659},"docs\u002Fcomponents\u002Fqrcode","iWaq6wopItjomMv5jGYQX5WcyVrEs7akXYk6y1CnIVk",1781015441695]