\n\t\t\x3C/div>\n\t);\n}\n",html:"\x3Cpre class=\"shiki vesper\" style=\"background-color:#101010;color:#FFF\" tabindex=\"0\">\x3Ccode>\x3Cspan class=\"line\">\x3Cspan style=\"color:#A0A0A0\">import\x3C/span>\x3Cspan style=\"color:#FFF\"> { DotPattern } \x3C/span>\x3Cspan style=\"color:#A0A0A0\">from\x3C/span>\x3Cspan style=\"color:#99FFE4\"> \"@/ui/dot-pattern\"\x3C/span>\x3Cspan style=\"color:#FFF\">;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#A0A0A0\">export\x3C/span>\x3Cspan style=\"color:#A0A0A0\"> default\x3C/span>\x3Cspan style=\"color:#A0A0A0\"> function\x3C/span>\x3Cspan style=\"color:#FFC799\"> DotPatternDemo\x3C/span>\x3Cspan style=\"color:#FFF\">() {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#A0A0A0\">\treturn\x3C/span>\x3Cspan style=\"color:#FFF\"> (\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#A0A0A0\">\t\t<\x3C/span>\x3Cspan style=\"color:#FFC799\">div\x3C/span>\x3Cspan style=\"color:#A0A0A0\"> class=\x3C/span>\x3Cspan style=\"color:#99FFE4\">\"relative flex items-center justify-center h-[500px] w-full\"\x3C/span>\x3Cspan style=\"color:#A0A0A0\">>\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#A0A0A0\">\t\t\t<\x3C/span>\x3Cspan style=\"color:#FFC799\">p\x3C/span>\x3Cspan style=\"color:#A0A0A0\"> class=\x3C/span>\x3Cspan style=\"color:#99FFE4\">\"z-10 text-5xl font-bold\"\x3C/span>\x3Cspan style=\"color:#A0A0A0\">>\x3C/span>\x3Cspan style=\"color:#FFF\">Dot Pattern\x3C/span>\x3Cspan style=\"color:#A0A0A0\"></\x3C/span>\x3Cspan style=\"color:#FFC799\">p\x3C/span>\x3Cspan style=\"color:#A0A0A0\">>\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#A0A0A0\">\t\t\t<\x3C/span>\x3Cspan style=\"color:#FFC799\">DotPattern\x3C/span>\x3Cspan style=\"color:#A0A0A0\"> class=\x3C/span>\x3Cspan style=\"color:#99FFE4\">\"[mask-image:radial-gradient(350px_circle_at_center,white,transparent)]\"\x3C/span>\x3Cspan style=\"color:#A0A0A0\"> />\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#A0A0A0\">\t\t</\x3C/span>\x3Cspan style=\"color:#FFC799\">div\x3C/span>\x3Cspan style=\"color:#A0A0A0\">>\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#FFF\">\t);\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#FFF\">}\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\x3C/code>\x3C/pre>"});$R[7]($R[5],"\x3Cpre class=\"shiki vesper\" style=\"background-color:#101010;color:#FFF\" tabindex=\"0\">\x3Ccode>\x3Cspan class=\"line\">\x3Cspan style=\"color:#FFC799\">npx\x3C/span>\x3Cspan style=\"color:#99FFE4\"> @mystic-ui/cli\x3C/span>\x3Cspan style=\"color:#99FFE4\"> add\x3C/span>\x3Cspan style=\"color:#99FFE4\"> dot-pattern\x3C/span>\x3C/span>\x3C/code>\x3C/pre>");$R[7]($R[3],!0);