+<!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/e46b3e9edb12e1cf.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-f3b60f965651ea58.js"/><script src="/_next/static/chunks/npm.next-f67df17f-2a46d6683820b29c.js" async=""></script><script src="/_next/static/chunks/npm.next-4a7382ad-707f40d6460cf1f7.js" async=""></script><script src="/_next/static/chunks/npm.next-4e8e7ca0-8a346e8ca5633018.js" async=""></script><script src="/_next/static/chunks/npm.next-fc717cc5-383de483f08c0a17.js" async=""></script><script src="/_next/static/chunks/npm.next-a6a69d38-18d1f947f5626fc6.js" async=""></script><script src="/_next/static/chunks/npm.next-4ed31d89-47319324efd59dab.js" async=""></script><script src="/_next/static/chunks/npm.next-359a1f64-e6c211fc445a6c5a.js" async=""></script><script src="/_next/static/chunks/npm.next-4aa88247-51d3148528a101d5.js" async=""></script><script src="/_next/static/chunks/npm.next-6808aa01-5a4af40ae82e7308.js" async=""></script><script src="/_next/static/chunks/npm.next-c3a08eae-44c87345e67fae02.js" async=""></script><script src="/_next/static/chunks/npm.next-ff30e0d3-bc02f3c05bbcf93f.js" async=""></script><script src="/_next/static/chunks/npm.next-0fbe0e3f-e138342086b81a20.js" async=""></script><script src="/_next/static/chunks/npm.next-a73c26c6-8772f144077b2410.js" async=""></script><script src="/_next/static/chunks/npm.next-2ac4632b-fe70b323990a1509.js" async=""></script><script src="/_next/static/chunks/npm.next-9a66d3c2-97cca9c0f5b7a080.js" async=""></script><script src="/_next/static/chunks/npm.next-7b390a09-74ff56829fbe2627.js" async=""></script><script src="/_next/static/chunks/npm.next-2898f16f-dc1a8883ba79bb5c.js" async=""></script><script src="/_next/static/chunks/main-app-63e3efcec1b5420f.js" async=""></script><script src="/_next/static/chunks/npm.radix-ui-1b5bad1dba12da36.js" async=""></script><script src="/_next/static/chunks/npm.tailwind-merge-df2b7267cd74c788.js" async=""></script><script src="/_next/static/chunks/1547-7d8c3c851dac1f13.js" async=""></script><script src="/_next/static/chunks/app/layout-02a402f3deb78d76.js" async=""></script><meta name="robots" content="noindex"/><meta name="next-size-adjust" content=""/><title>404: This page could not be found.</title><title>Magic UI - Previewer</title><meta name="description" content="Choose the best variant of the component"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body><script>((e,t,r,n,o,a,i,s)=>{let l=document.documentElement,u=["light","dark"];function c(t){(Array.isArray(e)?e:[e]).forEach(e=>{let r="class"===e,n=r&&a?o.map(e=>a[e]||e):o;r?(l.classList.remove(...n),l.classList.add(a&&a[t]?a[t]:t)):l.setAttribute(e,t)}),s&&u.includes(t)&&(l.style.colorScheme=t)}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"><header class="border-b border-border/40"><div class="container mx-auto px-[var(--container-x-padding)] max-w-[3680px] [--container-x-padding:20px] min-720:[--container-x-padding:24px] min-1280:[--container-x-padding:32px] min-1536:[--container-x-padding:80px]"><div class="flex h-14 items-center justify-between py-0"><div class="flex items-center gap-1 text-sm"><span class="font-medium">Magic</span> by 21st.dev</div><div class="flex gap-2"><a target="_blank" href="https://discord.gg/Qx4rFunHfm"><button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 disabled:opacity-50 disabled:pointer-events-none disabled:border-primary/75 disabled:shadow-[inset_0_0.5px_0.5px_rgba(255,255,255,0.15)] [&_svg]:pointer-events-none [&_svg]:shrink-0 border border-input bg-background shadow-sm shadow-black/5 hover:bg-accent hover:text-accent-foreground h-8 rounded-lg px-3">Report a bug</button></a><div class="flex items-center gap-4"><fieldset class="flex items-center rounded-full border border-border/40 bg-background"><legend class="sr-only">Select a display theme:</legend><span><input type="radio" id="theme-switch-light" class="sr-only peer" name="theme" checked="" value="light"/><label for="theme-switch-light" class="inline-flex items-center justify-center rounded-full p-1.5 text-sm cursor-pointer text-muted-foreground hover:text-foreground peer-checked:bg-accent peer-checked:text-foreground"><span class="sr-only">light</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun h-4 w-4"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg></label></span><span><input type="radio" id="theme-switch-dark" class="sr-only peer" name="theme" value="dark"/><label for="theme-switch-dark" class="inline-flex items-center justify-center rounded-full p-1.5 text-sm cursor-pointer text-muted-foreground hover:text-foreground peer-checked:bg-accent peer-checked:text-foreground"><span class="sr-only">dark</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon h-4 w-4"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg></label></span></fieldset></div></div></div></div></header><div style="font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>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)}}</style><h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1><div style="display:inline-block"><h2 style="font-size:14px;font-weight:400;line-height:49px;margin:0">This page could not be found.</h2></div></div></div><div class="mt-auto"><footer class="border-t border-border/40"><div class="container mx-auto px-[var(--container-x-padding)] max-w-[3680px] [--container-x-padding:20px] min-720:[--container-x-padding:24px] min-1280:[--container-x-padding:32px] min-1536:[--container-x-padding:80px]"><div class="flex flex-col h-auto py-4 gap-4 text-center md:flex-row md:h-14 md:items-center md:justify-between md:py-0"><div class="flex flex-wrap items-center justify-center gap-1 text-sm text-muted-foreground md:flex-nowrap md:justify-start">The source code is available on<!-- --> <a target="_blank" class="font-medium underline-offset-4 hover:underline" href="https://github.com/21st-dev/magic-mcp">GitHub</a>.</div><nav class="flex items-center justify-center gap-4 md:justify-end"><a target="_blank" class="text-sm text-muted-foreground hover:underline underline-offset-4" href="https://discord.gg/Qx4rFunHfm">Discord</a></nav></div></div></footer></div></div><script src="/_next/static/chunks/webpack-f3b60f965651ea58.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[14627,[\"2965\",\"static/chunks/npm.radix-ui-1b5bad1dba12da36.js\",\"3675\",\"static/chunks/npm.tailwind-merge-df2b7267cd74c788.js\",\"1547\",\"static/chunks/1547-7d8c3c851dac1f13.js\",\"7177\",\"static/chunks/app/layout-02a402f3deb78d76.js\"],\"ThemeProvider\"]\n3:I[71244,[\"2965\",\"static/chunks/npm.radix-ui-1b5bad1dba12da36.js\",\"3675\",\"static/chunks/npm.tailwind-merge-df2b7267cd74c788.js\",\"1547\",\"static/chunks/1547-7d8c3c851dac1f13.js\",\"7177\",\"static/chunks/app/layout-02a402f3deb78d76.js\"],\"Header\"]\n4:I[15244,[],\"\"]\n5:I[43866,[],\"\"]\n6:I[48173,[\"2965\",\"static/chunks/npm.radix-ui-1b5bad1dba12da36.js\",\"3675\",\"static/chunks/npm.tailwind-merge-df2b7267cd74c788.js\",\"1547\",\"static/chunks/1547-7d8c3c851dac1f13.js\",\"7177\",\"static/chunks/app/layout-02a402f3deb78d76.js\"],\"\"]\n7:I[86213,[],\"OutletBoundary\"]\n9:I[86213,[],\"MetadataBoundary\"]\nb:I[86213,[],\"ViewportBoundary\"]\nd:I[34835,[],\"\"]\n:HL[\"/_next/static/media/e11418ac562b8ac1-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/e46b3e9edb12e1cf.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"hSXLwSDgOkG_LPRfIgIeR\",\"p\":\"\",\"c\":[\"\",\"_not-found\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"/_not-found\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/e46b3e9edb12e1cf.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"__className_3a0388\",\"children\":[\"$\",\"body\",null,{\"children\":[\"$\",\"$L2\",null,{\"attribute\":\"class\",\"defaultTheme\":\"system\",\"enableSystem\":true,\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col min-h-screen\",\"children\":[[\"$\",\"$L3\",null,{}],[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"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\"}],[\"$\",\"div\",null,{\"className\":\"mt-auto\",\"children\":[\"$\",\"footer\",null,{\"className\":\"border-t border-border/40\",\"children\":[\"$\",\"div\",null,{\"className\":\"container mx-auto px-[var(--container-x-padding)] max-w-[3680px] [--container-x-padding:20px] min-720:[--container-x-padding:24px] min-1280:[--container-x-padding:32px] min-1536:[--container-x-padding:80px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col h-auto py-4 gap-4 text-center md:flex-row md:h-14 md:items-center md:justify-between md:py-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center justify-center gap-1 text-sm text-muted-foreground md:flex-nowrap md:justify-start\",\"children\":[\"The source code is available on\",\" \",[\"$\",\"$L6\",null,{\"href\":\"https://github.com/21st-dev/magic-mcp\",\"target\":\"_blank\",\"className\":\"font-medium underline-offset-4 hover:underline\",\"children\":\"GitHub\"}],\".\"]}],[\"$\",\"nav\",null,{\"className\":\"flex items-center justify-center gap-4 md:justify-end\",\"children\":[\"$\",\"$L6\",null,{\"href\":\"https://discord.gg/Qx4rFunHfm\",\"target\":\"_blank\",\"className\":\"text-sm text-muted-foreground hover:underline underline-offset-4\",\"children\":\"Discord\"}]}]]}]}]}]}]]}]}]}]}]]}],{\"children\":[\"/_not-found\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"/_not-found\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:children:props:children:props:children:props:children:1:props:notFound:1:1:props:style\",\"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\":\"$0:f:0:1:1:props:children:1:props:children:props:children:props:children:props:children:1:props:notFound:1:1:props:children:props:children:1:props:style\",\"children\":404}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:children:props:children:props:children:props:children:1:props:notFound:1:1:props:children:props:children:2:props:style\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:children:props:children:props:children:props:children:1:props:notFound:1:1:props:children:props:children:2:props:children:props:style\",\"children\":\"This page could not be found.\"}]}]]}]}]],null,[\"$\",\"$L7\",null,{\"children\":\"$L8\"}]]}],{},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[[\"$\",\"meta\",null,{\"name\":\"robots\",\"content\":\"noindex\"}],[\"$\",\"$1\",\"DuNxuIiiRS3mlCROFYfnC\",{\"children\":[[\"$\",\"$L9\",null,{\"children\":\"$La\"}],[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$d\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"c:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\na:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"Magic UI - Previewer\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"Choose the best variant of the component\"}]]\n"])</script><script>self.__next_f.push([1,"8:null\n"])</script></body></html>
0 commit comments