PageSourceSearch

https://uitopia.vercel.app/blocks

html uitopia.vercel.app collected 2026-10-03 07:55:25 UTC 76,375 bytes, 2 lines download raw bytes

1<!DOCTYPE html><!--WztIIa_9Kbz_k4kggf9bg--><html class="geist_d5956f67-module__L54rSq__variable inter_b56b03d3-module__AhBKkG__variable geist_mono_4e26fe1b-module__-_Fr9q__variable redaction_f83894a3-module__QZnDEW__variable" lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/InterVariableFont-s.p.53d7b668.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/InterVariableItalic-s.p.8c0e9517.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/Redaction_35_Regular-s.p.85f0a2c5.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/chunks/d0ecd2a4b5669fb2.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/30d27ca6544549e8.css" data-precedence="next"/><style data-precedence="base-ui:low" data-href="base-ui-disable-scrollbar">.base-ui-disable-scrollbar{scrollbar-width:none}.base-ui-disable-scrollbar::-webkit-scrollbar{display:none}</style><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/fc6c9c520bdbfcc9.js"/>
1<script src="/_next/static/chunks/9ddf0dde5a303840.js" async=""></script>
1<script src="/_next/static/chunks/3d40e553ae400c39.js" async=""></script>
1<script src="/_next/static/chunks/0fad592c824f7409.js" async=""></script>
1<script src="/_next/static/chunks/turbopack-d1da338efaeb1eb2.js" async=""></script>
1<script src="/_next/static/chunks/eb0f24c42c5fc0f2.js" async=""></script>
1<script src="/_next/static/chunks/f6f90bfe03746862.js" async=""></script>
1<script src="/_next/static/chunks/140b6c97e8ce5744.js" async=""></script>
1<script src="/_next/static/chunks/5b2dc1a4e3b18da6.js" async=""></script>
1<script src="/_next/static/chunks/d96012bcfc98706a.js" async=""></script>
1<script src="/_next/static/chunks/d80b3790a119a285.js" async=""></script>
1<script src="/_next/static/chunks/0034eb249b83b7b4.js" async=""></script>
1<script src="/_next/static/chunks/ddd7f80301b6d4be.js" async=""></script>
1<script src="/_next/static/chunks/8af5cb8b2b0ebbca.js" async=""></script>
1<script src="/_next/static/chunks/6edc135f266fe98a.js" async=""></script>
1<script src="/_next/static/chunks/0932fc2d1e82b969.js" async=""></script>
1<script src="/_next/static/chunks/8b49aeba63282aed.js" async=""></script>
1<script src="/_next/static/chunks/a1c8a9a126d0d9f2.js" async=""></script>
1<script src="/_next/static/chunks/5b28aeafd7a509c9.js" async=""></script>
1<script src="/_next/static/chunks/780864fbfcfdc689.js" async=""></script>
1<script src="/_next/static/chunks/235aab60d40cf6a2.js" async=""></script>
1<script src="/_next/static/chunks/ac848961c22f05d0.js" async=""></script>
1<script src="/_next/static/chunks/4795b57a2b92bc3f.js" async=""></script>
1<meta name="next-size-adjust" content=""/><meta name="theme-color" media="(prefers-color-scheme: light)" content="white"/><meta name="theme-color" media="(prefers-color-scheme: dark)" content="black"/><meta name="color-scheme" content="dark light"/><title>Building Blocks for the Web - ui/topia</title><meta name="description" content="Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever."/><meta name="keywords" content="Next.js,React,Tailwind CSS,UI Library,UI Kit,UI Components,UI Elements,Open Source,shadcn/ui"/><meta property="og:title" content="Building Blocks for the Web"/><meta property="og:description" content="Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever."/><meta property="og:url" content="https://uitopia.vercel.app"/><meta property="og:site_name" content="ui/topia"/><meta property="og:image" content="https://uitopia.vercel.app/api/og"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@kyuotaka"/><meta name="twitter:title" content="Building Blocks for the Web"/><meta name="twitter:description" content="Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever."/><meta name="twitter:image" content="https://uitopia.vercel.app/api/og"/><link rel="icon" href="/favicon.ico?favicon.a5d7b97c.ico" sizes="32x31" type="image/x-icon"/>
1<script src="/_next/static/chunks/a6dad97d9634a72d.js" noModule=""></script>
1</head><body class="min-h-svh bg-background font-sans 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="bg-fd-secondary/50 p-3 empty:hidden"></div><div class="relative flex min-h-svh flex-col bg-background"><div><section class="border-grid"><div class="container-wrapper"><div class="flex flex-col items-start gap-1 py-8 md:py-10 lg:py-12"><div class="container py-4"><h1 class="font-medium text-3xl leading-tight tracking-tight md:text-4xl lg:leading-[1.1]">Building <span class="span-highlight">blocks</span> for the web</h1><p class="max-w-2xl text-balance font-light text-base text-foreground sm:text-lg">Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.</p><div class="flex w-full items-center justify-start gap-2 pt-2"><a class="relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg bg-clip-padding font-medium whitespace-nowrap outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] hover:bg-primary/90 [&amp;:is(:active,[data-pressed])]:inset-shadow-[0_1px_--theme(--color-black/8%)] [&amp;:is(:disabled,:active,[data-pressed])]:shadow-none min-h-7 gap-1.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] border border-primary bg-linear-to-b from-primary/80 to-primary text-primary-foreground text-xs shadow-md shadow-zinc-950/30 ring ring-white/20 ring-inset transition-[filter] duration-200 hover:brightness-125 active:brightness-95 dark:border-primary dark:from-primary dark:to-primary/80 **:[text-shadow:0_1px_0_var(--color-primary)]" href="/blocks#blocks">Browse blocks</a></div><div class="mt-8 scroll-mt-24" id="blocks"><div class="flex items-center py-4"><div class="relative overflow-hidden"><div data-has-overflow-x="" data-has-overflow-y="" role="presentation" style="position:relative;--scroll-area-corner-height:0px;--scroll-area-corner-width:0px" class="min-h-0"><div data-has-overflow-x="" data-has-overflow-y="" role="presentation" data-id="base-ui-_R_29fiumlb_-viewport" tabindex="0" class="size-full overscroll-contain rounded-[inherit] outline-none transition-[box-shadow] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background max-w-none base-ui-disable-scrollbar" style="overflow:scroll" data-slot="scroll-area-viewport"><div class="flex items-center"><a class="flex h-7 shrink-0 items-center justify-center whitespace-nowrap rounded-full px-4 text-center font-medium text-muted-foreground text-sm transition-colors hover:text-foreground data-[active=true]:bg-accent data-[active=true]:text-foreground" data-active="true" href="/blocks">Featured</a><a class="flex h-7 shrink-0 items-center justify-center whitespace-nowrap rounded-full px-4 text-center font-medium text-muted-foreground text-sm transition-colors hover:text-foreground data-[active=true]:bg-accent data-[active=true]:text-foreground" data-active="false" href="/blocks/authentication">Authentication</a></div><div data-orientation="horizontal" data-has-overflow-x="" data-has-overflow-y="" data-id="base-ui-_R_29fiumlb_-scrollbar" style="position:absolute;touch-action:none;-webkit-user-select:none;user-select:none;inset-inline-start:0;inset-inline-end:var(--scroll-area-corner-width);bottom:0;--scroll-area-thumb-width:0px" data-slot="scroll-area-scrollbar" class="m-0.5 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100 invisible"><div data-orientation="horizontal" style="width:var(--scroll-area-thumb-width)" data-slot="scroll-area-thumb" class="relative flex-1 rounded-full bg-foreground
1/20"></div></div></div><div data-orientation="vertical" data-has-overflow-x="" data-has-overflow-y="" data-id="base-ui-_R_29fiumlb_-scrollbar" style="position:absolute;touch-action:none;-webkit-user-select:none;user-select:none;top:0;bottom:var(--scroll-area-corner-height);inset-inline-end:0;--scroll-area-thumb-height:0px" data-slot="scroll-area-scrollbar" class="m-0.5 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100"><div data-orientation="vertical" style="height:var(--scroll-area-thumb-height)" data-slot="scroll-area-thumb" class="relative flex-1 rounded-full bg-foreground/20"></div></div><div style="position:absolute;bottom:0;inset-inline-end:0;width:0;height:0" data-slot="scroll-area-corner"></div></div></div></div></div><div class="container-wrapper flex-1"><div><div class="border-grid border-b py-8 first:pt-6 last:border-b-0 md:py-12"><div class="relative"><!--$?--><template id="B:0"></template><div class="flex min-h-[350px] w-full items-center justify-center rounded-xl border bg-background"><div class="flex items-center justify-center text-muted-foreground text-sm">Loading component...</div></div><!--/$--></div></div><div class="border-grid border-b py-8 first:pt-6 last:border-b-0 md:py-12"><div class="relative"><!--$?--><template id="B:1"></template><div class="flex min-h-[350px] w-full items-center justify-center rounded-xl border bg-background"><div class="flex items-center justify-center text-muted-foreground text-sm">Loading component...</div></div><!--/$--></div></div></div><!--$--><!--/$--></div></div></div></div></section></div></div>
1<script>requestAnimationFrame(function(){$RT=performance.now()});</script>
1<script src="/_next/static/chunks/fc6c9c520bdbfcc9.js" id="_R_" async=""></script>
1<div hidden id="S:0"><div class="group/block-view-wrapper flex min-w-0 flex-col items-stretch gap-4" data-view="preview" id="login-03" style="--height:auto"><div class="flex w-full items-center gap-2 md:pr-[14px]"><div data-orientation="horizontal" data-activation-direction="none" data-slot="tabs" class="flex-col data-[orientation=vertical]:flex-row hidden gap-0 lg:flex"><div data-orientation="horizontal" data-activation-direction="none" role="tablist" data-slot="tabs-list" class="relative z-0 flex w-fit justify-center gap-x-0.5 data-[orientation=vertical]:flex-col bg-muted text-muted-foreground/64 h-7 items-center rounded-md p-0 px-[calc(theme(spacing.1)_-_2px)] py-[theme(spacing.1)]"><button type="button" data-selected="" data-orientation="horizontal" aria-disabled="false" tabindex="-1" role="tab" aria-selected="true" id="base-ui-_R_19alupfiumlb_" data-composite-item-active="" data-slot="tabs-trigger" class="flex flex-1 shrink-0 cursor-pointer items-center justify-center whitespace-nowrap border border-transparent font-medium outline-none transition-[color,background-color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-disabled:opacity-64 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 hover:text-muted-foreground data-selected:text-foreground gap-1.5 py-[calc(--spacing(1.5)-1px)] data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start h-[1.45rem] rounded-sm px-2 text-xs">Preview</button><button type="button" data-orientation="horizontal" aria-disabled="false" tabindex="-1" role="tab" aria-selected="false" id="base-ui-_R_29alupfiumlb_" data-slot="tabs-trigger" class="flex flex-1 shrink-0 cursor-pointer items-center justify-center whitespace-nowrap border border-transparent font-medium outline-none transition-[color,background-color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-disabled:opacity-64 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 hover:text-muted-foreground data-selected:text-foreground gap-1.5 py-[calc(--spacing(1.5)-1px)] data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start h-[1.45rem] rounded-sm px-2 text-xs">Code</button><span data-orientation="horizontal" data-activation-direction="none" role="presentation" hidden="" data-slot="tab-indicator" data-instance-id="tab-9eum-1" class="-translate-y-(--active-tab-bottom) absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) transition-[width,translate] duration-200 ease-in-out -z-1 rounded-md bg-background shadow-sm dark:bg-accent"></span></div></div><div data-orientation="vertical" role="none" class="shrink-0 bg-border w-[1px] mx-2 hidden h-4 lg:flex"></div><a class="font-medium text-sm underline-offset-2 hover:underline" href="#login-03">A simple login form.</a><div class="ml-auto hidden items-center gap-2 md:flex"><div class="hidden h-7 items-center gap-1.5 rounded-md border p-[2px] shadow-none lg:flex"><button type="button" data-slot="button" class="relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 border bg-clip-padding text-sm font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border-transparent hover:bg-accent data-pressed:bg-accent size-8 h-[22px] w-[22px] min-w-0 rounded-sm p-0" title="Desktop"><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-monitor h-3.5 w-3.5" aria-hidden="true"><rect width="20" height="14" x="2" y="3" rx="2"></rect><line x1="8" x2="16" y1="21" y2="21"></line><line x1="12" x2="12" y1="17" y2="21"></line></svg></button><button type="button" data-slot="button" class="relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 border bg-clip-padding text-sm font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;
1size-&#x27;])]:size-4 border-transparent hover:bg-accent data-pressed:bg-accent size-8 h-[22px] w-[22px] min-w-0 rounded-sm p-0" title="Tablet"><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-tablet h-3.5 w-3.5" aria-hidden="true"><rect width="16" height="20" x="4" y="2" rx="2" ry="2"></rect><line x1="12" x2="12.01" y1="18" y2="18"></line></svg></button><button type="button" data-slot="button" class="relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 border bg-clip-padding text-sm font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border-transparent hover:bg-accent data-pressed:bg-accent size-8 h-[22px] w-[22px] min-w-0 rounded-sm p-0" title="Mobile"><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-smartphone h-3.5 w-3.5" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><path d="M12 18h.01"></path></svg></button></div><div data-orientation="vertical" role="none" class="shrink-0 bg-border w-[1px] mx-1 hidden h-4 md:flex"></div><div class="flex h-7 items-center gap-1 rounded-md border p-[2px]"><button type="button" data-slot="button" class="relative shrink-0 cursor-pointer items-center justify-center border bg-clip-padding text-sm font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border-transparent hover:bg-accent data-pressed:bg-accent min-h-7 py-[calc(--spacing(1)-1px)] hidden h-[22px] w-auto gap-1 rounded-sm px-2 md:flex lg:w-auto"><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-terminal" aria-hidden="true"><path d="M12 19h8"></path><path d="m4 17 6-6-6-6"></path></svg><span class="hidden lg:inline">npx shadcn@latest add @uitopia/login-03</span></button></div><div data-orientation="vertical" role="none" class="shrink-0 bg-border w-[1px] mx-1 hidden h-4 xl:flex"></div><a aria-label="Open in v0" class="relative shrink-0 cursor-pointer items-center justify-center border bg-clip-padding font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border-primary shadow-primary/24 not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] [&amp;:is(:active,[data-pressed])]:inset-shadow-[0_1px_--theme(--color-black/8%)] [&amp;:is(:disabled,:active,[data-pressed])]:shadow-none min-h-7 py-[calc(--spacing(1)-1px)] h-7 ga
1p-1 rounded-lg bg-black px-3 text-white text-xs hover:bg-black hover:text-white dark:bg-white dark:text-black hidden shadow-none sm:flex" rel="noreferrer" target="_blank" href="https://v0.dev/chat/api/open?url=https%3A%2F%2Fuitopia.vercel.app%2Fr%2Flogin-03.json">Open in <svg class="h-5 w-5 text-current" fill="none" viewBox="0 0 40 20" xmlns="http://www.w3.org/2000/svg"><path d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z" fill="currentColor"></path><path d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z" fill="currentColor"></path></svg></a></div></div><div class="group-data-[view=code]/block-view-wrapper:hidden" style="min-height:fit-content"><div class="grid w-full gap-4"><div class="flex h-full w-full data-[panel-group-direction=vertical]:flex-col relative z-10" style="display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%" data-panel-group="" data-panel-group-direction="horizontal" data-panel-group-id="_R_ilupfiumlb_"><div class="relative rounded-xl border bg-background" style="flex-basis:0;flex-grow:100;flex-shrink:1;overflow:hidden" data-panel="" data-panel-group-id="_R_ilupfiumlb_" data-panel-id="_R_3ilupfiumlb_" data-panel-size="100.0"><div class="flex w-full items-center justify-center p-4"><div class="w-full max-w-md"><!--$?--><template id="B:2"></template><div class="flex min-h-[450px] w-full items-center justify-center text-muted-foreground text-sm"><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-loader mr-2 h-4 w-4 animate-spin" aria-hidden="true"><path d="M12 2v4"></path><path d="m16.2 7.8 2.9-2.9"></path><path d="M18 12h4"></path><path d="m16.2 16.2 2.9 2.9"></path><path d="M12 18v4"></path><path d="m4.9 19.1 2.9-2.9"></path><path d="M2 12h4"></path><path d="m4.9 4.9 2.9 2.9"></path></svg>Loading ...</div><!--/$--></div></div></div><div class="data-[panel-group-direction=vertical]:after:-translate-y-1/2 items-center justify-center after:inset-y-0 after:left-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 [&amp;[data-panel-group-direction=vertical]&gt;div]:rotate-90 after:-translate-y-1/2 relative hidden w-3 bg-transparent p-0 after:absolute after:top-1/2 after:right-0 after:h-8 after:w-[6px] after:translate-x-[-1px] after:rounded-full after:bg-border after:transition-all after:hover:h-10 md:block" role="separator" style="touch-action:none;user-select:none" tabindex="0" data-panel-group-direction="horizontal" data-panel-group-id="_R_ilupfiumlb_" data-resize-handle="" data-resize-handle-state="inactive" data-panel-resize-handle-enabled="true" data-panel-resize-handle-id="_R_5ilupfiumlb_"></div><div class="" style="flex-basis:0;flex-grow:0.00;flex-shrink:1;overflow:hidden" data-panel="" data-panel-group-id="_R_ilupfiumlb_" data-panel-id="_R_7ilupfiumlb_" data-panel-size="0.0"></div></div></div></div><div class="flex items-center justify-center text-muted-foreground text-sm group-data-[view=preview]/block-view-wrapper:hidden" style="height:fit-content;min-height:300px">Loading code...</div></div></div>
1<script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0};
2$RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:0","S:0")</script>
2<div hidden id="S:1"><div class="group/block-view-wrapper flex min-w-0 flex-col items-stretch gap-4" data-view="preview" id="login-05" style="--height:auto"><div class="flex w-full items-center gap-2 md:pr-[14px]"><div data-orientation="horizontal" data-activation-direction="none" data-slot="tabs" class="flex-col data-[orientation=vertical]:flex-row hidden gap-0 lg:flex"><div data-orientation="horizontal" data-activation-direction="none" role="tablist" data-slot="tabs-list" class="relative z-0 flex w-fit justify-center gap-x-0.5 data-[orientation=vertical]:flex-col bg-muted text-muted-foreground/64 h-7 items-center rounded-md p-0 px-[calc(theme(spacing.1)_-_2px)] py-[theme(spacing.1)]"><button type="button" data-selected="" data-orientation="horizontal" aria-disabled="false" tabindex="-1" role="tab" aria-selected="true" id="base-ui-_R_19clupfiumlb_" data-composite-item-active="" data-slot="tabs-trigger" class="flex flex-1 shrink-0 cursor-pointer items-center justify-center whitespace-nowrap border border-transparent font-medium outline-none transition-[color,background-color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-disabled:opacity-64 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 hover:text-muted-foreground data-selected:text-foreground gap-1.5 py-[calc(--spacing(1.5)-1px)] data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start h-[1.45rem] rounded-sm px-2 text-xs">Preview</button><button type="button" data-orientation="horizontal" aria-disabled="false" tabindex="-1" role="tab" aria-selected="false" id="base-ui-_R_29clupfiumlb_" data-slot="tabs-trigger" class="flex flex-1 shrink-0 cursor-pointer items-center justify-center whitespace-nowrap border border-transparent font-medium outline-none transition-[color,background-color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-disabled:opacity-64 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 hover:text-muted-foreground data-selected:text-foreground gap-1.5 py-[calc(--spacing(1.5)-1px)] data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start h-[1.45rem] rounded-sm px-2 text-xs">Code</button><span data-orientation="horizontal" data-activation-direction="none" role="presentation" hidden="" data-slot="tab-indicator" data-instance-id="tab-qziz-2" class="-translate-y-(--active-tab-bottom) absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) transition-[width,translate] duration-200 ease-in-out -z-1 rounded-md bg-background shadow-sm dark:bg-accent"></span></div></div><div data-orientation="vertical" role="none" class="shrink-0 bg-border w-[1px] mx-2 hidden h-4 lg:flex"></div><a class="font-medium text-sm underline-offset-2 hover:underline" href="#login-05">Full Page Login with Icons.</a><div class="ml-auto hidden items-center gap-2 md:flex"><div class="hidden h-7 items-center gap-1.5 rounded-md border p-[2px] shadow-none lg:flex"><button type="button" data-slot="button" class="relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 border bg-clip-padding text-sm font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border-transparent hover:bg-accent data-pressed:bg-accent size-8 h-[22px] w-[22px] min-w-0 rounded-sm p-0" title="Desktop"><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-monitor h-3.5 w-3.5" aria-hidden="true"><rect width="20" height="14" x="2" y="3" rx="2"></rect><line x1="8" x2="16" y1="21" y2="21"></line><line x1="12" x2="12" y1="17" y2="21"></line></svg></button><button type="button" data-slot="button" class="relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 border bg-clip-padding text-sm font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;
2size-&#x27;])]:size-4 border-transparent hover:bg-accent data-pressed:bg-accent size-8 h-[22px] w-[22px] min-w-0 rounded-sm p-0" title="Tablet"><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-tablet h-3.5 w-3.5" aria-hidden="true"><rect width="16" height="20" x="4" y="2" rx="2" ry="2"></rect><line x1="12" x2="12.01" y1="18" y2="18"></line></svg></button><button type="button" data-slot="button" class="relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 border bg-clip-padding text-sm font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border-transparent hover:bg-accent data-pressed:bg-accent size-8 h-[22px] w-[22px] min-w-0 rounded-sm p-0" title="Mobile"><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-smartphone h-3.5 w-3.5" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><path d="M12 18h.01"></path></svg></button></div><div data-orientation="vertical" role="none" class="shrink-0 bg-border w-[1px] mx-1 hidden h-4 md:flex"></div><div class="flex h-7 items-center gap-1 rounded-md border p-[2px]"><button type="button" data-slot="button" class="relative shrink-0 cursor-pointer items-center justify-center border bg-clip-padding text-sm font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border-transparent hover:bg-accent data-pressed:bg-accent min-h-7 py-[calc(--spacing(1)-1px)] hidden h-[22px] w-auto gap-1 rounded-sm px-2 md:flex lg:w-auto"><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-terminal" aria-hidden="true"><path d="M12 19h8"></path><path d="m4 17 6-6-6-6"></path></svg><span class="hidden lg:inline">npx shadcn@latest add @uitopia/login-05</span></button></div><div data-orientation="vertical" role="none" class="shrink-0 bg-border w-[1px] mx-1 hidden h-4 xl:flex"></div><a aria-label="Open in v0" class="relative shrink-0 cursor-pointer items-center justify-center border bg-clip-padding font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border-primary shadow-primary/24 not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] [&amp;:is(:active,[data-pressed])]:inset-shadow-[0_1px_--theme(--color-black/8%)] [&amp;:is(:disabled,:active,[data-pressed])]:shadow-none min-h-7 py-[calc(--spacing(1)-1px)] h-7 ga
2p-1 rounded-lg bg-black px-3 text-white text-xs hover:bg-black hover:text-white dark:bg-white dark:text-black hidden shadow-none sm:flex" rel="noreferrer" target="_blank" href="https://v0.dev/chat/api/open?url=https%3A%2F%2Fuitopia.vercel.app%2Fr%2Flogin-05.json">Open in <svg class="h-5 w-5 text-current" fill="none" viewBox="0 0 40 20" xmlns="http://www.w3.org/2000/svg"><path d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z" fill="currentColor"></path><path d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z" fill="currentColor"></path></svg></a></div></div><div class="group-data-[view=code]/block-view-wrapper:hidden" style="min-height:fit-content"><div class="grid w-full gap-4"><div class="flex h-full w-full data-[panel-group-direction=vertical]:flex-col relative z-10" style="display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%" data-panel-group="" data-panel-group-direction="horizontal" data-panel-group-id="_R_klupfiumlb_"><div class="relative rounded-xl border bg-background" style="flex-basis:0;flex-grow:100;flex-shrink:1;overflow:hidden" data-panel="" data-panel-group-id="_R_klupfiumlb_" data-panel-id="_R_3klupfiumlb_" data-panel-size="100.0"><div class="flex w-full items-center justify-center p-4"><div class="w-full max-w-md"><!--$?--><template id="B:3"></template><div class="flex min-h-[450px] w-full items-center justify-center text-muted-foreground text-sm"><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-loader mr-2 h-4 w-4 animate-spin" aria-hidden="true"><path d="M12 2v4"></path><path d="m16.2 7.8 2.9-2.9"></path><path d="M18 12h4"></path><path d="m16.2 16.2 2.9 2.9"></path><path d="M12 18v4"></path><path d="m4.9 19.1 2.9-2.9"></path><path d="M2 12h4"></path><path d="m4.9 4.9 2.9 2.9"></path></svg>Loading ...</div><!--/$--></div></div></div><div class="data-[panel-group-direction=vertical]:after:-translate-y-1/2 items-center justify-center after:inset-y-0 after:left-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 [&amp;[data-panel-group-direction=vertical]&gt;div]:rotate-90 after:-translate-y-1/2 relative hidden w-3 bg-transparent p-0 after:absolute after:top-1/2 after:right-0 after:h-8 after:w-[6px] after:translate-x-[-1px] after:rounded-full after:bg-border after:transition-all after:hover:h-10 md:block" role="separator" style="touch-action:none;user-select:none" tabindex="0" data-panel-group-direction="horizontal" data-panel-group-id="_R_klupfiumlb_" data-resize-handle="" data-resize-handle-state="inactive" data-panel-resize-handle-enabled="true" data-panel-resize-handle-id="_R_5klupfiumlb_"></div><div class="" style="flex-basis:0;flex-grow:0.00;flex-shrink:1;overflow:hidden" data-panel="" data-panel-group-id="_R_klupfiumlb_" data-panel-id="_R_7klupfiumlb_" data-panel-size="0.0"></div></div></div></div><div class="flex items-center justify-center text-muted-foreground text-sm group-data-[view=preview]/block-view-wrapper:hidden" style="height:fit-content;min-height:300px">Loading code...</div></div></div>
2<script>$RC("B:1","S:1")</script>
2<div hidden id="S:2"><div class="flex min-h-svh w-full items-center justify-center p-6 md:p-10"><div class="w-full max-w-sm"><div class="flex flex-col gap-6"><div data-slot="card" class="relative flex flex-col gap-6 rounded-2xl border bg-card bg-clip-padding py-6 text-card-foreground shadow-xs before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]"><div data-slot="card-header" class="@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6"><div data-slot="card-title" class="font-semibold text-2xl">Login</div><div data-slot="card-description" class="text-muted-foreground text-sm">Enter your email below to login to your account</div></div><div data-slot="card-content" class="px-6"><form><div class="flex flex-col gap-6"><div class="grid gap-2"><label data-slot="label" class="inline-flex items-center gap-2 text-sm/4" for="email">Email</label><span data-slot="input-control" class="relative inline-flex w-full rounded-lg border border-input bg-background bg-clip-padding text-base/5 shadow-xs ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/8%)] [&amp;:has(:disabled,:focus-visible,[aria-invalid])]:shadow-none"><input id="email" data-slot="input" placeholder="[email protected]" required="" type="email" class="w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none placeholder:text-muted-foreground/64"/></span></div><div class="grid gap-2"><div class="flex items-center"><label data-slot="label" class="inline-flex items-center gap-2 text-sm/4" for="password">Password</label><a class="ml-auto inline-block text-sm underline-offset-4 hover:underline" href="#">Forgot your password?</a></div><span data-slot="input-control" class="relative inline-flex w-full rounded-lg border border-input bg-background bg-clip-padding text-base/5 shadow-xs ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/8%)] [&amp;:has(:disabled,:focus-visible,[aria-invalid])]:shadow-none"><input id="password" data-slot="input" required="" type="password" class="w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none placeholder:text-muted-foreground/64"/></span></div><button type="submit" data-slot="button" class="relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border bg-clip-padding text-sm font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;
2size-&#x27;])]:size-4 border-primary bg-primary text-primary-foreground shadow-xs shadow-primary/24 not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] hover:bg-primary/90 [&amp;:is(:active,[data-pressed])]:inset-shadow-[0_1px_--theme(--color-black/8%)] [&amp;:is(:disabled,:active,[data-pressed])]:shadow-none min-h-8 px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] w-full">Login</button><button type="button" data-slot="button" class="relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border bg-clip-padding text-sm font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border-border bg-background shadow-xs not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/4%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/8%)] [&amp;:is(:disabled,:active,[data-pressed])]:shadow-none [&amp;:is(:hover,[data-pressed])]:bg-accent/50 dark:[&amp;:is(:hover,[data-pressed])]:bg-input/64 min-h-8 px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] w-full">Login with Google</button></div><div class="mt-4 text-center text-sm">Don&#x27;t have an account?<!-- --> <a class="underline underline-offset-4" href="#">Sign up</a></div></form></div></div></div></div></div></div>
2<script>$RC("B:2","S:2")</script>
2<div hidden id="S:3"><div class="flex min-h-screen items-center justify-center"><div class="mx-auto w-full max-w-xs space-y-6"><div class="space-y-2 text-center"><svg fill="currentColor" height="48" viewBox="0 0 40 48" width="40" class="mx-auto h-16 w-16"><clipPath id="a"><path d="m0 0h40v48h-40z"></path></clipPath><g clip-path="url(#a)"><path d="m25.0887 5.05386-3.933-1.05386-3.3145 12.3696-2.9923-11.16736-3.9331 1.05386 3.233 12.0655-8.05262-8.0526-2.87919 2.8792 8.83271 8.8328-10.99975-2.9474-1.05385625 3.933 12.01860625 3.2204c-.1376-.5935-.2104-1.2119-.2104-1.8473 0-4.4976 3.646-8.1436 8.1437-8.1436 4.4976 0 8.1436 3.646 8.1436 8.1436 0 .6313-.0719 1.2459-.2078 1.8359l10.9227 2.9267 1.0538-3.933-12.0664-3.2332 11.0005-2.9476-1.0539-3.933-12.0659 3.233 8.0526-8.0526-2.8792-2.87916-8.7102 8.71026z"></path><path d="m27.8723 26.2214c-.3372 1.4256-1.0491 2.7063-2.0259 3.7324l7.913 7.9131 2.8792-2.8792z"></path><path d="m25.7665 30.0366c-.9886 1.0097-2.2379 1.7632-3.6389 2.1515l2.8794 10.746 3.933-1.0539z"></path><path d="m21.9807 32.2274c-.65.1671-1.3313.2559-2.0334.2559-.7522 0-1.4806-.102-2.1721-.2929l-2.882 10.7558 3.933 1.0538z"></path><path d="m17.6361 32.1507c-1.3796-.4076-2.6067-1.1707-3.5751-2.1833l-7.9325 7.9325 2.87919 2.8792z"></path><path d="m13.9956 29.8973c-.9518-1.019-1.6451-2.2826-1.9751-3.6862l-10.95836 2.9363 1.05385 3.933z"></path></g></svg><h1 class="font-semibold text-3xl">Welcome back</h1><p class="text-muted-foreground">Sign in to access to your dashboard, settings and projects.</p></div><div class="space-y-5"><button type="button" data-slot="button" class="relative inline-flex shrink-0 cursor-pointer items-center rounded-lg border bg-clip-padding text-sm font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border-border bg-background shadow-xs not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/4%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/8%)] [&amp;:is(:disabled,:active,[data-pressed])]:shadow-none [&amp;:is(:hover,[data-pressed])]:bg-accent/50 dark:[&amp;:is(:hover,[data-pressed])]:bg-input/64 min-h-8 px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] w-full justify-center gap-2"><svg fill="currentColor" viewBox="0 0 24 24" class="h-4 w-4"><path d="M3.06364 7.50914C4.70909 4.24092 8.09084 2 12 2C14.6954 2 16.959 2.99095 18.6909 4.60455L15.8227 7.47274C14.7864 6.48185 13.4681 5.97727 12 5.97727C9.39542 5.97727 7.19084 7.73637 6.40455 10.1C6.2045 10.7 6.09086 11.3409 6.09086 12C6.09086 12.6591 6.2045 13.3 6.40455 13.9C7.19084 16.2636 9.39542 18.0227 12 18.0227C13.3454 18.0227 14.4909 17.6682 15.3864 17.0682C16.4454 16.3591 17.15 15.3 17.3818 14.05H12V10.1818H21.4181C21.5364 10.8363 21.6 11.5182 21.6 12.2273C21.6 15.2727 20.5091 17.8363 18.6181 19.5773C16.9636 21.1046 14.7 22 12 22C8.09084 22 4.70909 19.7591 3.06364 16.4909C2.38638 15.1409 2 13.6136 2 12C2 10.3864 2.38638 8.85911 3.06364 7.50914Z"></path></svg>Sign in with Google</button><div class="flex items-center gap-2"><div data-orientation="horizontal" role="separator" aria-orientation="horizontal" data-slot="separator" class="bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^=&#x27;h-&#x27;]]:not-[[class*=&#x27;_h-&#x27;]]:self-stretch flex-1"></div><span class="text-muted-foreground text-sm">or sign in with email</span><div data-orientation="horizontal" role="separator" aria-orientation="horizontal" data-slot="separator" class="bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^=&#x27;h-&#x27;]]:not-[[class*=&#x27;_h-&#x27;]]:self-stretch flex-1"></div></div><div class="space-y-6"><div><label data-slot="label" class="inline-flex items-center gap-2 text-sm/4" for="email">Email</label><div class="relative mt-2.5"><span data-slot="input-control" class="relative inline-flex w-full rounded-lg border border-input bg-background bg-clip-padding text-base/5 shadow-xs ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/8%)] [&amp;:has(:disabled,:focus-visible,[aria-invalid])]:shadow-none peer ps-9"><input id="email" data-slot="input" placeholder="[email protected]" type="email" class="w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none placeholder:text-muted-foreground
2/64"/></span><div class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg></div></div></div><div><div class="flex items-center justify-between"><label data-slot="label" class="inline-flex items-center gap-2 text-sm/4" for="password">Password</label><a class="text-primary text-sm hover:underline" href="#">Forgot Password?</a></div><div class="relative mt-2.5"><span data-slot="input-control" class="relative inline-flex w-full rounded-lg border border-input bg-background bg-clip-padding text-base/5 shadow-xs ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/8%)] [&amp;:has(:disabled,:focus-visible,[aria-invalid])]:shadow-none ps-9 pe-9"><input id="password" data-slot="input" placeholder="Enter your password" type="password" class="w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none placeholder:text-muted-foreground/64"/></span><div class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg></div><button aria-controls="password" aria-label="Show password" aria-pressed="false" class="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg></button></div></div><div class="flex items-center gap-2 pt-1"><button type="button" data-unchecked="" tabindex="0" id="remember-me" role="checkbox" aria-checked="false" data-slot="checkbox" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[0.25rem] border border-input bg-background bg-clip-padding shadow-xs outline-none ring-ring transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(0.25rem-1px)] not-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-64 aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 dark:not-data-checked:bg-input/32 dark:bg-clip-border dark:aria-invalid:ring-destructive/24 dark:not-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/8%)] [&amp;:is(:disabled,[data-checked],[aria-invalid])]:shadow-none"></button><input id="remember-me-input" style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true"/><label data-slot="label" class="inline-flex items-center gap-2 text-sm/4" for="remember-me">Remember for 30 days</label></div></div><button type="button" data-slot="button" class="relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border bg-clip-padding text-sm font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;
2size-&#x27;])]:size-4 border-primary bg-primary text-primary-foreground shadow-xs shadow-primary/24 not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] hover:bg-primary/90 [&amp;:is(:active,[data-pressed])]:inset-shadow-[0_1px_--theme(--color-black/8%)] [&amp;:is(:disabled,:active,[data-pressed])]:shadow-none min-h-8 px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] w-full">Sign in<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-arrow-right h-4 w-4" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button><div class="text-center text-sm">No account?<!-- --> <a class="font-medium text-primary hover:underline" href="#">Create an account</a></div></div></div></div></div>
2<script>$RC("B:3","S:3")</script>
2<script>(self.__next_f=self.__next_f||[]).push([0])</script>
2<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[17751,[\"/_next/static/chunks/eb0f24c42c5fc0f2.js\",\"/_next/static/chunks/f6f90bfe03746862.js\",\"/_next/static/chunks/140b6c97e8ce5744.js\",\"/_next/static/chunks/5b2dc1a4e3b18da6.js\"],\"RootProvider\"]\n3:I[967702,[\"/_next/static/chunks/eb0f24c42c5fc0f2.js\",\"/_next/static/chunks/f6f90bfe03746862.js\",\"/_next/static/chunks/140b6c97e8ce5744.js\",\"/_next/static/chunks/5b2dc1a4e3b18da6.js\"],\"ToastProvider\"]\n4:I[339756,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/d80b3790a119a285.js\"],\"default\"]\n5:I[837457,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/d80b3790a119a285.js\"],\"default\"]\n6:I[443880,[\"/_next/static/chunks/eb0f24c42c5fc0f2.js\",\"/_next/static/chunks/f6f90bfe03746862.js\",\"/_next/static/chunks/140b6c97e8ce5744.js\",\"/_next/static/chunks/5b2dc1a4e3b18da6.js\"],\"Analytics\"]\nc:I[168027,[],\"default\"]\n:HL[\"/_next/static/chunks/d0ecd2a4b5669fb2.css\",\"style\"]\n:HL[\"/_next/static/chunks/30d27ca6544549e8.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/InterVariableFont-s.p.53d7b668.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/InterVariableItalic-s.p.8c0e9517.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/Redaction_35_Regular-s.p.85f0a2c5.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script>
2<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"WztIIa-9Kbz_k4kggf9bg\",\"c\":[\"\",\"blocks\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"(home)\",{\"children\":[\"blocks\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/d0ecd2a4b5669fb2.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/30d27ca6544549e8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/eb0f24c42c5fc0f2.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/f6f90bfe03746862.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/140b6c97e8ce5744.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/5b2dc1a4e3b18da6.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"className\":\"geist_d5956f67-module__L54rSq__variable inter_b56b03d3-module__AhBKkG__variable geist_mono_4e26fe1b-module__-_Fr9q__variable redaction_f83894a3-module__QZnDEW__variable\",\"lang\":\"en\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":false}],[\"$\",\"body\",null,{\"className\":\"min-h-svh bg-background font-sans antialiased\",\"children\":[\"$\",\"$L2\",null,{\"search\":{\"hotKey\":[{\"display\":\"/\",\"key\":\"/\"}]},\"children\":[\"$\",\"$L3\",null,{\"children\":[[\"$\",\"div\",null,{\"className\":\"relative flex min-h-svh flex-col bg-background\",\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L6\",null,{}]]}]}]}]]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"div\",null,{\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:0:props:children:1:props:children:1:props:children:props:children:props:children:0:props:children:props:notFound:0:1:props:style\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$0:f:0:1:0:props:children:1:props:children:1:props:children:props:children:props:children:0:props:children:props:notFound:0:1:props:children:props:children:1:props:style\",\"children\":404}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:0:props:children:1:props:children:1:props:children:props:children:props:children:0:props:children:props:notFound:0:1:props:children:props:children:2:props:style\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$0:f:0:1:0:props:children:1:props:children:1:props:children:props:children:props:children:0:props:children:props:notFound:0:1:props:children:props:children:2:props:children:props:style\",\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0034eb249b83b7b4.js\",\"async\":true,\"nonce\":\"$undefined\"}
2]],[\"$\",\"section\",null,{\"className\":\"border-grid\",\"children\":[\"$\",\"div\",null,{\"className\":\"container-wrapper\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col items-start gap-1 py-8 md:py-10 lg:py-12\",\"children\":[\"$\",\"div\",null,{\"className\":\"container py-4\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"font-medium text-3xl leading-tight tracking-tight md:text-4xl lg:leading-[1.1]\",\"children\":[\"Building \",[\"$\",\"span\",null,{\"className\":\"span-highlight\",\"children\":\"blocks\"}],\" for the web\"]}],[\"$\",\"p\",null,{\"className\":\"max-w-2xl text-balance font-light text-base text-foreground sm:text-lg\",\"children\":\"Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.\"}],\"$L7\",\"$L8\",\"$L9\"]}]}]}]}]]}],{\"children\":[\"$La\",{},null,false,false]},null,false,false]},null,false,false]},null,false,false],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[]],\"s\":false,\"S\":true}\n"])</script>
2<script>self.__next_f.push([1,"d:I[522016,[\"/_next/static/chunks/eb0f24c42c5fc0f2.js\",\"/_next/static/chunks/f6f90bfe03746862.js\",\"/_next/static/chunks/140b6c97e8ce5744.js\",\"/_next/static/chunks/5b2dc1a4e3b18da6.js\",\"/_next/static/chunks/0034eb249b83b7b4.js\"],\"\"]\nf:I[985914,[\"/_next/static/chunks/eb0f24c42c5fc0f2.js\",\"/_next/static/chunks/f6f90bfe03746862.js\",\"/_next/static/chunks/140b6c97e8ce5744.js\",\"/_next/static/chunks/5b2dc1a4e3b18da6.js\",\"/_next/static/chunks/0034eb249b83b7b4.js\"],\"BlocksNav\"]\n11:I[897367,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/d80b3790a119a285.js\"],\"OutletBoundary\"]\n12:\"$Sreact.suspense\"\n14:I[897367,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/d80b3790a119a285.js\"],\"ViewportBoundary\"]\n16:I[897367,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/d80b3790a119a285.js\"],\"MetadataBoundary\"]\ne:T4c9,relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg bg-clip-padding font-medium whitespace-nowrap outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [\u0026_svg]:pointer-events-none [\u0026_svg]:shrink-0 [\u0026_svg:not([class*='size-'])]:size-4 not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] hover:bg-primary/90 [\u0026:is(:active,[data-pressed])]:inset-shadow-[0_1px_--theme(--color-black/8%)] [\u0026:is(:disabled,:active,[data-pressed])]:shadow-none min-h-7 gap-1.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] border border-primary bg-linear-to-b from-primary/80 to-primary text-primary-foreground text-xs shadow-md shadow-zinc-950/30 ring ring-white/20 ring-inset transition-[filter] duration-200 hover:brightness-125 active:brightness-95 dark:border-primary dark:from-primary dark:to-primary/80 **:[text-shadow:0_1px_0_var(--color-primary)]7:[\"$\",\"div\",null,{\"className\":\"flex w-full items-center justify-start gap-2 pt-2\",\"children\":[\"$\",\"$Ld\",null,{\"className\":\"$e\",\"href\":\"/blocks#blocks\",\"children\":\"Browse blocks\"}]}]\n8:[\"$\",\"div\",null,{\"className\":\"mt-8 scroll-mt-24\",\"id\":\"blocks\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-center py-4\",\"children\":[\"$\",\"$Lf\",null,{\"categories\":[{\"hidden\":false,\"name\":\"Authentication\",\"slug\":\"authentication\"}]}]}]}]\n9:[\"$\",\"div\",null,{\"className\":\"container-wrapper flex-1\",\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]\na:[\"$\",\"$1\",\"c\",{\"children\":[\"$L10\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/ddd7f80301b6d4be.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/8af5cb8b2b0ebbca.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/6edc135f266fe98a.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/0932fc2d1e82b969.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/chunks/8b49aeba63282aed.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-5\",{\"src\":\"/_next/static/chunks/a1c8a9a126d0d9f2.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-6\",{\"src\":\"/_next/static/chunks/5b28aeafd7a509c9.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-7\",{\"src\":\"/_next/static/chunks/780864fbfcfdc689.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-8\",{\"src\":\"/_next/static/chunks/235aab60d40cf6a2.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-9\",{\"src\":\"/_next/static/chunks/ac848961c22f05d0.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-10\",{\"src\":\"/_next/static/chunks/4795b57a2b92bc3f"])</script>
2<script>self.__next_f.push([1,".js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L11\",null,{\"children\":[\"$\",\"$12\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@13\"}]}]]}]\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L14\",null,{\"children\":\"$@15\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$12\",null,{\"name\":\"Next.Metadata\",\"children\":\"$@17\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n"])</script>
2<script>self.__next_f.push([1,"10:[\"$\",\"div\",null,{\"children\":[[\"$\",\"div\",\"login-03\",{\"className\":\"border-grid border-b py-8 first:pt-6 last:border-b-0 md:py-12\",\"children\":\"$L18\"}],[\"$\",\"div\",\"login-05\",{\"className\":\"border-grid border-b py-8 first:pt-6 last:border-b-0 md:py-12\",\"children\":\"$L19\"}]]}]\n"])</script>
2<script>self.__next_f.push([1,"1a:I[551844,[\"/_next/static/chunks/eb0f24c42c5fc0f2.js\",\"/_next/static/chunks/f6f90bfe03746862.js\",\"/_next/static/chunks/140b6c97e8ce5744.js\",\"/_next/static/chunks/5b2dc1a4e3b18da6.js\",\"/_next/static/chunks/0034eb249b83b7b4.js\",\"/_next/static/chunks/ddd7f80301b6d4be.js\",\"/_next/static/chunks/8af5cb8b2b0ebbca.js\",\"/_next/static/chunks/6edc135f266fe98a.js\",\"/_next/static/chunks/0932fc2d1e82b969.js\",\"/_next/static/chunks/8b49aeba63282aed.js\",\"/_next/static/chunks/a1c8a9a126d0d9f2.js\",\"/_next/static/chunks/5b28aeafd7a509c9.js\",\"/_next/static/chunks/780864fbfcfdc689.js\",\"/_next/static/chunks/235aab60d40cf6a2.js\",\"/_next/static/chunks/ac848961c22f05d0.js\",\"/_next/static/chunks/4795b57a2b92bc3f.js\"],\"BlockViewer\",1]\n18:[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[\"$\",\"$12\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"flex min-h-[350px] w-full items-center justify-center rounded-xl border bg-background\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-center justify-center text-muted-foreground text-sm\",\"children\":\"Loading component...\"}]}],\"children\":[\"$\",\"$L1a\",null,{\"item\":{\"name\":\"login-03\",\"type\":\"registry:block\",\"title\":\"Login 03\",\"description\":\"A simple login form.\",\"registryDependencies\":[\"https://uitopia.vercel.app/r/button.json\",\"https://uitopia.vercel.app/r/card.json\",\"https://uitopia.vercel.app/r/input.json\",\"https://uitopia.vercel.app/r/label.json\"],\"meta\":{\"iframeHeight\":\"auto\"},\"files\":[{\"type\":\"registry:page\",\"path\":\"registry/blocks/login-03/page.tsx\",\"target\":\"app/login-03/page.tsx\"},{\"path\":\"registry/blocks/login-03/components/login-form.tsx\",\"type\":\"registry:component\"}],\"categories\":[\"authentication\"]},\"meta\":{\"iframeHeight\":\"auto\"},\"name\":\"login-03\"}]}]}]\n19:[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[\"$\",\"$12\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"flex min-h-[350px] w-full items-center justify-center rounded-xl border bg-background\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-center justify-center text-muted-foreground text-sm\",\"children\":\"Loading component...\"}]}],\"children\":[\"$\",\"$L1a\",null,{\"item\":{\"name\":\"login-05\",\"type\":\"registry:block\",\"title\":\"Login 05\",\"description\":\"Full Page Login with Icons.\",\"registryDependencies\":[\"https://uitopia.vercel.app/r/button.json\",\"https://uitopia.vercel.app/r/checkbox.json\",\"https://uitopia.vercel.app/r/input.json\",\"https://uitopia.vercel.app/r/label.json\",\"https://uitopia.vercel.app/r/separator.json\"],\"meta\":{\"iframeHeight\":\"auto\"},\"files\":[{\"type\":\"registry:page\",\"path\":\"registry/blocks/login-05/page.tsx\",\"target\":\"app/login-05/page.tsx\"},{\"path\":\"registry/blocks/login-05/components/login-form.tsx\",\"type\":\"registry:component\"}],\"categories\":[\"authentication\"]},\"meta\":{\"iframeHeight\":\"auto\"},\"name\":\"login-05\"}]}]}]\n"])</script>
2<script>self.__next_f.push([1,"15:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: light)\",\"content\":\"white\"}],[\"$\",\"meta\",\"3\",{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: dark)\",\"content\":\"black\"}],[\"$\",\"meta\",\"4\",{\"name\":\"color-scheme\",\"content\":\"dark light\"}]]\n"])</script>
2<script>self.__next_f.push([1,"1b:I[27201,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/d80b3790a119a285.js\"],\"IconMark\"]\n"])</script>
2<script>self.__next_f.push([1,"17:[[\"$\",\"title\",\"0\",{\"children\":\"Building Blocks for the Web - ui/topia\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"keywords\",\"content\":\"Next.js,React,Tailwind CSS,UI Library,UI Kit,UI Components,UI Elements,Open Source,shadcn/ui\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:title\",\"content\":\"Building Blocks for the Web\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:description\",\"content\":\"Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:url\",\"content\":\"https://uitopia.vercel.app\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:site_name\",\"content\":\"ui/topia\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:image\",\"content\":\"https://uitopia.vercel.app/api/og\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:creator\",\"content\":\"@kyuotaka\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:title\",\"content\":\"Building Blocks for the Web\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:image\",\"content\":\"https://uitopia.vercel.app/api/og\"}],[\"$\",\"link\",\"14\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.a5d7b97c.ico\",\"sizes\":\"32x31\",\"type\":\"image/x-icon\"}],[\"$\",\"$L1b\",\"15\",{}]]\n"])</script>
2<script>self.__next_f.push([1,"13:null\n"])</script>
2</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.