28:o1,#28:oe57,1:I[768017,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"HTTPAccessFallbackBoundary"] 2:I[479520,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],""] 3:I[305215,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"ThemeProvider"] 4:"$Sreact.suspense" 5:I[357003,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"TRPCReactProvider"] 6:I[492605,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"BetterModalProvider"] 7:I[12985,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"NuqsAdapter"] :HL["/_next/static/immutable/chunks/3-y5jlwadbcp9.css","style"] :HL["/_next/static/immutable/chunks/1_idk1l4ecx9m.css","style"] 17:X 18:X 1d:X 1e:X 20:X 21:X 22:X 28:o141a,0:{"f":[[["",{"children":[["registry","weinc","d",["(.)[registry]","account","api","guides","legal","r","saved","search","setup","sign-in","sign-out","sitemap-index.xml","sitemaps","tb","tools"]],{"children":[["item","bento-grid-collection-with-ten-tailwind-layouts-grid-template-areas-and-copyable-code","d",["search"]],{"children":["__PAGE__",{},"$undefined","$undefined",16546]},"$undefined","$undefined",16482]},"$undefined","$undefined",16450],"modal":["(__SLOT__)",{"children":[["registry","weinc","d",["(.)[registry]","account","api","guides","legal","r","saved","search","setup","sign-in","sign-out","sitemap-index.xml","sitemaps","tb","tools"]],{"children":[["item","bento-grid-collection-with-ten-tailwind-layouts-grid-template-areas-and-copyable-code","d",["search"]],{"children":["__PAGE__",{},"$undefined","$undefined",16418]},"$undefined","$undefined",16482]},"$undefined","$undefined",16482]},"$undefined","$undefined",16450]},"$undefined","$undefined",16402],[["$","$L1","c",{"notFound":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/3-y5jlwadbcp9.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/1_idk1l4ecx9m.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/immutable/chunks/3arlv5bvukoo2.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/immutable/chunks/39v64hmfyo-sr.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/immutable/chunks/2nvof3-29tvc3.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/_next/static/immutable/chunks/3tjobt77z_9dj.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/_next/static/immutable/chunks/04j_o97cgxn2x.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/_next/static/immutable/chunks/3upr08c9vtj8w.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/_next/static/immutable/chunks/1ww0328si-u8x.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/_next/static/immutable/chunks/11mfl5ymqld9-.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/_next/static/immutable/chunks/2xxcqy6ppds3l.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/_next/static/immutable/chunks/1bpgyrs5qflhu.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/_next/static/immutable/chunks/43_s7jweyypoh.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/_next/static/immutable/chunks/0p6vao205o1jc.js","async":true,"nonce":"$undefined"}]],["$","html",null,{"lang":"en","className":"chakra_petch_1af0601e-module__OA5m0G__variable dm_sans_d89fb377-module__B_rulq__variable ibm_plex_mono_b1df0642-module__ou0oxa__variable","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","script",null,{"dangerouslySetInnerHTML":{"__html":"(function(){var v=[\"makers\",\"ai\",\"slop-police\"];document.documentElement.dataset.hireVariant=v[Math.floor(Math.random()*v.length)]})()"}}],["$","$L2",null,{"async":true,"data-website-id":"211088d7-313a-4d73-abc7-2a091c652668","src":"/u/script.js"}]]}],["$","body",null,{"className":"antialiased","children":["$","$L3",null,{"attribute":"class","defaultTheme":"dark","disableTransitionOnChange":true,"enableSystem":false,"children":["$","$4",null,{"children":["$","$L5",null,{"children":["$","$L6",null,{"children":[["$","$L7",null,{"children":["$","div",null,{"className":"flex min-h-svh flex-col","children":[[["$","a","makers",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=makers","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"makers","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=makers]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":["$L8","$L9"]}],"$La","$Lb"]}]}],"$Lc","$Ld"],"$Le","$Lf","$undefined","$L10"]}]}],"$L11","$L12"]}]}]}]}]}]]}]],"children":["$0:f:0:1:0:props:notFound:0","$L13"]}],{"children":["$L14",{"children":["$L15",{"children":["$L16",{},null,false,"$17"]},null,false,"$18"]},null,false,"$18"],"modal":["$L19",{"children":["$L1a",{"children":["$L1b",{"children":["$L1c",{},null,false,"$1d"]},null,false,"$18"]},null,false,"$18"]},null,false,"$18"]},null,false,"$1e"],"$L1f",false]],"q":"","i":true,"S":false,"h":"$20","r":"$21","s":"$22","a":"$@23","u":"$@24"} 28:o1000,25:I[522016,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],""] 26:I[332862,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"ThemeToggle"] 27:I[618898,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"UserButton"] 28:I[799157,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"Sheet"] 29:I[799157,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"SheetTrigger"] 2a:I[799157,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_ne28:o1000,xt/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"SheetContent"] 2b:I[799157,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"SheetTitle"] 2c:I[799157,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"SheetDescription"] 2d:I[767877,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"PrimaryNavigation"] 36:I[246331,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"Toaster"] 37:I[994245,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"AffiliateToast"] 41:"$Sreact.fragment" 42:I[339756,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"default"] 43:I[837457,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"default"] 45:I[897367,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"OutletBoundary"] 47:I[897367,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"ViewportBoundary"] 49:I[897367,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"MetadataBoundary"] 8:["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}] 9:["$","span",null,{"className":"sr-o28:o425,nly md:not-sr-only","children":"1 slot open this month"}] a:["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"By the makers of shadcnregistry"}],["$","span",null,{"className":"hidden sm:inline","children":"We built shadcnregistry. Now we build your product."}]]}] b:["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Book a call"}],["$","span",null,{"className":"hidden sm:inline","children":"Check availability"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}] 28:o7b3,c:["$","a","ai",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=ai","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"ai","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=ai]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"AI features?"}],["$","span",null,{"className":"hidden sm:inline","children":"We build AI features into your product."}]]}],["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Book a call"}],["$","span",null,{"className":"hidden sm:inline","children":"Check availability"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]}] 28:o7dd,d:["$","a","slop-police",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=slop-police","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"slop-police","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=slop-police]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"🚨 Slop police"}],["$","span",null,{"className":"hidden sm:inline","children":"🚨 Slop police: we clean up vibe-coded apps."}]]}],["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Report it"}],["$","span",null,{"className":"hidden sm:inline","children":"Report your app"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]}] 28:o1368,e:[["$","header",null,{"className":"sticky top-0 z-50 border-b bg-background/90 backdrop-blur-md md:hidden","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-16 items-center justify-between","children":[["$","$L25",null,{"href":"/","className":"flex items-center gap-2 font-heading font-semibold text-sm tracking-[-0.02em]","children":[["$","svg",null,{"viewBox":"0 0 900 900","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"size-8","children":[["$","rect",null,{"x":"36","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"36","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"552","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"568","width":"100","height":"100","fill":"currentColor"}]]}],["$","span",null,{"children":"shadcnregistry"}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","$L26",null,{}],["$","$L27",null,{}],["$","$L28",null,{"modal":true,"children":[["$","$L29",null,{"asChild":true,"children":["$","button",null,{"data-slot":"button","className":"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9","aria-label":"Open navigation","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-menu","aria-hidden":"true","children":[["$","path","1lakjw",{"d":"M4 12h16"}],["$","path","19g7jn",{"d":"M4 18h16"}],["$","path","1o0s65",{"d":"M4 6h16"}],"$undefined"]}]}]}],["$","$L2a",null,{"className":"w-[min(22rem,90vw)] rounded-l-xl p-6","children":[["$","$L2b",null,{"className":"text-lg","children":"Tools"}],["$","$L2c",null,{"className":"sr-only","children":"Navigate between registry tools."}],["$","$L2d",null,{"orientation":"vertical","closeOnNavigate":true,"className":"mt-4"}]]}]]}]]}]]}]}],["$","header",null,{"className":"sticky top-0 z-50 hidden border-b bg-background/90 backdrop-blur-md md:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-16 items-center gap-6","children":[["$","$L25",null,{"className":"flex min-w-32 select-none items-center gap-2 font-heading font-semibold text-sm tracking-[-0.02em]","href":"/","children":[["$","svg",null,{"viewBox":"0 0 900 900","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"size-8","children":[["$","rect",null,{"x":"36","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"36","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"552","y":"232","width":"100","height":"100","fill":"currentColor"}],"$L2e","$L2f","$L30","$L31","$L32"]}],"$L33"]}],"$L34","$L35"]}]}]] 28:o6a3,f:["$","main",null,{"className":"flex flex-1 flex-col","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex flex-1 flex-col","children":[[],[[["$","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."}]}]]}]}]],"$f:props:children:props:children:0"]]}]}] 10:["$","footer",null,{"className":"border-t text-muted-foreground text-xs","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex items-center justify-end gap-4 py-5","children":[["$","$L25",null,{"href":"/legal/terms","children":"Terms of Service"}],["$","$L25",null,{"href":"/legal/privacy","children":"Privacy Policy"}]]}]}] 11:["$","$L36",null,{}] 12:["$","$L37",null,{}] 28:o103e,13:["$","html",null,{"lang":"en","className":"chakra_petch_1af0601e-module__OA5m0G__variable dm_sans_d89fb377-module__B_rulq__variable ibm_plex_mono_b1df0642-module__ou0oxa__variable","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","script",null,{"dangerouslySetInnerHTML":{"__html":"(function(){var v=[\"makers\",\"ai\",\"slop-police\"];document.documentElement.dataset.hireVariant=v[Math.floor(Math.random()*v.length)]})()"}}],["$","$L2",null,{"async":true,"data-website-id":"211088d7-313a-4d73-abc7-2a091c652668","src":"/u/script.js"}]]}],["$","body",null,{"className":"antialiased","children":["$","$L3",null,{"attribute":"class","defaultTheme":"dark","disableTransitionOnChange":true,"enableSystem":false,"children":["$","$4",null,{"children":["$","$L5",null,{"children":["$","$L6",null,{"children":[["$","$L7",null,{"children":["$","div",null,{"className":"flex min-h-svh flex-col","children":[[["$","a","makers",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=makers","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"makers","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=makers]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"By the makers of shadcnregistry"}],["$","span",null,{"className":"hidden sm:inline","children":"We built shadcnregistry. Now we build your product."}]]}],["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Book a call"}],["$","span",null,{"className":"hidden sm:inline","children":"Check availability"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]}],["$","a","ai",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=ai","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"ai","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=ai]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"AI features?"}],"$L38"]}],"$L39"]}]}],"$L3a"],"$L3b","$L3c","$L3d","$L3e"]}]}],"$L3f","$L40"]}]}]}]}]}]]}] 28:o2a0,14:["$","$41","c",{"children":[null,["$","$L42",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L43",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 15:["$","$41","c",{"children":[null,["$","$L42",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L43",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 28:odfc,16:["$","$41","c",{"children":[["$","div",null,{"className":"flex min-w-0 flex-1 flex-col py-8","children":["$","$4",null,{"fallback":["$","div",null,{"className":"flex min-h-0 min-w-0 flex-1 flex-col motion-reduce:[&_*]:animate-none","role":"status","aria-label":"Loading item","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md mb-6 h-5 w-64 max-w-full","aria-hidden":true}],["$","div",null,{"className":"grid shrink-0 gap-3","aria-hidden":true,"children":[["$","div",null,{"className":"flex min-w-0 items-start justify-between gap-2 sm:gap-4","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-8 w-56 min-w-0 sm:h-9"}],["$","div",null,{"className":"flex shrink-0 gap-1.5 pt-0.5","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md size-8 sm:w-24"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md size-8"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md size-8"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md size-8"}]]}]]}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-6 w-full max-w-3xl"}]]}],["$","div",null,{"className":"mt-3 shrink-0","aria-hidden":true,"children":["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-10"}]}],["$","div",null,{"className":"mt-3 flex min-h-0 flex-1 flex-col gap-3 motion-reduce:[&_*]:animate-none","aria-hidden":true,"children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-8 shrink-0"}],["$","div",null,{"className":"flex flex-col overflow-hidden border bg-muted/30 h-[70svh] min-h-80 rounded-lg","children":[["$","div",null,{"className":"flex h-11 shrink-0 items-center gap-3 border-b px-3","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-6 w-16"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-40"}]]}],["$","div",null,{"className":"flex min-h-0 flex-1","children":[["$","div",null,{"className":"hidden w-[23%] flex-col gap-3 border-r p-4 md:flex","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-2/3"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/2"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-3/4"}]]}],["$","div",null,{"className":"flex flex-1 flex-col gap-4 p-6","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-2/3"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/2"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-3/4"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/3"}]]}]]}]]}]]}]]}],"children":"$L44"}]}],[["$","script","script-0",{"src":"/_next/static/immutable/chunks/1_kyvgkyokw92.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/immutable/chunks/1lo-zn37dolb5.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/immutable/chunks/1v8k6yxw1rg0u.js","async":true,"nonce":"$undefined"}]],["$","$L45",null,{"children":["$","$4",null,{"name":"Next.MetadataOutlet","children":"$@46"}]}]]}] 28:o51c,19:["$","$41","c",{"children":[null,["$","$L42",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L43",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 1a:["$","$41","c",{"children":[null,["$","$L42",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L43",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 1b:["$","$41","c",{"children":[null,["$","$L42",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L43",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 1c:["$","$41","c",{"children":[null,null,null]}] 1f:["$","$41","h",{"children":[null,["$","$L47","464qD7ZgfF4GbsWX12tFFv",{"children":"$L48"}],["$","div","464qD7ZgfF4GbsWX12tFFm",{"hidden":true,"children":["$","$L49",null,{"children":["$","$4",null,{"name":"Next.Metadata","children":"$L4a"}]}]}]]}] 28:o62f,17:T1,?18:C 1d:T1,?20:T1,?22:300 2e:["$","rect",null,{"x":"440","y":"232","width":"100","height":"100","fill":"currentColor"}] 2f:["$","rect",null,{"x":"764","y":"568","width":"100","height":"100","fill":"currentColor"}] 30:["$","rect",null,{"x":"664","y":"456","width":"100","height":"100","fill":"currentColor"}] 31:["$","rect",null,{"x":"440","y":"456","width":"100","height":"100","fill":"currentColor"}] 32:["$","rect",null,{"x":"440","y":"568","width":"100","height":"100","fill":"currentColor"}] 33:["$","span",null,{"children":"shadcnregistry"}] 34:["$","$L2d",null,{"className":"mx-auto"}] 35:["$","div",null,{"className":"flex min-w-32 items-center justify-end gap-2","children":[["$","$L26",null,{}],["$","$L27",null,{}]]}] 38:["$","span",null,{"className":"hidden sm:inline","children":"We build AI features into your product."}] 39:["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Book a call"}],["$","span",null,{"className":"hidden sm:inline","children":"Check availability"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}] 28:o7de,3a:["$","a","slop-police",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=slop-police","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"slop-police","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=slop-police]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"🚨 Slop police"}],["$","span",null,{"className":"hidden sm:inline","children":"🚨 Slop police: we clean up vibe-coded apps."}]]}],["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Report it"}],["$","span",null,{"className":"hidden sm:inline","children":"Report your app"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]}] 28:o1369,3b:[["$","header",null,{"className":"sticky top-0 z-50 border-b bg-background/90 backdrop-blur-md md:hidden","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-16 items-center justify-between","children":[["$","$L25",null,{"href":"/","className":"flex items-center gap-2 font-heading font-semibold text-sm tracking-[-0.02em]","children":[["$","svg",null,{"viewBox":"0 0 900 900","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"size-8","children":[["$","rect",null,{"x":"36","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"36","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"552","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"568","width":"100","height":"100","fill":"currentColor"}]]}],["$","span",null,{"children":"shadcnregistry"}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","$L26",null,{}],["$","$L27",null,{}],["$","$L28",null,{"modal":true,"children":[["$","$L29",null,{"asChild":true,"children":["$","button",null,{"data-slot":"button","className":"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9","aria-label":"Open navigation","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-menu","aria-hidden":"true","children":[["$","path","1lakjw",{"d":"M4 12h16"}],["$","path","19g7jn",{"d":"M4 18h16"}],["$","path","1o0s65",{"d":"M4 6h16"}],"$undefined"]}]}]}],["$","$L2a",null,{"className":"w-[min(22rem,90vw)] rounded-l-xl p-6","children":[["$","$L2b",null,{"className":"text-lg","children":"Tools"}],["$","$L2c",null,{"className":"sr-only","children":"Navigate between registry tools."}],["$","$L2d",null,{"orientation":"vertical","closeOnNavigate":true,"className":"mt-4"}]]}]]}]]}]]}]}],["$","header",null,{"className":"sticky top-0 z-50 hidden border-b bg-background/90 backdrop-blur-md md:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-16 items-center gap-6","children":[["$","$L25",null,{"className":"flex min-w-32 select-none items-center gap-2 font-heading font-semibold text-sm tracking-[-0.02em]","href":"/","children":[["$","svg",null,{"viewBox":"0 0 900 900","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"size-8","children":[["$","rect",null,{"x":"36","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"36","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"552","y":"232","width":"100","height":"100","fill":"currentColor"}],"$L4b","$L4c","$L4d","$L4e","$L4f"]}],"$L50"]}],"$L51","$L52"]}]}]] 28:o4ac,3c:["$","main",null,{"className":"flex flex-1 flex-col","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex flex-1 flex-col","children":["$","$L42",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L43",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$f:props:children:props:children:1","forbidden":"$undefined","unauthorized":"$undefined"}]}]}] 3d:["$","$L42",null,{"parallelRouterKey":"modal","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L43",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}] 3e:["$","footer",null,{"className":"border-t text-muted-foreground text-xs","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex items-center justify-end gap-4 py-5","children":[["$","$L25",null,{"href":"/legal/terms","children":"Terms of Service"}],["$","$L25",null,{"href":"/legal/privacy","children":"Privacy Policy"}]]}]}] 3f:["$","$L36",null,{}] 40:["$","$L37",null,{}] 28:o2be,4b:["$","rect",null,{"x":"440","y":"232","width":"100","height":"100","fill":"currentColor"}] 4c:["$","rect",null,{"x":"764","y":"568","width":"100","height":"100","fill":"currentColor"}] 4d:["$","rect",null,{"x":"664","y":"456","width":"100","height":"100","fill":"currentColor"}] 4e:["$","rect",null,{"x":"440","y":"456","width":"100","height":"100","fill":"currentColor"}] 4f:["$","rect",null,{"x":"440","y":"568","width":"100","height":"100","fill":"currentColor"}] 50:["$","span",null,{"children":"shadcnregistry"}] 51:["$","$L2d",null,{"className":"mx-auto"}] 52:["$","div",null,{"className":"flex min-w-32 items-center justify-end gap-2","children":[["$","$L26",null,{}],["$","$L27",null,{}]]}] 28:o7f,48:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 28:o37,17:T8,registry20:T8,registry17:T4,item22:300 20:T4,item28:o4b,5a:I[27201,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"IconMark"] 28:o1169,44:["$","div",null,{"className":"flex min-h-0 min-w-0 flex-1 flex-col","children":[["$","div",null,{"className":"pb-6","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5","children":[["$","$41","/",{"children":[false,["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1.5","children":["$","$L25",null,{"href":"/","children":"Registries","data-slot":"breadcrumb-link","className":"hover:text-foreground transition-colors","ref":null}]}]]}],["$","$41","/weinc",{"children":[["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-right","aria-hidden":"true","children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1.5","children":["$","$L25",null,{"href":"/weinc","children":"weinc","data-slot":"breadcrumb-link","className":"hover:text-foreground transition-colors","ref":null}]}]]}],["$","$41","/weinc/bento-grid-collection-with-ten-tailwind-layouts-grid-template-areas-and-copyable-code",{"children":[["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-right","aria-hidden":"true","children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1.5","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"text-foreground font-normal","children":"Bento Grid Layouts: 10 Tailwind Designs With Copyable Code"}]}]]}]]}]}],["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Registries\",\"item\":\"https://shadcnregistry.com/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"weinc\",\"item\":\"https://shadcnregistry.com/weinc\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bento Grid Layouts: 10 Tailwind Designs With Copyable Code\",\"item\":\"https://shadcnregistry.com/weinc/bento-grid-collection-with-ten-tailwind-layouts-grid-template-areas-and-copyable-code\"}]}"}}]]}],["$","header",null,{"className":"min-w-0 shrink-0","children":["$","div",null,{"className":"grid min-w-0 gap-3","children":[["$","div",null,{"className":"flex min-w-0 items-start justify-between gap-2 sm:gap-4","children":[["$","div",null,{"className":"flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-2","children":[["$","h1",null,{"className":"min-w-0 break-words font-semibold text-2xl sm:text-3xl","children":"Bento Grid Layouts: 10 Tailwind Designs With Copyable Code"}],["$","span",null,{"data-slot":"badge","className":"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-blocks text-pink-400 size-3!","children":["$undefined","$L53","$L54","$undefined"]}],"block"]}]]}],"$L55"]}],"$L56"]}]}],"$L57","$L58","$L59"]}] 28:o8,46:null 28:obb6,4a:[["$","title","0",{"children":"Bento Grid Layouts: 10 Tailwind Designs With Copyable Code – shadcn/ui Block by weinc | shadcnregistry"}],["$","meta","1",{"name":"description","content":"Free bento grid layouts in Tailwind: feature, portfolio, stats and product designs. Copy Tailwind HTML, React JSX or plain CSS built on grid-template-areas. Install the Bento Grid Layouts: 10 Tailwind Designs With Copyable Code shadcn/ui block from weinc."}],["$","link","2",{"rel":"manifest","href":"/manifest.json","crossOrigin":"$undefined"}],["$","meta","3",{"name":"robots","content":"index, follow"}],["$","link","4",{"rel":"canonical","href":"https://shadcnregistry.com/weinc/bento-grid-collection-with-ten-tailwind-layouts-grid-template-areas-and-copyable-code"}],["$","meta","5",{"property":"og:title","content":"Bento Grid Layouts: 10 Tailwind Designs With Copyable Code – shadcn/ui Block by weinc"}],["$","meta","6",{"property":"og:description","content":"Free bento grid layouts in Tailwind: feature, portfolio, stats and product designs. Copy Tailwind HTML, React JSX or plain CSS built on grid-template-areas. Install the Bento Grid Layouts: 10 Tailwind Designs With Copyable Code shadcn/ui block from weinc."}],["$","meta","7",{"property":"og:url","content":"https://shadcnregistry.com/weinc/bento-grid-collection-with-ten-tailwind-layouts-grid-template-areas-and-copyable-code"}],["$","meta","8",{"property":"og:site_name","content":"shadcnregistry"}],["$","meta","9",{"property":"og:locale","content":"en_US"}],["$","meta","10",{"property":"og:image","content":"https://shadcnregistry.com/weinc/bento-grid-collection-with-ten-tailwind-layouts-grid-template-areas-and-copyable-code/opengraph-image"}],["$","meta","11",{"property":"og:type","content":"article"}],["$","meta","12",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","13",{"name":"twitter:title","content":"Bento Grid Layouts: 10 Tailwind Designs With Copyable Code – shadcn/ui Block by weinc"}],["$","meta","14",{"name":"twitter:description","content":"Free bento grid layouts in Tailwind: feature, portfolio, stats and product designs. Copy Tailwind HTML, React JSX or plain CSS built on grid-template-areas. Install the Bento Grid Layouts: 10 Tailwind Designs With Copyable Code shadcn/ui block from weinc."}],["$","meta","15",{"name":"twitter:image","content":"https://shadcnregistry.com/weinc/bento-grid-collection-with-ten-tailwind-layouts-grid-template-areas-and-copyable-code/opengraph-image"}],["$","link","16",{"rel":"icon","href":"/favicon.ico?favicon.0ggckis0s0yna.ico","sizes":"48x48","type":"image/x-icon"}],["$","link","17",{"rel":"icon","href":"/icon0.svg?icon0.25eth_vi9vax4.svg","sizes":"any","type":"image/svg+xml"}],["$","link","18",{"rel":"icon","href":"/icon1.png?icon1.2qsj88a3tgltl.png","sizes":"96x96","type":"image/png"}],["$","link","19",{"rel":"apple-touch-icon","href":"/apple-icon.png?apple-icon.1l19rp7u12rg6.png","sizes":"180x180","type":"image/png"}],["$","$L5a","20",{}]] 28:occ1,5b:I[591164,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ActionButtons"] 5c:I[638118,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"Installation"] 53:["$","path","svg-0",{"d":"M14 4a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1z"}] 54:["$","path","svg-1",{"d":"M3 14h12a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h3a2 2 0 0 1 2 2v12"}] 55:["$","div",null,{"className":"shrink-0 pt-0.5","children":["$","$L5b",null,{"item":{"id":"@weinc/bento-grid-collection-with-ten-tailwind-layouts-grid-template-areas-and-copyable-code","name":"Bento Grid Layouts: 10 Tailwind Designs with Copyable Code","description":"Free bento grid layouts in Tailwind: feature, portfolio, stats and product designs. Copy Tailwind HTML, React JSX or plain CSS built on grid-template-areas.","type":"registry:block","slug":"bento-grid-collection-with-ten-tailwind-layouts-grid-template-areas-and-copyable-code","source":"https://we.inc/r/bento-grid-collection-with-ten-tailwind-layouts-grid-template-areas-and-copyable-code.json","namespace":"@weinc","upstreamName":"bento-grid-collection-with-ten-tailwind-layouts-grid-template-areas-and-copyable-code"}}]}] 56:["$","p",null,{"className":"max-w-3xl break-words text-muted-foreground text-sm leading-6","children":"Free bento grid layouts in Tailwind: feature, portfolio, stats and product designs. Copy Tailwind HTML, React JSX or plain CSS built on grid-template-areas."}] 57:["$","div",null,{"className":"mt-3 shrink-0","children":["$","$L5c",null,{"sourceUrl":"https://we.inc/r/bento-grid-collection-with-ten-tailwind-layouts-grid-template-areas-and-copyable-code.json","itemId":"@weinc/bento-grid-collection-with-ten-tailwind-layouts-grid-template-areas-and-copyable-code"}]}] 28:oe8a,58:["$","div",null,{"className":"mt-4 shrink-0","children":["$","a",null,{"href":"https://link.jln.dev/shadcnblocks","target":"_blank","rel":"sponsored noopener noreferrer","data-umami-event":"affiliate-banner-click","data-umami-event-namespace":"@shadcnblocks","data-umami-event-surface":"item-page","data-umami-event-campaign":"item-page-banner","className":"group relative block w-full max-w-lg overflow-hidden rounded-lg py-0.5 text-left focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-amber-400/60","children":[["$","span",null,{"aria-hidden":"true","className":"absolute right-[-250%] bottom-[-11px] h-1/2 w-[300%] animate-star-movement-bottom rounded-full","style":{"background":"radial-gradient(circle, #fcd34d, transparent 10%)","animationDuration":"6s"}}],["$","span",null,{"aria-hidden":"true","className":"absolute top-[-10px] left-[-250%] h-1/2 w-[300%] animate-star-movement-top rounded-full","style":{"background":"radial-gradient(circle, #fcd34d, transparent 10%)","animationDuration":"6s"}}],["$","span",null,{"className":"relative flex items-center justify-between gap-4 rounded-[calc(var(--radius)-1px)] border bg-background p-4","children":[["$","span",null,{"className":"flex min-w-0 items-center gap-3","children":[["$","svg",null,{"viewBox":"0 0 1200 1200","xmlns":"http://www.w3.org/2000/svg","className":"size-9 shrink-0","fill":"currentColor","aria-hidden":"true","children":["$","g",null,{"children":[["$","path",null,{"d":"m700.78 88.312-39.328-22.547v186.94l39.328 22.828z"}],["$","path",null,{"d":"m780 134.39-39.375-22.781v187.18l39.375 22.594z"}],["$","path",null,{"d":"m858.47 180.24-39.328-22.547v186.94l39.328 22.594z"}],["$","path",null,{"d":"m185.53 360.71 39.328 22.594v-133.69l-39.328 22.547z"}],["$","path",null,{"d":"m146.16 337.92v-42.469l-37.219 21.328z"}],["$","path",null,{"d":"m1095.4 317.29-39.141-22.594v45.375l-39.375 22.547v-90.469l-39.094-22.547v135.1l-39.375 22.594v-181.22l-40.078-23.297v187.22l35.297 20.625v378.74l-1.9219 1.1719-33.375-19.172v38.625l-39.844 22.547v-85.172l-39.328-23.297v131.29l-39.141 23.25v-177.84l-39.375-23.25v223.69l-39.844 22.547v-269.53l-39.328-23.297v315.37l-39.375 23.531v-362.16l-19.219-12.75 0.75-376.08 18.469 11.297v-186.94l-20.625-12-16.594 9.3281v187.69l-39.797 22.547v-186.94l-39.375 22.547v186.98l-39.375 22.781v-186.47l-39.094 22.547v186.47l-40.078 22.594v-186.24l-39.141 23.25v185.76l-39.375 23.297v-186.52l-43.922 25.922v179.06l6 3.375 1.4531 381.32 36.469 21.375v-42.469l39.375-23.297v89.062l39.141 22.781v-135.14l40.078-24v181.69l39.094 23.297v-228.24l39.375-23.297v274.08l39.375 22.828v-320.44l39.797-23.25v366.94l18 10.594v-0.75 188.39l493.22-284.86 0.70312-568.55z"}]]}]}],["$","span",null,{"className":"min-w-0","children":[["$","span",null,{"className":"block font-semibold text-base leading-snug","children":"Premium blocks for shadcn/ui"}],["$","span",null,{"className":"mt-0.5 block text-muted-foreground text-xs","children":"Shadcnblocks.com · Affiliate"}]]}]]}],["$","span",null,{"className":"inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md bg-linear-to-b from-amber-200 to-amber-400 px-3 font-medium text-amber-950 text-sm shadow-sm transition-[filter] group-hover:brightness-110","children":[["$","span",null,{"className":"sr-only sm:not-sr-only","children":"Explore"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-up-right size-4","aria-hidden":"true","children":[["$","path","1tivn9",{"d":"M7 7h10v10"}],["$","path","1vkiza",{"d":"M7 17 17 7"}],"$undefined"]}]]}]]}]]}]}] 28:o67e,59:["$","$4",null,{"fallback":["$","div",null,{"className":"mt-3 flex min-h-0 flex-1 flex-col gap-3 motion-reduce:[&_*]:animate-none","aria-hidden":true,"children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-8 shrink-0"}],["$","div",null,{"className":"flex flex-col overflow-hidden border bg-muted/30 h-[70svh] min-h-80 rounded-lg","children":[["$","div",null,{"className":"flex h-11 shrink-0 items-center gap-3 border-b px-3","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-6 w-16"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-40"}]]}],["$","div",null,{"className":"flex min-h-0 flex-1","children":[["$","div",null,{"className":"hidden w-[23%] flex-col gap-3 border-r p-4 md:flex","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-2/3"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/2"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-3/4"}]]}],["$","div",null,{"className":"flex flex-1 flex-col gap-4 p-6","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-2/3"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/2"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-3/4"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/3"}]]}]]}]]}]]}],"children":"$L5d"}] 28:o344,5e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 5f:T871f,28:o871f,import { createElement, useMemo, useRef, useState } from "react"; import type { KeyboardEvent, ReactNode } from "react"; /* Bento grid collection. Each layout is one element tree. Placement uses grid-template-areas written as Tailwind arbitrary properties ([grid-template-areas:'a_a_b'_'c_d_b'] on the grid, [grid-area:a] on each tile), so the same names drive three outputs: the live preview, the Tailwind HTML or JSX you copy, and a plain CSS layout generated from those classes, with @media rules for the 768px and 1024px breakpoints. */ type Attrs = Record; type El = { t: string; c?: string; a?: Attrs; k: N[] }; type N = string | El; type Kid = N | { $: Attrs } | null | false | undefined; function h(t: string, c: string, ...kids: Kid[]): El { const el: El = { t, c: c || undefined, k: [] }; for (const kid of kids) { if (kid === null || kid === false || kid === undefined) continue; if (typeof kid === "object" && "$" in kid) el.a = { ...(el.a ?? {}), ...kid.$ }; else el.k.push(kid); } return el; } const $ = (a: Attrs) => ({ $: a }); const hide = $({ "aria-hidden": "true" }); type Layout = { name: string; kind: string; note: string; node: El }; /* small visual helpers, all plain elements */ const bars = (vals: number[], cls: string) => h("div", "mt-4 flex h-20 items-end gap-1.5", hide, ...vals.map((v) => h("span", `flex-1 rounded-t ${cls}`, $({ style: `height:${v}%` })))); const spark = (stroke: string, fill: string) => h("svg", "mt-4 h-24 w-full", $({ viewBox: "0 0 300 90", preserveAspectRatio: "none", "aria-hidden": "true" }), h("path", "", $({ d: "M0 70 C30 62 45 74 70 58 S120 40 150 46 S200 22 230 28 S270 12 300 8 L300 90 L0 90 Z", fill })), h("path", "", $({ d: "M0 70 C30 62 45 74 70 58 S120 40 150 46 S200 22 230 28 S270 12 300 8", fill: "none", stroke, "stroke-width": "2.5", "vector-effect": "non-scaling-stroke" })), ); const initials = (list: string[], cls: string) => h("div", "mt-4 flex -space-x-2", hide, ...list.map((s) => h("span", `grid h-9 w-9 place-items-center rounded-full text-[11px] font-bold ring-2 ${cls}`, s))); /* ---------- the ten layouts ---------- */ const LAYOUTS: Layout[] = [ { name: "Product analytics features", kind: "Feature", note: "One hero tile spans two rows on desktop; on tablets it takes the full first row.", node: h("div", "grid gap-3 auto-rows-[minmax(150px,auto)] [grid-template-areas:'a'_'b'_'c'_'d'_'e'] md:grid-cols-2 md:[grid-template-areas:'a_a'_'b_c'_'d_e'] lg:grid-cols-4 lg:[grid-template-areas:'a_a_b_c'_'a_a_d_e']", h("article", "[grid-area:a] flex flex-col rounded-2xl bg-white p-6 ring-1 ring-slate-200", h("p", "text-[12px] font-semibold uppercase tracking-wider text-indigo-700", "Live funnels"), h("h3", "mt-2 text-[22px] font-semibold tracking-tight text-slate-900", "See where sign-ups stall, as it happens"), h("p", "mt-2 text-[14px] text-slate-600", "Every step updates within seconds of a visit, with no sampling."), h("div", "mt-auto", spark("#4f46e5", "#eef2ff")), ), h("article", "[grid-area:b] rounded-2xl bg-indigo-600 p-5 text-white", h("p", "text-[32px] font-semibold tracking-tight", "4 min"), h("p", "mt-1 text-[14px] text-indigo-100", "Typical set-up, one script tag"), ), h("article", "[grid-area:c] rounded-2xl bg-white p-5 ring-1 ring-slate-200", h("h3", "font-semibold text-slate-900", "Session replays"), h("p", "mt-1 text-[14px] text-slate-600", "Jump from a drop-off straight to the recording."), ), h("article", "[grid-area:d] rounded-2xl bg-white p-5 ring-1 ring-slate-200", h("h3", "font-semibold text-slate-900", "Cohorts"), bars([30, 48, 42, 66, 58, 80], "bg-indigo-200"), ), h("article", "[grid-area:e] rounded-2xl bg-slate-900 p-5 text-white", h("h3", "font-semibold", "Your data stays yours"), h("p", "mt-1 text-[14px] text-slate-300", "Export raw events any time, as CSV or Parquet."), ), ), }, { name: "Designer portfolio", kind: "Portfolio", note: "Tall and wide project tiles; on phones they become a single column in reading order.", node: h("div", "grid gap-3 auto-rows-[minmax(140px,auto)] [grid-template-areas:'a'_'b'_'c'_'d'_'e'] md:grid-cols-2 md:[grid-template-areas:'a_b'_'a_c'_'d_e'] lg:grid-cols-3 lg:[grid-template-areas:'a_b_b'_'a_c_d'_'e_e_d']", h("article", "[grid-area:a] flex flex-col justify-end rounded-2xl bg-[#e9e4da] p-6", h("p", "text-[12px] uppercase tracking-[0.2em] text-stone-600", "Hello"), h("h3", "mt-2 font-serif text-[30px] leading-tight text-stone-900", "Ama Lindqvist designs quiet brands for loud markets."), h("a", "mt-5 inline-flex min-h-[40px] w-fit items-center rounded-full bg-stone-900 px-4 text-[14px] font-semibold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-900 focus-visible:ring-offset-2", $({ href: "#" }), "Start a project"), ), h("a", "[grid-area:b] group relative overflow-hidden rounded-2xl bg-[linear-gradient(135deg,#1f3b2d,#3f6b4f_55%,#c9b27c)] p-5 text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-900", $({ href: "#" }), h("span", "absolute right-5 top-5 h-24 w-24 rounded-full border border-white/40", hide), h("p", "text-[12px] uppercase tracking-wider text-white/80", "Identity, 2026"), h("h3", "mt-16 text-[20px] font-semibold", "Fernhill Cider"), ), h("a", "[grid-area:c] rounded-2xl bg-[#d8603f] p-5 text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-900", $({ href: "#" }), h("p", "text-[12px] uppercase tracking-wider text-white/85", "Packaging"), h("h3", "mt-8 text-[18px] font-semibold", "Kiln & Co. tea tins"), ), h("article", "[grid-area:d] rounded-2xl bg-white p-5 ring-1 ring-stone-200", h("h3", "font-semibold text-stone-900", "Recent clients"), h("ul", "mt-3 space-y-2 text-[14px] text-stone-600", h("li", "", "Harbour Rowing Club"), h("li", "", "Ostra Ceramics"), h("li", "", "Northgate Library"), h("li", "", "Pell & Wren Architects")), ), h("article", "[grid-area:e] flex items-center justify-between gap-4 rounded-2xl bg-stone-900 p-5 text-white", h("p", "text-[15px]", "Booking projects for March onward."), h("span", "inline-flex items-center gap-2 text-[13px] text-emerald-300", h("span", "h-2 w-2 rounded-full bg-emerald-400", hide), "Available"), ), ), }, { name: "Monthly numbers", kind: "Stats", note: "Six equal cells on desktop, with the headline figure doubled in width.", node: h("div", "grid gap-3 auto-rows-[minmax(120px,auto)] [grid-template-areas:'a'_'b'_'c'_'d'_'e'] md:grid-cols-2 md:[grid-template-areas:'a_a'_'b_c'_'d_e'] lg:grid-cols-4 lg:[grid-template-areas:'a_a_b_c'_'a_a_d_e']", h("article", "[grid-area:a] flex flex-col rounded-2xl bg-emerald-950 p-6 text-white", h("p", "text-[13px] text-emerald-200", "Revenue, October"), h("p", "mt-1 text-[44px] font-semibold tracking-tight tabular-nums", "$84,210"), h("p", "text-[14px] text-emerald-200", "Up 12.4% on September"), h("div", "mt-auto", bars([40, 52, 46, 61, 58, 70, 66, 78, 74, 88], "bg-emerald-400/80")), ), ...([ ["b", "Orders", "1,932", "+8.1%"], ["c", "Average basket", "$43.58", "+3.9%"], ["d", "Returning", "61%", "+2 pts"], ["e", "Refunds", "0.8%", "-0.3 pts"], ] as const).map(([a, l, v, d]) => h("article", `[grid-area:${a}] rounded-2xl bg-white p-5 ring-1 ring-emerald-900/10`, h("p", "text-[13px] text-slate-600", l), h("p", "mt-1 text-[28px] font-semibold tracking-tight tabular-nums text-slate-900", v), h("p", "text-[13px] font-medium text-emerald-700", d), ), ), ), }, { name: "Headphones product page", kind: "Product", note: "A wide image tile on top, three spec tiles below; tablets keep two columns.", node: h("div", "grid gap-3 auto-rows-[minmax(140px,auto)] [grid-template-areas:'a'_'b'_'c'_'d'] md:grid-cols-2 md:[grid-template-areas:'a_a'_'b_c'_'d_d'] lg:grid-cols-3 lg:[grid-template-areas:'a_a_b'_'c_d_d']", h("article", "[grid-area:a] relative min-h-[220px] overflow-hidden rounded-3xl bg-[radial-gradient(circle_at_70%_40%,#3a3f4a,#16181d_60%)] p-6 text-white", h("p", "text-[12px] uppercase tracking-[0.18em] text-slate-400", "Arden One"), h("h3", "mt-2 max-w-xs text-[26px] font-semibold leading-tight", "Quiet when you want it, open when you don't."), h("span", "absolute bottom-[-40px] right-10 h-44 w-44 rounded-full border-[14px] border-slate-500/60", hide), h("span", "absolute bottom-6 right-6 h-20 w-12 rounded-2xl bg-slate-300/80 shadow-[inset_-6px_-8px_12px_rgba(0,0,0,0.35)]", hide), ), h("article", "[grid-area:b] rounded-3xl bg-[#f1ede6] p-5", h("p", "text-[40px] font-semibold tracking-tight text-stone-900", "38 h"), h("p", "text-[14px] text-stone-600", "Battery with noise cancelling on. Ten minutes of charge gives four hours."), ), h("article", "[grid-area:c] rounded-3xl bg-white p-5 ring-1 ring-stone-200", h("h3", "font-semibold text-stone-900", "Three finishes"), h("div", "mt-4 flex gap-2", hide, h("span", "h-8 w-8 rounded-full bg-stone-900 ring-2 ring-offset-2 ring-stone-900"), h("span", "h-8 w-8 rounded-full bg-[#c8bca8]"), h("span", "h-8 w-8 rounded-full bg-[#5b6b5a]")), ), h("article", "[grid-area:d] flex flex-col justify-between gap-4 rounded-3xl bg-white p-5 ring-1 ring-stone-200 sm:flex-row sm:items-center", h("div", "", h("h3", "font-semibold text-stone-900", "$249, free returns for 30 days"), h("p", "text-[14px] text-stone-600", "Ships in two working days.")), h("a", "inline-flex min-h-[44px] items-center justify-center rounded-full bg-stone-900 px-5 text-[14px] font-semibold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-900 focus-visible:ring-offset-2", $({ href: "#" }), "Add to bag"), ), ), }, { name: "Developer tool, dark", kind: "Feature", note: "A code tile anchors the left; three narrow tiles stack beside it.", node: h("div", "grid gap-3 auto-rows-[minmax(120px,auto)] [grid-template-areas:'a'_'b'_'c'_'d'] md:grid-cols-2 md:[grid-template-areas:'a_a'_'b_c'_'d_d'] lg:grid-cols-3 lg:[grid-template-areas:'a_a_b'_'a_a_c'_'a_a_d']", h("article", "[grid-area:a] rounded-2xl bg-[#0d1117] p-6 ring-1 ring-white/10", h("p", "text-[12px] font-semibold uppercase tracking-wider text-sky-400", "Typed client"), h("h3", "mt-2 text-[22px] font-semibold text-white", "Your schema becomes autocomplete"), h("pre", "mt-5 overflow-x-auto rounded-xl bg-black/40 p-4 font-mono text-[12.5px] leading-6 text-slate-300", h("code", "", "const order = await db.orders.get(\"ord_81\");\norder.total; // number\norder.customer; // Customer\norder.notes; // string | null")), ), h("article", "[grid-area:b] rounded-2xl bg-[#11161d] p-5 ring-1 ring-white/10", h("h3", "font-semibold text-white", "Branches for data"), h("p", "mt-1 text-[14px] text-slate-400", "Every pull request gets its own copy."), ), h("article", "[grid-area:c] rounded-2xl bg-[#11161d] p-5 ring-1 ring-white/10", h("h3", "font-semibold text-white", "Point-in-time restore"), h("p", "mt-1 text-[14px] text-slate-400", "Roll back to any second in the last week."), ), h("article", "[grid-area:d] rounded-2xl bg-sky-400 p-5 text-slate-950", h("h3", "font-semibold", "Free for side projects"), h("p", "mt-1 text-[14px] text-slate-800", "Up to 3 databases, no card needed."), ), ), }, { name: "About me page", kind: "Personal", note: "A mix of square and wide cells, like a profile; it keeps two columns from 768px.", node: h("div", "grid gap-3 auto-rows-[minmax(130px,auto)] [grid-template-areas:'a'_'b'_'c'_'d'_'e'] md:grid-cols-2 md:[grid-template-areas:'a_a'_'b_c'_'d_e'] lg:grid-cols-4 lg:[grid-template-areas:'a_a_b_c'_'d_e_e_c']", h("article", "[grid-area:a] flex items-center gap-5 rounded-[28px] bg-[#fff4e6] p-6", h("span", "grid h-20 w-20 shrink-0 place-items-center rounded-full bg-amber-600 text-[24px] font-semibold text-white", hide, "TO"), h("div", "", h("h3", "text-[22px] font-semibold text-stone-900", "Tobi Okafor"), h("p", "mt-1 text-[14px] text-stone-600", "Frontend engineer in Lisbon. Writes about forms, type and slow software.")), ), h("a", "[grid-area:b] flex flex-col justify-between rounded-[28px] bg-[#1d2733] p-5 text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-600", $({ href: "#" }), h("span", "text-[13px] text-slate-300", "Newsletter"), h("span", "text-[18px] font-semibold", "Field Notes, every other Sunday"), ), h("article", "[grid-area:c] rounded-[28px] bg-white p-5 ring-1 ring-stone-200", h("h3", "font-semibold text-stone-900", "Now"), h("ul", "mt-3 space-y-2 text-[14px] text-stone-600", h("li", "", "Rebuilding a train timetable app"), h("li", "", "Reading about colour spaces"), h("li", "", "Learning to bake rye")), ), h("article", "[grid-area:d] rounded-[28px] bg-amber-100 p-5", h("p", "text-[34px] font-semibold text-stone-900", "11 yrs"), h("p", "text-[14px] text-stone-700", "shipping for the web"), ), h("article", "[grid-area:e] flex flex-wrap content-center gap-2 rounded-[28px] bg-white p-5 ring-1 ring-stone-200", ...["TypeScript", "CSS layout", "Accessibility", "Design systems", "Svelte"].map((s) => h("span", "rounded-full bg-stone-100 px-3 py-1.5 text-[13px] text-stone-700", s)), ), ), }, { name: "Café homepage", kind: "Local business", note: "Opening hours and the map tile sit side by side; the menu tile spans the full width below.", node: h("div", "grid gap-3 auto-rows-[minmax(130px,auto)] [grid-template-areas:'a'_'b'_'c'_'d'] md:grid-cols-2 md:[grid-template-areas:'a_a'_'b_c'_'d_d'] lg:grid-cols-4 lg:[grid-template-areas:'a_a_b_c'_'d_d_d_c']", h("article", "[grid-area:a] rounded-2xl bg-[#3d2b1f] p-6 text-[#f6ede1]", h("p", "text-[12px] uppercase tracking-[0.2em] text-[#d9c3a5]", "Since 2014"), h("h3", "mt-2 font-serif text-[30px] leading-tight", "Small Hours Coffee"), h("p", "mt-2 text-[14px] text-[#e8d8c3]", "Roasted on Tuesdays, baked every morning, open late on Fridays."), ), h("article", "[grid-area:b] rounded-2xl bg-[#f3e9dc] p-5", h("h3", "font-semibold text-[#3d2b1f]", "Hours"), h("dl", "mt-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-[14px] text-[#5a4636]", h("dt", "", "Mon to Thu"), h("dd", "text-right", "7:00 to 17:00"), h("dt", "", "Fri"), h("dd", "text-right", "7:00 to 22:00"), h("dt", "", "Sat, Sun"), h("dd", "text-right", "8:00 to 16:00")), ), h("article", "[grid-area:c] relative min-h-[200px] overflow-hidden rounded-2xl bg-[#e4ddd1] p-5", h("svg", "absolute inset-0 h-full w-full", $({ viewBox: "0 0 200 200", preserveAspectRatio: "xMidYMid slice", "aria-hidden": "true" }), h("path", "", $({ d: "M0 60 H200 M0 140 H200 M60 0 V200 M150 0 V200", stroke: "#fbf8f3", "stroke-width": "10", fill: "none" })), h("path", "", $({ d: "M0 100 C60 90 120 120 200 96", stroke: "#bcd3dc", "stroke-width": "14", fill: "none" })), h("circle", "", $({ cx: "104", cy: "64", r: "9", fill: "#b45309" })), ), h("p", "relative mt-auto rounded-lg bg-white/90 px-3 py-2 text-[13px] text-stone-700", "14 Quay Lane, by the footbridge"), ), h("article", "[grid-area:d] rounded-2xl bg-white p-5 ring-1 ring-[#3d2b1f]/10", h("h3", "font-semibold text-[#3d2b1f]", "On the counter today"), h("ul", "mt-3 grid gap-2 text-[14px] text-[#5a4636] sm:grid-cols-3", h("li", "", "Cardamom bun, $4.20"), h("li", "", "Leek and gruyère tart, $7.50"), h("li", "", "Batch brew, $3.10")), ), ), }, { name: "Company and hiring", kind: "Content", note: "An asymmetric grid where the hiring tile reaches down two rows on desktop.", node: h("div", "grid gap-3 auto-rows-[minmax(130px,auto)] [grid-template-areas:'a'_'b'_'c'_'d'_'e'] md:grid-cols-2 md:[grid-template-areas:'a_b'_'c_b'_'d_e'] lg:grid-cols-3 lg:[grid-template-areas:'a_a_b'_'c_d_b'_'c_e_e']", h("article", "[grid-area:a] rounded-xl bg-[#0f2a44] p-6 text-white", h("h3", "text-[24px] font-semibold leading-tight", "We build tools for people who run warehouses."), h("p", "mt-2 text-[14px] text-sky-100", "Thirty-two of us, across four time zones, one shared calendar."), ), h("article", "[grid-area:b] flex flex-col rounded-xl bg-white p-5 ring-1 ring-slate-200", h("p", "text-[12px] font-semibold uppercase tracking-wider text-sky-800", "Hiring"), h("ul", "mt-3 divide-y divide-slate-100 text-[14px]", ...[["Senior backend engineer", "Remote, EU"], ["Product designer", "Rotterdam"], ["Support lead", "Remote, US"]].map(([a, b]) => h("li", "py-2.5", h("strong", "block font-semibold text-slate-900", a), h("span", "text-slate-600", b)))), h("a", "mt-auto inline-flex min-h-[40px] items-center text-[14px] font-semibold text-sky-800 underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-800", $({ href: "#" }), "All open roles"), ), h("article", "[grid-area:c] rounded-xl bg-sky-50 p-5", h("h3", "font-semibold text-slate-900", "How we work"), h("ul", "mt-3 space-y-2 text-[14px] text-slate-700", h("li", "", "Written proposals before meetings"), h("li", "", "Four-day weeks in August"), h("li", "", "Customers on every planning call")), ), h("article", "[grid-area:d] rounded-xl bg-white p-5 ring-1 ring-slate-200", h("h3", "font-semibold text-slate-900", "The team"), initials(["RM", "JK", "AL", "SP", "+28"], "bg-sky-100 text-sky-900 ring-white"), ), h("article", "[grid-area:e] rounded-xl bg-white p-5 ring-1 ring-slate-200", h("h3", "font-semibold text-slate-900", "Offices"), h("p", "mt-1 text-[14px] text-slate-600", "Rotterdam, Halifax and a long table in Porto."), ), ), }, { name: "Changelog highlights", kind: "Content", note: "Three columns of news where the latest release takes two columns and two rows.", node: h("div", "grid gap-3 auto-rows-[minmax(120px,auto)] [grid-template-areas:'a'_'b'_'c'_'d'] md:grid-cols-2 md:[grid-template-areas:'a_a'_'b_c'_'d_d'] lg:grid-cols-3 lg:[grid-template-areas:'a_a_b'_'a_a_c'_'d_d_d']", h("article", "[grid-area:a] rounded-2xl bg-white p-6 ring-1 ring-rose-200", h("p", "font-mono text-[12px] text-rose-700", "v5.0 · Oct 9"), h("h3", "mt-2 text-[24px] font-semibold text-slate-900", "Offline mode"), h("p", "mt-2 max-w-md text-[14px] text-slate-600", "Edit on a train, sync when you are back. Conflicts show side by side so you choose which change wins."), h("div", "mt-5 grid grid-cols-2 gap-2", hide, h("span", "h-20 rounded-lg bg-rose-50 ring-1 ring-rose-100"), h("span", "h-20 rounded-lg bg-rose-100")), ), h("article", "[grid-area:b] rounded-2xl bg-rose-700 p-5 text-white", h("p", "font-mono text-[12px] text-rose-100", "v4.9 · Sep 24"), h("h3", "mt-1 font-semibold", "Keyboard shortcuts you can change"), ), h("article", "[grid-area:c] rounded-2xl bg-white p-5 ring-1 ring-rose-200", h("p", "font-mono text-[12px] text-slate-600", "v4.8 · Sep 3"), h("h3", "mt-1 font-semibold text-slate-900", "Export to Markdown"), ), h("article", "[grid-area:d] flex flex-wrap items-center justify-between gap-3 rounded-2xl bg-slate-900 p-5 text-white", h("p", "text-[14px]", "Get one email when a release ships. Nothing else."), h("a", "inline-flex min-h-[40px] items-center rounded-lg bg-white px-4 text-[14px] font-semibold text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900", $({ href: "#" }), "Subscribe"), ), ), }, { name: "Mobile app launch", kind: "Product", note: "A phone tile in the middle column with features either side; it centres the phone on tablets.", node: h("div", "grid gap-3 auto-rows-[minmax(120px,auto)] [grid-template-areas:'c'_'a'_'b'_'d'_'e'] md:grid-cols-2 md:[grid-template-areas:'c_c'_'a_b'_'d_e'] lg:grid-cols-3 lg:[grid-template-areas:'a_c_b'_'d_c_e']", h("article", "[grid-area:a] rounded-3xl bg-violet-50 p-5", h("h3", "font-semibold text-violet-950", "Plans that move with you"), h("p", "mt-1 text-[14px] text-violet-900/80", "Miss a session and the week rearranges itself."), ), h("article", "[grid-area:b] rounded-3xl bg-violet-50 p-5", h("h3", "font-semibold text-violet-950", "Ten-minute days"), h("p", "mt-1 text-[14px] text-violet-900/80", "Short routines for when the calendar is full."), ), h("article", "[grid-area:c] grid place-items-center rounded-3xl bg-violet-700 p-6", h("div", "mx-auto w-40 rounded-[28px] border-[6px] border-violet-950 bg-white p-3 shadow-xl", hide, h("div", "mx-auto mb-3 h-1.5 w-12 rounded-full bg-slate-200"), h("p", "text-[11px] font-semibold text-slate-900", "Today"), h("div", "mt-2 h-16 rounded-xl bg-violet-100"), h("div", "mt-2 h-3 w-3/4 rounded bg-slate-100"), h("div", "mt-1.5 h-3 w-1/2 rounded bg-slate-100"), h("div", "mt-3 h-8 rounded-lg bg-violet-600"), ), ), h("article", "[grid-area:d] rounded-3xl bg-white p-5 ring-1 ring-violet-200", h("p", "text-[30px] font-semibold text-violet-950", "Free"), h("p", "text-[14px] text-slate-600", "for the first month, then $6.99"), ), h("article", "[grid-area:e] flex flex-col justify-center gap-2 rounded-3xl bg-white p-5 ring-1 ring-violet-200", h("a", "inline-flex min-h-[44px] items-center justify-center rounded-xl bg-slate-900 text-[14px] font-semibold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-700 focus-visible:ring-offset-2", $({ href: "#" }), "Download for iPhone"), h("a", "inline-flex min-h-[44px] items-center justify-center rounded-xl ring-1 ring-slate-300 text-[14px] font-semibold text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-700", $({ href: "#" }), "Download for Android"), ), ), }, ]; /* ---------- serialising ---------- */ const VOID = new Set(["path", "circle", "rect", "input", "img", "br"]); const escHtml = (s: string) => s.replace(/&/g, "&").replace(//g, ">"); const reactKey = (k: string) => (k.startsWith("aria-") || k.startsWith("data-") ? k : k.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase())); const styleObj = (s: string) => Object.fromEntries(s.split(";").filter(Boolean).map((d) => { const [k, v] = d.split(":"); return [reactKey(k.trim()), v.trim()]; })); function toReact(n: N, key: string | number): ReactNode { if (typeof n === "string") return n; const props: Record = { key }; if (n.c) props.className = n.c; for (const [k, v] of Object.entries(n.a ?? {})) props[k === "style" ? "style" : reactKey(k)] = k === "style" ? styleObj(v) : v; return createElement(n.t, props, ...n.k.map((k, i) => toReact(k, i))); } function serial(n: N, depth: number, jsx: boolean, inPre = false): string { const pad = inPre ? "" : " ".repeat(depth); if (typeof n === "string") return pad + (jsx && !inPre ? escHtml(n).replace(/[{}]/g, (c) => `{"${c}"}`) : escHtml(n)); const attrs: string[] = []; if (n.c) attrs.push(`${jsx ? "className" : "class"}="${n.c}"`); for (const [k, v] of Object.entries(n.a ?? {})) { if (jsx && k === "style") attrs.push(`style={${JSON.stringify(styleObj(v))}}`); else attrs.push(`${jsx ? reactKey(k) : k}="${v}"`); } const open = `<${n.t}${attrs.length ? " " + attrs.join(" ") : ""}`; if (VOID.has(n.t) && !n.k.length) return `${pad}${open} />`; const pre = inPre || n.t === "pre"; if (pre && jsx) return `${pad}${open}>{${JSON.stringify(textOf(n))}}`; if (pre || n.k.every((k) => typeof k === "string")) return `${pad}${open}>${n.k.map((k) => serial(k, 0, jsx, pre)).join("")}`; return `${pad}${open}>\n${n.k.map((k) => serial(k, depth + 1, jsx)).join("\n")}\n${pad}`; } const textOf = (n: N): string => (typeof n === "string" ? n : n.k.map(textOf).join("")); type Areas = { cols: number; rows: string[] }; /** Reads the grid classes back into column counts and area rows for each breakpoint. */ function areasOf(cls: string): Record<"base" | "md" | "lg", Areas> { const out: Record = { base: { cols: 1, rows: [] }, md: { cols: 1, rows: [] }, lg: { cols: 1, rows: [] } }; for (const m of cls.matchAll(/(?:(md|lg):)?\[grid-template-areas:([^\]]+)\]/g)) out[m[1] ?? "base"].rows = m[2].split("_'").map((r) => r.replace(/'/g, "").replace(/_/g, " ")); for (const m of cls.matchAll(/(md|lg):grid-cols-(\d+)/g)) out[m[1]].cols = Number(m[2]); return out as Record<"base" | "md" | "lg", Areas>; } function cssOf(l: Layout): string { const a = areasOf(l.node.c ?? ""); const names = [...new Set(a.base.rows.join(" ").split(" "))]; const minRow = /auto-rows-\[minmax\((\d+px)/.exec(l.node.c ?? "")?.[1] ?? "140px"; const tpl = (x: Areas) => x.rows.map((r) => `"${r}"`).join("\n "); return `/* ${l.name}: layout only. Put class="bento" on the grid and tile-a, tile-b ... on the tiles. */ .bento { display: grid; gap: 12px; grid-auto-rows: minmax(${minRow}, auto); grid-template-columns: 1fr; grid-template-areas: ${tpl(a.base)}; } ${names.map((n) => `.tile-${n} { grid-area: ${n}; }`).join("\n")} @media (min-width: 768px) { .bento { grid-template-columns: repeat(${a.md.cols}, minmax(0, 1fr)); grid-template-areas: ${tpl(a.md)}; } } @media (min-width: 1024px) { .bento { grid-template-columns: repeat(${a.lg.cols}, minmax(0, 1fr)); grid-template-areas: ${tpl(a.lg)}; } } `; } type Lang = "html" | "jsx" | "css"; const LANGS: { k: Lang; label: string }[] = [ { k: "html", label: "Tailwind HTML" }, { k: "jsx", label: "React JSX" }, { k: "css", label: "CSS layout" }, ]; function codeFor(l: Layout, lang: Lang): string { if (lang === "css") return cssOf(l); const body = serial(l.node, lang === "jsx" ? 2 : 0, lang === "jsx"); if (lang === "html") return body + "\n"; const fn = l.name.replace(/[^A-Za-z ]/g, "").split(" ").map((w) => w[0].toUpperCase() + w.slice(1)).join(""); return `export default function ${fn}Bento() {\n return (\n${body}\n );\n}\n`; } const TILE_TINT = ["bg-indigo-200", "bg-amber-200", "bg-emerald-200", "bg-rose-200", "bg-sky-200", "bg-violet-200"]; function Wire({ a, label }: { a: Areas; label: string }) { const names = [...new Set(a.rows.join(" ").split(" "))].sort(); return (

`"${r}"`).join(" "), gridAutoRows: "22px" }} aria-hidden="true" > {names.map((n) => ( {n} ))}

{label}

); } export default function BentoGridCollection() { const [sel, setSel] = useState(0); const [lang, setLang] = useState("html"); const [showCode, setShowCode] = useState(false); const [copied, setCopied] = useState(null); const [announce, setAnnounce] = useState(""); const tabs = useRef<(HTMLButtonElement | null)[]>([]); const timer = useRef | null>(null); const l = LAYOUTS[sel]; const areas = useMemo(() => areasOf(l.node.c ?? ""), [l]); const code = codeFor(l, lang); function onKey(e: KeyboardEvent, i: number) { const last = LAYOUTS.length - 1; const next = e.key === "ArrowRight" ? (i === last ? 0 : i + 1) : e.key === "ArrowLeft" ? (i === 0 ? last : i - 1) : e.key === "Home" ? 0 : e.key === "End" ? last : -1; if (next < 0) return; e.preventDefault(); setSel(next); tabs.current[next]?.focus(); } async function copy() { let ok = false; try { await navigator.clipboard.writeText(code); ok = true; } catch { ok = false; } if (!ok) setShowCode(true); setCopied(ok ? lang : null); setAnnounce(ok ? `${LANGS.find((x) => x.k === lang)?.label} for ${l.name} copied` : "Copy was blocked, the code is shown so you can select it"); if (timer.current) clearTimeout(timer.current); timer.current = setTimeout(() => setCopied(null), 1600); } const focus = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-900 focus-visible:ring-offset-2 focus-visible:ring-offset-[#f4f2ee]"; return (

Tailwind · React · plain CSS

{LAYOUTS.length} bento grid layouts

Every layout is placed with named grid areas, so the map of tiles below the preview is the actual layout code. Pick one, resize the window to watch it collapse, then copy it.

{LAYOUTS.map((x, i) => ( ))}

{l.name}

{l.kind}

{toReact(l.node, sel)}

How it collapses

{l.note} Each letter is a grid area name; the same names appear in the classes and the CSS.

{LANGS.map((x) => ( ))}

                {code}

{announce}

); } 28:o148,5d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L5e",null,{"files":[{"path":"components/we-inc/bento-grid-collection-with-ten-tailwind-layouts-grid-template-areas-and-copyable-code.tsx","content":"$5f","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}] 28:o30,22:C 20:C 21:C 17:C 1d:C 1e:C 24:false 23:49030 28:C