@21st-dev/magic

Version:

Magic MCP UI builder by 21st.dev

1 lines • 8.56 kB

HTML

<!DOCTYPE html><html lang="en" class="__className_3a0388"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/e11418ac562b8ac1-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/c69069ef360bb592.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-ad7b385bfd3912f1.js"/><script src="/_next/static/chunks/4bd1b696-43405c4c63b16f1e.js" async=""></script><script src="/_next/static/chunks/684-854029872b2557a5.js" async=""></script><script src="/_next/static/chunks/main-app-94972e5895a97dc0.js" async=""></script><script src="/_next/static/chunks/486-ef3b50ab36848717.js" async=""></script><script src="/_next/static/chunks/app/layout-ec4818780395eba1.js" async=""></script><script src="/_next/static/chunks/e58a7f8f-a50156891f8e08f5.js" async=""></script><script src="/_next/static/chunks/363642f4-6bed2928d42f26a7.js" async=""></script><script src="/_next/static/chunks/3007ef68-6cbc26ee4bfd940a.js" async=""></script><script src="/_next/static/chunks/0e5ce63c-24104e7d82819324.js" async=""></script><script src="/_next/static/chunks/122-5c2b0325e6ca7bd4.js" async=""></script><script src="/_next/static/chunks/app/page-d2793f8d42e518a5.js" async=""></script><meta name="next-size-adjust" content=""/><title>Magic MCP - Previewer</title><meta name="description" content="Choose the best variant of the component"/><link rel="icon" href="/favicon.ico"/><link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png"/><link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png"/><link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" type="image/png"/><script>document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section><script>((e,t,r,n,a,o,i,s)=>{let u=document.documentElement,l=["light","dark"];function c(t){var r;(Array.isArray(e)?e:[e]).forEach(e=>{let r="class"===e,n=r&&o?a.map(e=>o[e]||e):a;r?(u.classList.remove(...n),u.classList.add(o&&o[t]?o[t]:t)):u.setAttribute(e,t)}),r=t,s&&l.includes(r)&&(u.style.colorScheme=r)}if(n)c(n);else try{let e=localStorage.getItem(t)||r,n=i&&"system"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e;c(n)}catch(e){}})("class","theme","system",null,["light","dark"],null,true,true)</script><div class="flex flex-col min-h-screen"><main class="flex flex-col h-screen"><div class="flex items-center justify-center h-screen"><div class="animate-pulse flex flex-col items-center"><div class="h-8 w-32 bg-muted rounded mb-4"></div><div class="h-4 w-48 bg-muted rounded"></div></div></div></main></div><script src="/_next/static/chunks/webpack-ad7b385bfd3912f1.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[56671,[\"486\",\"static/chunks/486-ef3b50ab36848717.js\",\"177\",\"static/chunks/app/layout-ec4818780395eba1.js\"],\"Toaster\"]\n3:I[99304,[\"486\",\"static/chunks/486-ef3b50ab36848717.js\",\"177\",\"static/chunks/app/layout-ec4818780395eba1.js\"],\"ThemeProvider\"]\n4:I[87555,[],\"\"]\n5:I[31295,[],\"\"]\n6:I[73384,[\"193\",\"static/chunks/e58a7f8f-a50156891f8e08f5.js\",\"79\",\"static/chunks/363642f4-6bed2928d42f26a7.js\",\"554\",\"static/chunks/3007ef68-6cbc26ee4bfd940a.js\",\"105\",\"static/chunks/0e5ce63c-24104e7d82819324.js\",\"486\",\"static/chunks/486-ef3b50ab36848717.js\",\"122\",\"static/chunks/122-5c2b0325e6ca7bd4.js\",\"974\",\"static/chunks/app/page-d2793f8d42e518a5.js\"],\"default\"]\n7:I[59665,[],\"MetadataBoundary\"]\n9:I[59665,[],\"OutletBoundary\"]\nc:I[74911,[],\"AsyncMetadataOutlet\"]\ne:I[59665,[],\"ViewportBoundary\"]\n10:I[26614,[],\"\"]\n:HL[\"/_next/static/media/e11418ac562b8ac1-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/c69069ef360bb592.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"hpESvUaHcMb5NxYCPP9vM\",\"p\":\"\",\"c\":[\"\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/c69069ef360bb592.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"__className_3a0388\",\"children\":[\"$\",\"body\",null,{\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"$L3\",null,{\"attribute\":\"class\",\"defaultTheme\":\"system\",\"enableSystem\":true,\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col min-h-screen\",\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]]}]}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"main\",null,{\"className\":\"flex flex-col h-screen\",\"children\":[\"$\",\"$L6\",null,{}]}],[\"$\",\"$L7\",null,{\"children\":\"$L8\"}],null,[\"$\",\"$L9\",null,{\"children\":[\"$La\",\"$Lb\",[\"$\",\"$Lc\",null,{\"promise\":\"$@d\"}]]}]]}],{},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"ESsqx_IgeiPcro8mFV8bP\",{\"children\":[[\"$\",\"$Le\",null,{\"children\":\"$Lf\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$10\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"11:\"$Sreact.suspense\"\n12:I[74911,[],\"AsyncMetadata\"]\n8:[\"$\",\"$11\",null,{\"fallback\":null,\"children\":[\"$\",\"$L12\",null,{\"promise\":\"$@13\"}]}]\n"])</script><script>self.__next_f.push([1,"b:null\n"])</script><script>self.__next_f.push([1,"f:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\na:null\n"])</script><script>self.__next_f.push([1,"13:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Magic MCP - Previewer\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Choose the best variant of the component\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"5\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\",\"sizes\":\"180x180\",\"type\":\"image/png\"}]],\"error\":null,\"digest\":\"$undefined\"}\nd:{\"metadata\":\"$13:metadata\",\"error\":null,\"digest\":\"$undefined\"}\n"])</script></body></html>