1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/css/91854d2a796bed31.css?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/cb5e1d0ac3d5e558.css?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/17c0cbd8673a72fd.css?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-739637aaf3cff029.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52"/>
1<script src="/_next/static/chunks/4bd1b696-01b4a2ffa8bac205.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" async=""></script>
1<script src="/_next/static/chunks/794-e4834787101987cc.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" async=""></script>
1<script src="/_next/static/chunks/main-app-5dcba2628ed200ee.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" async=""></script>
1<script src="/_next/static/chunks/736-a38c785747baf0d9.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" async=""></script>
1<script src="/_next/static/chunks/265-118f6322ee0dfc5b.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" async=""></script>
1<script src="/_next/static/chunks/248-02622a80685d988c.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" async=""></script>
1<script src="/_next/static/chunks/app/layout-f1b6ab3467d37c02.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" async=""></script>
1<script src="/_next/static/chunks/153-aaf4023bcf3c4c2e.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" async=""></script>
1<script src="/_next/static/chunks/122-452306eaaa3e3796.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" async=""></script>
1<script src="/_next/static/chunks/909-60e23bb3c0b88ad2.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" async=""></script>
1<script src="/_next/static/chunks/87-5016bb2be276cc5b.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" async=""></script>
1<script src="/_next/static/chunks/155-37a4c2b56edfc6b7.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" async=""></script>
1<script src="/_next/static/chunks/app/landing-page/%5Bcategory%5D/%5Bcomponent%5D/page-1104f35d4c6ef660.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" async=""></script>
1<meta name="next-size-adjust" content=""/><title>Pro Blocks / shadcndesign</title><meta name="description" content="Pro Blocks is a collection of premium UI components and blocks for shadcn/ui"/><link rel="icon" href="/favicon.ico?531babc765ddae2f" type="image/x-icon" sizes="32x32"/>
1<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" noModule=""></script>
1</head><body class="__variable_188709 __variable_9a8899 __variable_eb41fe __variable_3d9088 __variable_c2c3d1 __variable_ad9d8d __variable_d878d4 __variable_d44934 __variable_f367f3 __variable_0d7163 __variable_8c1962 __variable_8cfa85 relative antialiased"><div hidden=""><!--$--><!--/$--></div>
1<script>((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=["light","dark"];function k(b){var c;(Array.isArray(a)?a:[a]).forEach(a=>{let c="class"===a,d=c&&f?e.map(a=>f[a]||a):e;c?(i.classList.remove(...d),i.classList.add(f&&f[b]?f[b]:b)):i.setAttribute(a,b)}),c=b,h&&j.includes(c)&&(i.style.colorScheme=c)}if(d)k(d);else try{let a=localStorage.getItem(b)||c,d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;k(d)}catch(a){}})("class","theme","system",null,["light","dark"],null,true,true)</script>
1<div class="fixed right-3 bottom-3 isolate z-99"><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap 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 border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 size-9 bg-background! rounded-full" disabled=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun h-[1.2rem] w-[1.2rem]"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg><span class="sr-only">Toggle theme</span></button></div><main class="bg-background"><div class="mx-auto max-w-3xl space-y-16 px-6 py-16"><section><h1 class="mb-4 text-4xl font-semibold">Using Patterns</h1><p class="text-muted-foreground text-lg">Our pattern library provides versatile SVG patterns in CSS that can be used in various ways.</p><div data-orientation="horizontal" role="none" data-slot="separator" class="bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-12"></div><h2 class="mb-4 text-2xl font-semibold">Getting Started</h2><ol class="text-muted-foreground list-decimal space-y-2 pl-8"><li>Find the pattern you want to use in the<!-- --> <span class="text-foreground font-mono">patterns/patterns.css</span> <!-- -->file.</li><li>Copy and paste the pattern into your<!-- --> <span class="text-foreground font-mono">globals.css</span> <!-- -->file.</li><li>Rename the pattern class to match your project.</li><li>Edit the pattern colors in the background-image svg to fit your needs.</li><li>Use the pattern in your project by adding the pattern class to your element.</li></ol></section><div data-orientation="horizontal" role="none" data-slot="separator" class="bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px"></div><section><h2 class="mb-4 text-2xl font-semibold">Customizing Patterns</h2><p class="text-muted-foreground mb-8">You can customize the patterns by editing the SVG code in the background-image property. In the example below, you can see how to change the stroke color from black to blue.</p><p class="text-muted-foreground mb-8">Make sure you always change the '#' in your color value to '%23 so it will display properly.</p><div class="border-border bg-card mb-6 overflow-hidden rounded-md border"><div class="border-border text-foreground border-b px-3 py-2 font-medium">globals.css</div><pre class="bg-zinc-950 p-4 font-mono text-sm leading-normal font-normal text-wrap text-white"><code>.pattern-background { 2 background-image: url("data:image/svg+xml,%3Csvg width='140' height='16' viewBox='0 0 140 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4133_10133)'%3E%3Cpath d='M-0.0390625 44C16.7069 44 23.8369 34.61 32.6009 24.676C41.5709 14.516 51.4569 4 70.0009 4C88.5449 4 98.4309 14.516 107.401 24.676C116.165 34.61 123.295 44 140.041 44M-0.0390625 28.004C16.7069 28 23.8369 18.612 32.6009 8.678C41.5709 -1.484 51.4569 -12 70.0009 -12C88.5449 -12 98.4309 -1.484 107.401 8.678C116.165 18.612 123.295 28 140.041 28.006M140.001 12.008C123.255 12.006 116.165 2.612 107.401 -7.322C98.4309 -17.484 88.5449 -28 70.0009 -28C51.4569 -28 41.5709 -17.484 32.6009 -7.322C23.8369 2.612 16.7069 12 -0.0390625 12.004' <span class="rounded border bg-white px-1 text-black">stroke='%23bfdbfe'</span>/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4133_10133'%3E%3Crect width='140' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); 3 background-repeat: repeat; 4 width: 100%; 5 height: 100%; 6} 7</code></pre></div></section><div data-orientation="horizontal" role="none" data-slot="separator" class="bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px"></div><section><h2 class="mb-3 text-2xl font-semibold">Example usage</h2><p class="text-muted-foreground mb-12">Here are some examples of how to use patterns in your project.</p><h3 class="mb-4 text-xl font-semibold">
7Background Pattern</h3><div class="pattern-background border-border mb-6 w-full rounded-md border bg-blue-50 py-20 dark:bg-blue-950"></div><div class="border-border bg-card mb-6 overflow-hidden rounded-md border"><div class="border-border text-foreground border-b px-3 py-2 font-medium">globals.css</div><pre class="overflow-x-scroll bg-zinc-950 p-4 font-mono text-sm leading-normal font-normal text-white"><code>.pattern-background { 8 background-image: url("data:image/svg+xml,%3Csvg width='140' height='16' viewBox='0 0 140 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4133_10133)'%3E%3Cpath d='M-0.0390625 44C16.7069 44 23.8369 34.61 32.6009 24.676C41.5709 14.516 51.4569 4 70.0009 4C88.5449 4 98.4309 14.516 107.401 24.676C116.165 34.61 123.295 44 140.041 44M-0.0390625 28.004C16.7069 28 23.8369 18.612 32.6009 8.678C41.5709 -1.484 51.4569 -12 70.0009 -12C88.5449 -12 98.4309 -1.484 107.401 8.678C116.165 18.612 123.295 28 140.041 28.006M140.001 12.008C123.255 12.006 116.165 2.612 107.401 -7.322C98.4309 -17.484 88.5449 -28 70.0009 -28C51.4569 -28 41.5709 -17.484 32.6009 -7.322C23.8369 2.612 16.7069 12 -0.0390625 12.004' stroke='%23bfdbfe'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4133_10133'%3E%3Crect width='140' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); 9 background-repeat: repeat; 10 width: 100%; 11 height: 100%; 12} 13 14:is(.dark .pattern-background) { 15 background-image: url("data:image/svg+xml,%3Csvg width='140' height='16' viewBox='0 0 140 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4133_10133)'%3E%3Cpath d='M-0.0390625 44C16.7069 44 23.8369 34.61 32.6009 24.676C41.5709 14.516 51.4569 4 70.0009 4C88.5449 4 98.4309 14.516 107.401 24.676C116.165 34.61 123.295 44 140.041 44M-0.0390625 28.004C16.7069 28 23.8369 18.612 32.6009 8.678C41.5709 -1.484 51.4569 -12 70.0009 -12C88.5449 -12 98.4309 -1.484 107.401 8.678C116.165 18.612 123.295 28 140.041 28.006M140.001 12.008C123.255 12.006 116.165 2.612 107.401 -7.322C98.4309 -17.484 88.5449 -28 70.0009 -28C51.4569 -28 41.5709 -17.484 32.6009 -7.322C23.8369 2.612 16.7069 12 -0.0390625 12.004' stroke='%231e3a8a'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4133_10133'%3E%3Crect width='140' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); 16}</code></pre></div><div class="border-border bg-card overflow-hidden rounded-md border"><div class="border-border text-foreground border-b px-3 py-2 font-medium">component.tsx</div><pre class="overflow-x-scroll bg-zinc-950 p-4 font-mono text-sm leading-normal font-normal text-white"><code id="code-background"><div className="pattern-background bg-blue-50 dark:bg-blue-950 w-full py-20 border border-border rounded-md"></div></code></pre></div><h3 class="mt-16 mb-4 text-xl font-semibold">Animated Pattern</h3><div class="pattern-animated border-border mb-6 w-full rounded-md border bg-blue-50 py-20 dark:bg-blue-950"></div><div class="border-border bg-card mb-6 overflow-hidden rounded-md border"><div class="border-border text-foreground border-b px-3 py-2 font-medium">globals.css</div><pre class="overflow-x-scroll bg-zinc-950 p-4 font-mono text-sm leading-normal font-normal text-white"><code>@keyframes moveDown { 17 from { 18 background-position: 0 0; 19 } 20 to { 21 background-position: 0 20px; /* matches height of SVG */ 22 } 23} 24 25.pattern-animated { 26 background-image: url("data:image/svg+xml,%3Csvg width='80' height='20' viewBox='0 0 80 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4173_208053)'%3E%3Cpath d='M-20.1328 4.56799C-13.1778 4.93199 -6.45181 7.37599 0.00018692 9.99999C6.45219 12.624 13.0362 15.072 20.0002 15C26.9672 14.928 33.5602 12.659 40.0002 9.99999C46.4402 7.34099 53.0332 5.07199 60.0002 4.99999C66.9642 4.92799 73.5482 7.37599 80.0002 9.99999C86.4522
2612.624 93.1782 15.068 100.133 15.432' stroke='%233b82f6'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4173_208053'%3E%3Crect width='80' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); 27 background-repeat: repeat; 28 animation: moveDown 2s linear infinite; 29} 30 31:is(.dark .pattern-animated) { 32 background-image: url("data:image/svg+xml,%3Csvg width='80' height='20' viewBox='0 0 80 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4173_208053)'%3E%3Cpath d='M-20.1328 4.56799C-13.1778 4.93199 -6.45181 7.37599 0.00018692 9.99999C6.45219 12.624 13.0362 15.072 20.0002 15C26.9672 14.928 33.5602 12.659 40.0002 9.99999C46.4402 7.34099 53.0332 5.07199 60.0002 4.99999C66.9642 4.92799 73.5482 7.37599 80.0002 9.99999C86.4522 12.624 93.1782 15.068 100.133 15.432' stroke='%233b82f6'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4173_208053'%3E%3Crect width='80' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); 33}</code></pre></div><div class="border-border bg-card overflow-hidden rounded-md border"><div class="border-border text-foreground border-b px-3 py-2 font-medium">component.tsx</div><pre class="overflow-x-scroll bg-zinc-950 p-4 font-mono text-sm leading-normal font-normal text-white"><code id="code-animated"><div className="pattern-animated bg-blue-50 dark:bg-blue-950 w-full py-20 border border-border rounded-md"></div></code></pre></div></section></div></main><!--$--><!--/$-->
33<script src="/_next/static/chunks/webpack-739637aaf3cff029.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52" id="_R_" async=""></script>
33<script>(self.__next_f=self.__next_f||[]).push([0])</script>
33<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[21942,[\"736\",\"static/chunks/736-a38c785747baf0d9.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"265\",\"static/chunks/265-118f6322ee0dfc5b.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"248\",\"static/chunks/248-02622a80685d988c.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"177\",\"static/chunks/app/layout-f1b6ab3467d37c02.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\"],\"ThemeProvider\"]\n3:I[48476,[\"736\",\"static/chunks/736-a38c785747baf0d9.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"265\",\"static/chunks/265-118f6322ee0dfc5b.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"248\",\"static/chunks/248-02622a80685d988c.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"177\",\"static/chunks/app/layout-f1b6ab3467d37c02.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\"],\"ModeToggle\"]\n4:I[57121,[],\"\"]\n5:I[74581,[],\"\"]\n7:I[90484,[],\"OutletBoundary\"]\n8:\"$Sreact.suspense\"\na:I[90484,[],\"ViewportBoundary\"]\nc:I[90484,[],\"MetadataBoundary\"]\ne:I[27123,[],\"\"]\nf:I[86869,[],\"IconMark\"]\n:HL[\"/_next/static/media/0a86735c6520d94f-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/13971731025ec697-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/26d0ba92e140f0dc-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/3db89b18d75c6a34-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/4cf2300e9c8272f7-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/4f11357dfbf1285b-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/68180864d7f93f02-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/6e50af2f4c313e23-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/93f479601ee12b01-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/af4bf8399d1aacdf-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/bdcf2ec322da5503-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/e4af272ccee01ff0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/91854d2a796bed31.css?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"style\"]\n:HL[\"/_next/static/css/cb5e1d0ac3d5e558.css?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"style\"]\n:HL[\"/_next/static/css/17c0cbd8673a72fd.css?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"style\"]\n"])</script>
33<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"K3UdLX3zyPkG6k9_KcOye\",\"c\":[\"\",\"landing-page\",\"patterns\",\"patterns-docs\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"landing-page\",{\"children\":[[\"category\",\"patterns\",\"d\"],{\"children\":[[\"component\",\"patterns-docs\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/91854d2a796bed31.css?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/cb5e1d0ac3d5e558.css?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"suppressHydrationWarning\":true,\"className\":\"__variable_188709 __variable_9a8899 __variable_eb41fe __variable_3d9088 __variable_c2c3d1 __variable_ad9d8d __variable_d878d4 __variable_d44934 __variable_f367f3 __variable_0d7163 __variable_8c1962 __variable_8cfa85 relative antialiased\",\"children\":[\"$\",\"$L2\",null,{\"attribute\":\"class\",\"defaultTheme\":\"system\",\"enableSystem\":true,\"disableTransitionOnChange\":true,\"children\":[[\"$\",\"div\",null,{\"className\":\"fixed right-3 bottom-3 isolate z-99\",\"children\":[\"$\",\"$L3\",null,{}]}],[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L6\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/17c0cbd8673a72fd.
33css?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"$L7\",null,{\"children\":[\"$\",\"$8\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@9\"}]}]]}],{},null,false,false]},null,false,false]},null,false,false]},null,false,false]},null,false,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$La\",null,{\"children\":\"$@b\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Lc\",null,{\"children\":[\"$\",\"$8\",null,{\"name\":\"Next.Metadata\",\"children\":\"$@d\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$e\",[]],\"S\":false}\n"])</script>
33<script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\nd:[[\"$\",\"title\",\"0\",{\"children\":\"Pro Blocks / shadcndesign\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Pro Blocks is a collection of premium UI components and blocks for shadcn/ui\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?531babc765ddae2f\",\"type\":\"image/x-icon\",\"sizes\":\"32x32\"}],[\"$\",\"$Lf\",\"3\",{}]]\n9:null\n"])</script>
33<script>self.__next_f.push([1,"10:I[57173,[\"736\",\"static/chunks/736-a38c785747baf0d9.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"265\",\"static/chunks/265-118f6322ee0dfc5b.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"153\",\"static/chunks/153-aaf4023bcf3c4c2e.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"122\",\"static/chunks/122-452306eaaa3e3796.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"909\",\"static/chunks/909-60e23bb3c0b88ad2.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"87\",\"static/chunks/87-5016bb2be276cc5b.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"155\",\"static/chunks/155-37a4c2b56edfc6b7.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\",\"515\",\"static/chunks/app/landing-page/%5Bcategory%5D/%5Bcomponent%5D/page-1104f35d4c6ef660.js?dpl=dpl_4ZoCPhYhbj8t994tZrVSyngzci52\"],\"PatternsDocumentation\"]\n6:[\"$\",\"$L10\",null,{}]\n"])</script>
33</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.