feat(www): add login blocks

2026-06-12 18:31:46 +00:00 · 2024-11-12 16:24:40 +04:00
108 changed files with 1835 additions and 1834 deletions
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -91,42 +91,6 @@ pnpm --filter=www dev
 pnpm --filter=shadcn-ui dev
 ```

-## Running the CLI Locally
-
-To run the CLI locally, you can follow the workflow:
-
-1. Start by running the registry (main site) to make sure the components are up to date:
-
-   ```bash
-   pnpm www:dev
-   ```
-
-2. Run the development script for the CLI:
-
-   ```bash
-   pnpm shadcn:dev
-   ```
-
-3. In another terminal tab, test the CLI by running:
-
-   ```bash
-   pnpm shadcn
-   ```
-
-   To test the CLI in a specific app, use a command like:
-
-   ```bash
-   pnpm shadcn <init | add | ...> -c ~/Desktop/my-app
-   ```
-
-4. To run the tests for the CLI:
-
-   ```bash
-   pnpm --filter=shadcn test
-   ```
-
-This workflow ensures that you are running the most recent version of the registry and testing the CLI properly in your local environment.
-
 ## Documentation

 The documentation for this project is located in the `www` workspace. You can run the documentation locally by running the following command:
--- a/apps/www/registry/default/block/login-01/page.tsx
+++ b/apps/www/registry/default/block/login-01/page.tsx
@@ -4,12 +4,12 @@ export const description = "A simple login form."

 export const iframeHeight = "870px"

-export const containerClassName = "w-full h-full"
-
 export default function Page() {
  return (
-    <div className="flex h-screen w-full items-center justify-center px-4">
-      <LoginForm />
+    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <LoginForm />
+      </div>
    </div>
  )
 }
--- a/apps/www/registry/default/block/login-02/page.tsx
+++ b/apps/www/registry/default/block/login-02/page.tsx
@@ -0,0 +1,36 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/default/block/login-02/components/login-form"
+
+export const description = "A two column login page with a cover image."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="grid min-h-svh lg:grid-cols-2">
+      <div className="flex flex-col gap-4 p-6 md:p-10">
+        <div className="flex justify-center gap-2 md:justify-start">
+          <a href="#" className="flex items-center gap-2 font-medium">
+            <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+              <GalleryVerticalEnd className="size-4" />
+            </div>
+            Acme Inc.
+          </a>
+        </div>
+        <div className="flex flex-1 items-center justify-center">
+          <div className="w-full max-w-xs">
+            <LoginForm />
+          </div>
+        </div>
+      </div>
+      <div className="relative hidden bg-muted lg:block">
+        <img
+          src="/placeholder.svg"
+          alt="Image"
+          className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+        />
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/default/block/login-03/page.tsx
+++ b/apps/www/registry/default/block/login-03/page.tsx
@@ -0,0 +1,23 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/default/block/login-03/components/login-form"
+
+export const description = "A login page with a muted background color."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+      <div className="flex w-full max-w-sm flex-col gap-6">
+        <a href="#" className="flex items-center gap-2 self-center font-medium">
+          <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+            <GalleryVerticalEnd className="size-4" />
+          </div>
+          Acme Inc.
+        </a>
+        <LoginForm />
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/default/block/login-04/page.tsx
+++ b/apps/www/registry/default/block/login-04/page.tsx
@@ -0,0 +1,15 @@
+import { LoginForm } from "@/registry/default/block/login-04/components/login-form"
+
+export const description = "A login page with form and image."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
+      <div className="w-full max-w-sm md:max-w-3xl">
+        <LoginForm />
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/default/block/login-05/page.tsx
+++ b/apps/www/registry/default/block/login-05/page.tsx
@@ -0,0 +1,15 @@
+import { LoginForm } from "@/registry/default/block/login-05/components/login-form"
+
+export const description = "A simple email-only login page."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <LoginForm />
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/index.tsx
+++ b/apps/www/registry/index.tsx
@@ -4073,6 +4073,86 @@ export const Index: Record<string, any> = {
      subcategory: "Login",
      chunks: []
    },
+    "login-02": {
+      name: "login-02",
+      description: "A two column login page with a cover image.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/login-02/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/block/login-02/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/new-york/block/login-02/page.tsx")),
+      source: "__registry__/new-york/block/login-02/page.tsx",
+      category: "Authentication",
+      subcategory: "Login",
+      chunks: []
+    },
+    "login-03": {
+      name: "login-03",
+      description: "A login page with a muted background color.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/login-03/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/block/login-03/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/new-york/block/login-03/page.tsx")),
+      source: "__registry__/new-york/block/login-03/page.tsx",
+      category: "Authentication",
+      subcategory: "Login",
+      chunks: []
+    },
+    "login-04": {
+      name: "login-04",
+      description: "A login page with form and image.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/login-04/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/block/login-04/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/new-york/block/login-04/page.tsx")),
+      source: "__registry__/new-york/block/login-04/page.tsx",
+      category: "Authentication",
+      subcategory: "Login",
+      chunks: []
+    },
+    "login-05": {
+      name: "login-05",
+      description: "A simple email-only login page.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/login-05/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/block/login-05/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/new-york/block/login-05/page.tsx")),
+      source: "__registry__/new-york/block/login-05/page.tsx",
+      category: "Authentication",
+      subcategory: "Login",
+      chunks: []
+    },
    "chart-area-axes": {
      name: "chart-area-axes",
      description: "An area chart with axes",
@@ -9566,6 +9646,86 @@ export const Index: Record<string, any> = {
      subcategory: "Login",
      chunks: []
    },
+    "login-02": {
+      name: "login-02",
+      description: "A two column login page with a cover image.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/login-02/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/default/block/login-02/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/block/login-02/page.tsx")),
+      source: "__registry__/default/block/login-02/page.tsx",
+      category: "Authentication",
+      subcategory: "Login",
+      chunks: []
+    },
+    "login-03": {
+      name: "login-03",
+      description: "A login page with a muted background color.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/login-03/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/default/block/login-03/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/block/login-03/page.tsx")),
+      source: "__registry__/default/block/login-03/page.tsx",
+      category: "Authentication",
+      subcategory: "Login",
+      chunks: []
+    },
+    "login-04": {
+      name: "login-04",
+      description: "A login page with form and image.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/login-04/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/default/block/login-04/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/block/login-04/page.tsx")),
+      source: "__registry__/default/block/login-04/page.tsx",
+      category: "Authentication",
+      subcategory: "Login",
+      chunks: []
+    },
+    "login-05": {
+      name: "login-05",
+      description: "A simple email-only login page.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/login-05/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/default/block/login-05/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/block/login-05/page.tsx")),
+      source: "__registry__/default/block/login-05/page.tsx",
+      category: "Authentication",
+      subcategory: "Login",
+      chunks: []
+    },
    "chart-area-axes": {
      name: "chart-area-axes",
      description: "An area chart with axes",
--- a/apps/www/registry/new-york/block/login-01/page.tsx
+++ b/apps/www/registry/new-york/block/login-01/page.tsx
@@ -4,12 +4,12 @@ export const description = "A simple login form."

 export const iframeHeight = "870px"

-export const containerClassName = "w-full h-full"
-
 export default function Page() {
  return (
-    <div className="flex h-screen w-full items-center justify-center px-4">
-      <LoginForm />
+    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <LoginForm />
+      </div>
    </div>
  )
 }
--- a/apps/www/registry/new-york/block/login-02/page.tsx
+++ b/apps/www/registry/new-york/block/login-02/page.tsx
@@ -0,0 +1,36 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/new-york/block/login-02/components/login-form"
+
+export const description = "A two column login page with a cover image."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="grid min-h-svh lg:grid-cols-2">
+      <div className="flex flex-col gap-4 p-6 md:p-10">
+        <div className="flex justify-center gap-2 md:justify-start">
+          <a href="#" className="flex items-center gap-2 font-medium">
+            <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+              <GalleryVerticalEnd className="size-4" />
+            </div>
+            Acme Inc.
+          </a>
+        </div>
+        <div className="flex flex-1 items-center justify-center">
+          <div className="w-full max-w-xs">
+            <LoginForm />
+          </div>
+        </div>
+      </div>
+      <div className="relative hidden bg-muted lg:block">
+        <img
+          src="/placeholder.svg"
+          alt="Image"
+          className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+        />
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/new-york/block/login-03/page.tsx
+++ b/apps/www/registry/new-york/block/login-03/page.tsx
@@ -0,0 +1,23 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/new-york/block/login-03/components/login-form"
+
+export const description = "A login page with a muted background color."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+      <div className="flex w-full max-w-sm flex-col gap-6">
+        <a href="#" className="flex items-center gap-2 self-center font-medium">
+          <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+            <GalleryVerticalEnd className="size-4" />
+          </div>
+          Acme Inc.
+        </a>
+        <LoginForm />
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/new-york/block/login-04/page.tsx
+++ b/apps/www/registry/new-york/block/login-04/page.tsx
@@ -0,0 +1,15 @@
+import { LoginForm } from "@/registry/new-york/block/login-04/components/login-form"
+
+export const description = "A login page with form and image."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
+      <div className="w-full max-w-sm md:max-w-3xl">
+        <LoginForm />
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/new-york/block/login-05/page.tsx
+++ b/apps/www/registry/new-york/block/login-05/page.tsx
@@ -0,0 +1,15 @@
+import { LoginForm } from "@/registry/new-york/block/login-05/components/login-form"
+
+export const description = "A simple email-only login page."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <LoginForm />
+      </div>
+    </div>
+  )
+}
--- a/apps/www/app/(app)/examples/layout.tsx
+++ b/apps/www/app/(app)/examples/layout.tsx
@@ -1,7 +1,6 @@
 import { Metadata } from "next"
 import Link from "next/link"

-import { siteConfig } from "@/config/site"
 import { Announcement } from "@/components/announcement"
 import { ExamplesNav } from "@/components/examples-nav"
 import {
@@ -26,23 +25,20 @@ export default function ExamplesLayout({ children }: ExamplesLayoutProps) {
    <div className="relative">
      <PageHeader>
        <Announcement />
-        <PageHeaderHeading>Build your component library</PageHeaderHeading>
+        <PageHeaderHeading className="hidden md:block">
+          Check out some examples
+        </PageHeaderHeading>
+        <PageHeaderHeading className="md:hidden">Examples</PageHeaderHeading>
        <PageHeaderDescription>
-          Beautifully designed components that you can copy and paste into your
-          apps. Made with Tailwind CSS. Open source.
+          Dashboard, cards, authentication. Some examples built using the
+          components. Use this as a guide to build your own.
        </PageHeaderDescription>
        <PageActions>
          <Button asChild size="sm">
            <Link href="/docs">Get Started</Link>
          </Button>
          <Button asChild size="sm" variant="ghost">
-            <Link
-              target="_blank"
-              rel="noreferrer"
-              href={siteConfig.links.github}
-            >
-              GitHub
-            </Link>
+            <Link href="/components">Components</Link>
          </Button>
        </PageActions>
      </PageHeader>
--- a/apps/www/app/layout.tsx
+++ b/apps/www/app/layout.tsx
@@ -91,7 +91,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
        </head>
        <body
          className={cn(
-            "min-h-screen bg-background font-sans antialiased",
+            "min-h-svh bg-background font-sans antialiased",
            fontSans.variable,
            fontMono.variable
          )}
@@ -104,7 +104,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
            enableColorScheme
          >
            <div vaul-drawer-wrapper="">
-              <div className="relative flex min-h-screen flex-col bg-background">
+              <div className="relative flex min-h-svh flex-col bg-background">
                {children}
              </div>
            </div>
--- a/apps/www/components/block-viewer.tsx
+++ b/apps/www/components/block-viewer.tsx
@@ -166,7 +166,7 @@ function BlockViewerToolbar() {
          className="hidden h-7 w-7 rounded-md border bg-transparent shadow-none md:flex lg:w-auto"
          size="sm"
          onClick={() => {
-            copyToClipboard(`npx shadcn@latest add ${item.name}`)
+            copyToClipboard(`npx shadcn@latest add ${name}`)
          }}
        >
          {isCopied ? <Check /> : <Terminal />}
--- a/apps/www/components/examples-nav.tsx
+++ b/apps/www/components/examples-nav.tsx
@@ -59,7 +59,7 @@ export function ExamplesNav({ className, ...props }: ExamplesNavProps) {
    <div className="relative">
      <ScrollArea className="max-w-[600px] lg:max-w-none">
        <div className={cn("mb-4 flex items-center", className)} {...props}>
-          {examples.map((example) => (
+          {examples.map((example, index) => (
            <Link
              href={example.href}
              key={example.href}
--- a/apps/www/components/main-nav.tsx
+++ b/apps/www/components/main-nav.tsx
@@ -12,7 +12,7 @@ export function MainNav() {

  return (
    <div className="mr-4 hidden md:flex">
-      <Link href="/" className="mr-4 flex items-center gap-2 lg:mr-6">
+      <Link href="/" className="mr-4 flex items-center space-x-2 lg:mr-6">
        <Icons.logo className="h-6 w-6" />
        <span className="hidden font-bold lg:inline-block">
          {siteConfig.name}
@@ -23,7 +23,7 @@ export function MainNav() {
          href="/docs"
          className={cn(
            "transition-colors hover:text-foreground/80",
-            pathname === "/docs" ? "text-foreground" : "text-foreground/80"
+            pathname === "/docs" ? "text-foreground" : "text-foreground/60"
          )}
        >
          Docs
@@ -35,7 +35,7 @@ export function MainNav() {
            pathname?.startsWith("/docs/components") &&
              !pathname?.startsWith("/docs/component/chart")
              ? "text-foreground"
-              : "text-foreground/80"
+              : "text-foreground/60"
          )}
        >
          Components
@@ -46,7 +46,7 @@ export function MainNav() {
            "transition-colors hover:text-foreground/80",
            pathname?.startsWith("/blocks")
              ? "text-foreground"
-              : "text-foreground/80"
+              : "text-foreground/60"
          )}
        >
          Blocks
@@ -58,7 +58,7 @@ export function MainNav() {
            pathname?.startsWith("/docs/component/chart") ||
              pathname?.startsWith("/charts")
              ? "text-foreground"
-              : "text-foreground/80"
+              : "text-foreground/60"
          )}
        >
          Charts
@@ -69,18 +69,29 @@ export function MainNav() {
            "transition-colors hover:text-foreground/80",
            pathname?.startsWith("/themes")
              ? "text-foreground"
-              : "text-foreground/80"
+              : "text-foreground/60"
          )}
        >
          Themes
        </Link>
+        <Link
+          href="/examples"
+          className={cn(
+            "hidden transition-colors hover:text-foreground/80 lg:inline-block",
+            pathname?.startsWith("/examples")
+              ? "text-foreground"
+              : "text-foreground/60"
+          )}
+        >
+          Examples
+        </Link>
        <Link
          href="/colors"
          className={cn(
            "transition-colors hover:text-foreground/80",
            pathname?.startsWith("/colors")
              ? "text-foreground"
-              : "text-foreground/80"
+              : "text-foreground/60"
          )}
        >
          Colors
--- a/apps/www/components/theme-customizer.tsx
+++ b/apps/www/components/theme-customizer.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import template from "lodash/template"
+import template from "lodash.template"
 import { Check, Copy, Moon, Repeat, Sun } from "lucide-react"
 import { useTheme } from "next-themes"

--- a/apps/www/config/docs.ts
+++ b/apps/www/config/docs.ts
@@ -32,6 +32,10 @@ export const docsConfig: DocsConfig = {
      title: "Themes",
      href: "/themes",
    },
+    {
+      title: "Examples",
+      href: "/examples",
+    },
    {
      title: "Colors",
      href: "/colors",
--- a/apps/www/content/docs/figma.mdx
+++ b/apps/www/content/docs/figma.mdx
@@ -5,7 +5,7 @@ description: Every component recreated in Figma. With customizable props, typogr

 ## Paid

- [shadcn/ui kit](https://shadcndesign.com) by [ Matt Wierzbicki](https://x.com/matsugfx) - A premium, always up-to-date UI kit for Figma - shadcn/ui compatible and optimized for smooth design-to-dev handoff.
+- [shadcn/ui kit](http://shadcndesign.com) by [ Matt Wierzbicki](https://x.com/matsugfx) - A premium, always up-to-date UI kit for Figma - shadcn/ui compatible and optimized for smooth design-to-dev handoff.

 ## Free

--- a/apps/www/content/docs/installation/manual.mdx
+++ b/apps/www/content/docs/installation/manual.mdx
@@ -16,14 +16,22 @@ Components are styled using Tailwind CSS. You need to install Tailwind CSS in yo
 Add the following dependencies to your project:

 ```bash
-npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react
+npm install tailwindcss-animate class-variance-authority clsx tailwind-merge
+```
+
+### Add icon library
+
+If you're using the `default` style, install `lucide-react`:
+
+```bash
+npm install lucide-react
 ```

 ### Configure path aliases

-Configure the path aliases in your `tsconfig.json` file.
+I use the `@` alias. This is how I configure it in tsconfig.json:

-```json {3-6} title="tsconfig.json" showLineNumbers
+```json {3-6} title="tsconfig.json"
 {
  "compilerOptions": {
    "baseUrl": ".",
@@ -36,16 +44,27 @@ Configure the path aliases in your `tsconfig.json` file.

 The `@` alias is a preference. You can use other aliases if you want.

+**If you use a different alias such as ~, you'll need to update import statements when adding components.**
+
 ### Configure tailwind.config.js

 Here's what my `tailwind.config.js` file looks like:

 ```js title="tailwind.config.js"
+const { fontFamily } = require("tailwindcss/defaultTheme")
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
  darkMode: ["class"],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
@@ -87,6 +106,23 @@ module.exports = {
        md: `calc(var(--radius) - 2px)`,
        sm: "calc(var(--radius) - 4px)",
      },
+      fontFamily: {
+        sans: ["var(--font-sans)", ...fontFamily.sans],
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
    },
  },
  plugins: [require("tailwindcss-animate")],
@@ -106,46 +142,67 @@ Add the following to your styles/globals.css file. You can learn more about usin
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
+
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
+
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;
+
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
+
    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;
+
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
+
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
+
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
+
    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;
+
    --ring: 215 20.2% 65.1%;
+
    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;
+
    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;
+
    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;
+
    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;
+
    --border: 216 34% 17%;
    --input: 216 34% 17%;
+
    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;
+
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;
+
    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;
+
    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;
+
    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
  }
 }

@@ -154,14 +211,17 @@ Add the following to your styles/globals.css file. You can learn more about usin
    @apply border-border;
  }
  body {
-    @apply font-sans antialiased bg-background text-foreground;
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
  }
 }
 ```

 ### Add a cn helper

-```ts title="lib/utils.ts" showLineNumbers
+I use a `cn` helper to make it easier to conditionally add Tailwind CSS classes. Here's how I define it in `lib/utils.ts`:
+
+```ts title="lib/utils.ts"
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"

@@ -170,34 +230,6 @@ export function cn(...inputs: ClassValue[]) {
 }
 ```

-### Create a `components.json` file
-
-Create a `components.json` file in the root of your project.
-
-```json title="components.json" showLineNumbers
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/index.css",
-    "baseColor": "zinc",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
-}
-```
-
 ### That's it

 You can now start adding components to your project.
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -67,7 +67,7 @@
    "geist": "^1.2.2",
    "input-otp": "^1.2.2",
    "jotai": "^2.1.0",
-    "lodash": "^4.17.21",
+    "lodash.template": "^4.5.0",
    "lucide-react": "0.359.0",
    "markdown-wasm": "^1.2.0",
    "next": "14.3.0-canary.43",
@@ -90,7 +90,7 @@
  },
  "devDependencies": {
    "@shikijs/compat": "^1.1.7",
-    "@types/lodash": "^4.17.7",
+    "@types/lodash.template": "^4.5.1",
    "@types/node": "^17.0.45",
    "@types/react": "^18.2.65",
    "@types/react-color": "^3.0.6",
--- a/apps/www/public/r/styles/default/authentication-01.json
+++ b/apps/www/public/r/styles/default/authentication-01.json
@@ -1,18 +0,0 @@
-{
-  "name": "authentication-01",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input",
-    "label"
-  ],
-  "files": [
-    {
-      "path": "block/authentication-01.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function LoginForm() {\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-2xl\">Login</CardTitle>\n        <CardDescription>\n          Enter your email below to login to your account.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"email\">Email</Label>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </div>\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">Sign in</Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
--- a/apps/www/public/r/styles/default/authentication-02.json
+++ b/apps/www/public/r/styles/default/authentication-02.json
@@ -1,18 +0,0 @@
-{
-  "name": "authentication-02",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input",
-    "label"
-  ],
-  "files": [
-    {
-      "path": "block/authentication-02.tsx",
-      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function LoginForm() {\n  return (\n    <Card className=\"mx-auto max-w-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-2xl\">Login</CardTitle>\n        <CardDescription>\n          Enter your email below to login to your account\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"grid gap-4\">\n          <div className=\"grid gap-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center\">\n              <Label htmlFor=\"password\">Password</Label>\n              <Link href=\"#\" className=\"ml-auto inline-block text-sm underline\">\n                Forgot your password?\n              </Link>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div className=\"mt-4 text-center text-sm\">\n          Don&apos;t have an account?{\" \"}\n          <Link href=\"#\" className=\"underline\">\n            Sign up\n          </Link>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
--- a/apps/www/public/r/styles/default/authentication-03.json
+++ b/apps/www/public/r/styles/default/authentication-03.json
@@ -1,18 +0,0 @@
-{
-  "name": "authentication-03",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input",
-    "label"
-  ],
-  "files": [
-    {
-      "path": "block/authentication-03.tsx",
-      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function LoginForm() {\n  return (\n    <Card className=\"mx-auto max-w-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-xl\">Sign Up</CardTitle>\n        <CardDescription>\n          Enter your information to create an account\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"grid gap-4\">\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"first-name\">First name</Label>\n              <Input id=\"first-name\" placeholder=\"Max\" required />\n            </div>\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"last-name\">Last name</Label>\n              <Input id=\"last-name\" placeholder=\"Robinson\" required />\n            </div>\n          </div>\n          <div className=\"grid gap-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div className=\"grid gap-2\">\n            <Label htmlFor=\"password\">Password</Label>\n            <Input id=\"password\" type=\"password\" />\n          </div>\n          <Button type=\"submit\" className=\"w-full\">\n            Create an account\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Sign up with GitHub\n          </Button>\n        </div>\n        <div className=\"mt-4 text-center text-sm\">\n          Already have an account?{\" \"}\n          <Link href=\"#\" className=\"underline\">\n            Sign in\n          </Link>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
--- a/apps/www/public/r/styles/default/authentication-04.json
+++ b/apps/www/public/r/styles/default/authentication-04.json
@@ -1,18 +0,0 @@
-{
-  "name": "authentication-04",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input",
-    "label"
-  ],
-  "files": [
-    {
-      "path": "block/authentication-04.tsx",
-      "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n      <div className=\"flex items-center justify-center py-12\">\n        <div className=\"mx-auto grid w-[350px] gap-6\">\n          <div className=\"grid gap-2 text-center\">\n            <h1 className=\"text-3xl font-bold\">Login</h1>\n            <p className=\"text-balance text-muted-foreground\">\n              Enter your email below to login to your account\n            </p>\n          </div>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"email\">Email</Label>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                placeholder=\"m@example.com\"\n                required\n              />\n            </div>\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center\">\n                <Label htmlFor=\"password\">Password</Label>\n                <Link\n                  href=\"/forgot-password\"\n                  className=\"ml-auto inline-block text-sm underline\"\n                >\n                  Forgot your password?\n                </Link>\n              </div>\n              <Input id=\"password\" type=\"password\" required />\n            </div>\n            <Button type=\"submit\" className=\"w-full\">\n              Login\n            </Button>\n            <Button variant=\"outline\" className=\"w-full\">\n              Login with Google\n            </Button>\n          </div>\n          <div className=\"mt-4 text-center text-sm\">\n            Don&apos;t have an account?{\" \"}\n            <Link href=\"#\" className=\"underline\">\n              Sign up\n            </Link>\n          </div>\n        </div>\n      </div>\n      <div className=\"hidden bg-muted lg:block\">\n        <Image\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          width=\"1920\"\n          height=\"1080\"\n          className=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
--- a/apps/www/public/r/styles/default/command.json
+++ b/apps/www/public/r/styles/default/command.json
--- a/apps/www/public/r/styles/default/input.json
+++ b/apps/www/public/r/styles/default/input.json
@@ -4,7 +4,7 @@
  "files": [
    {
      "path": "ui/input.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n",
      "type": "registry:ui",
      "target": ""
    }
--- a/apps/www/public/r/styles/default/login-01.json
+++ b/apps/www/public/r/styles/default/login-01.json
@@ -11,13 +11,13 @@
  "files": [
    {
      "path": "block/login-01/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/default/block/login-01/components/login-form\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-screen w-full items-center justify-center px-4\">\n      <LoginForm />\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/default/block/login-01/components/login-form\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/login/page.tsx"
    },
    {
      "path": "block/login-01/components/login-form.tsx",
-      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport function LoginForm() {\n  return (\n    <Card className=\"mx-auto max-w-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-2xl\">Login</CardTitle>\n        <CardDescription>\n          Enter your email below to login to your account\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"grid gap-4\">\n          <div className=\"grid gap-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center\">\n              <Label htmlFor=\"password\">Password</Label>\n              <Link href=\"#\" className=\"ml-auto inline-block text-sm underline\">\n                Forgot your password?\n              </Link>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div className=\"mt-4 text-center text-sm\">\n          Don&apos;t have an account?{\" \"}\n          <Link href=\"#\" className=\"underline\">\n            Sign up\n          </Link>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/default/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Login</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </div>\n              <Button type=\"submit\" className=\"w-full\">\n                Login\n              </Button>\n              <Button variant=\"outline\" className=\"w-full\">\n                Login with Google\n              </Button>\n            </div>\n            <div className=\"mt-4 text-center text-sm\">\n              Don&apos;t have an account?{\" \"}\n              <a href=\"#\" className=\"underline underline-offset-4\">\n                Sign up\n              </a>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": ""
    }
--- a/apps/www/public/r/styles/default/login-02.json
+++ b/apps/www/public/r/styles/default/login-02.json
@@ -0,0 +1,25 @@
+{
+  "name": "login-02",
+  "type": "registry:block",
+  "description": "A two column login page with a cover image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/login-02/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/default/block/login-02/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <GalleryVerticalEnd className=\"size-4\" />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "block/login-02/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/default/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <div className=\"flex flex-col items-center gap-2 text-center\">\n        <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n        <p className=\"text-balance text-sm text-muted-foreground\">\n          Enter your email below to login to your account\n        </p>\n      </div>\n      <div className=\"grid gap-6\">\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"email\">Email</Label>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </div>\n        <div className=\"grid gap-2\">\n          <div className=\"flex items-center\">\n            <Label htmlFor=\"password\">Password</Label>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" className=\"w-full\">\n          Login\n        </Button>\n        <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n          <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n            Or continue with\n          </span>\n        </div>\n        <Button variant=\"outline\" className=\"w-full\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n            <path\n              d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n              fill=\"currentColor\"\n            />\n          </svg>\n          Login with GitHub\n        </Button>\n      </div>\n      <div className=\"text-center text-sm\">\n        Don&apos;t have an account?{\" \"}\n        <a href=\"#\" className=\"underline underline-offset-4\">\n          Sign up\n        </a>\n      </div>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
--- a/apps/www/public/r/styles/default/login-03.json
+++ b/apps/www/public/r/styles/default/login-03.json
@@ -0,0 +1,25 @@
+{
+  "name": "login-03",
+  "type": "registry:block",
+  "description": "A login page with a muted background color.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/login-03/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/default/block/login-03/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <GalleryVerticalEnd className=\"size-4\" />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "block/login-03/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/default/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card>\n        <CardHeader className=\"text-center\">\n          <CardTitle className=\"text-xl\">Welcome back</CardTitle>\n          <CardDescription>\n            Login with your Apple or Google account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <div className=\"grid gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <Button variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  Login with Apple\n                </Button>\n                <Button variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  Login with Google\n                </Button>\n              </div>\n              <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n                <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                  Or continue with\n                </span>\n              </div>\n              <div className=\"grid gap-6\">\n                <div className=\"grid gap-2\">\n                  <Label htmlFor=\"email\">Email</Label>\n                  <Input\n                    id=\"email\"\n                    type=\"email\"\n                    placeholder=\"m@example.com\"\n                    required\n                  />\n                </div>\n                <div className=\"grid gap-2\">\n                  <div className=\"flex items-center\">\n                    <Label htmlFor=\"password\">Password</Label>\n                    <a\n                      href=\"#\"\n                      className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n                    >\n                      Forgot your password?\n                    </a>\n                  </div>\n                  <Input id=\"password\" type=\"password\" required />\n                </div>\n                <Button type=\"submit\" className=\"w-full\">\n                  Login\n                </Button>\n              </div>\n              <div className=\"text-center text-sm\">\n                Don&apos;t have an account?{\" \"}\n                <a href=\"#\" className=\"underline underline-offset-4\">\n                  Sign up\n                </a>\n              </div>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n      <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary  \">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
--- a/apps/www/public/r/styles/default/login-04.json
+++ b/apps/www/public/r/styles/default/login-04.json
--- a/apps/www/public/r/styles/default/login-05.json
+++ b/apps/www/public/r/styles/default/login-05.json
@@ -0,0 +1,25 @@
+{
+  "name": "login-05",
+  "type": "registry:block",
+  "description": "A simple email-only login page.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/login-05/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/default/block/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "block/login-05/components/login-form.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { cn } from \"@/registry/default/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <div className=\"flex flex-col gap-6\">\n          <div className=\"flex flex-col items-center gap-2\">\n            <a\n              href=\"#\"\n              className=\"flex flex-col items-center gap-2 font-medium\"\n            >\n              <div className=\"flex h-8 w-8 items-center justify-center rounded-md\">\n                <GalleryVerticalEnd className=\"size-6\" />\n              </div>\n              <span className=\"sr-only\">Acme Inc.</span>\n            </a>\n            <h1 className=\"text-xl font-bold\">Welcome to Acme Inc.</h1>\n            <div className=\"text-center text-sm\">\n              Don&apos;t have an account?{\" \"}\n              <a href=\"#\" className=\"underline underline-offset-4\">\n                Sign up\n              </a>\n            </div>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"email\">Email</Label>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                placeholder=\"m@example.com\"\n                required\n              />\n            </div>\n            <Button type=\"submit\" className=\"w-full\">\n              Login\n            </Button>\n          </div>\n          <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n            <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n              Or\n            </span>\n          </div>\n          <div className=\"grid gap-4 sm:grid-cols-2\">\n            <Button variant=\"outline\" className=\"w-full\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Continue with Apple\n            </Button>\n            <Button variant=\"outline\" className=\"w-full\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Continue with Google\n            </Button>\n          </div>\n        </div>\n      </form>\n      <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary  \">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
--- a/apps/www/public/r/styles/default/textarea.json
+++ b/apps/www/public/r/styles/default/textarea.json
@@ -4,7 +4,7 @@
  "files": [
    {
      "path": "ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Textarea = React.forwardRef<\n  HTMLTextAreaElement,\n  React.ComponentProps<\"textarea\">\n>(({ className, ...props }, ref) => {\n  return (\n    <textarea\n      className={cn(\n        \"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <textarea\n        className={cn(\n          \"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n",
      "type": "registry:ui",
      "target": ""
    }
--- a/apps/www/public/r/styles/new-york/authentication-01.json
+++ b/apps/www/public/r/styles/new-york/authentication-01.json
@@ -1,18 +0,0 @@
-{
-  "name": "authentication-01",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input",
-    "label"
-  ],
-  "files": [
-    {
-      "path": "block/authentication-01.tsx",
-      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function LoginForm() {\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-2xl\">Login</CardTitle>\n        <CardDescription>\n          Enter your email below to login to your account.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"email\">Email</Label>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </div>\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">Sign in</Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
--- a/apps/www/public/r/styles/new-york/authentication-02.json
+++ b/apps/www/public/r/styles/new-york/authentication-02.json
@@ -1,18 +0,0 @@
-{
-  "name": "authentication-02",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input",
-    "label"
-  ],
-  "files": [
-    {
-      "path": "block/authentication-02.tsx",
-      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function LoginForm() {\n  return (\n    <Card className=\"mx-auto max-w-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-2xl\">Login</CardTitle>\n        <CardDescription>\n          Enter your email below to login to your account\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"grid gap-4\">\n          <div className=\"grid gap-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center\">\n              <Label htmlFor=\"password\">Password</Label>\n              <Link href=\"#\" className=\"ml-auto inline-block text-sm underline\">\n                Forgot your password?\n              </Link>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div className=\"mt-4 text-center text-sm\">\n          Don&apos;t have an account?{\" \"}\n          <Link href=\"#\" className=\"underline\">\n            Sign up\n          </Link>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
--- a/apps/www/public/r/styles/new-york/authentication-03.json
+++ b/apps/www/public/r/styles/new-york/authentication-03.json
@@ -1,18 +0,0 @@
-{
-  "name": "authentication-03",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input",
-    "label"
-  ],
-  "files": [
-    {
-      "path": "block/authentication-03.tsx",
-      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function LoginForm() {\n  return (\n    <Card className=\"mx-auto max-w-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-xl\">Sign Up</CardTitle>\n        <CardDescription>\n          Enter your information to create an account\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"grid gap-4\">\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"first-name\">First name</Label>\n              <Input id=\"first-name\" placeholder=\"Max\" required />\n            </div>\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"last-name\">Last name</Label>\n              <Input id=\"last-name\" placeholder=\"Robinson\" required />\n            </div>\n          </div>\n          <div className=\"grid gap-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div className=\"grid gap-2\">\n            <Label htmlFor=\"password\">Password</Label>\n            <Input id=\"password\" type=\"password\" />\n          </div>\n          <Button type=\"submit\" className=\"w-full\">\n            Create an account\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Sign up with GitHub\n          </Button>\n        </div>\n        <div className=\"mt-4 text-center text-sm\">\n          Already have an account?{\" \"}\n          <Link href=\"#\" className=\"underline\">\n            Sign in\n          </Link>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
--- a/apps/www/public/r/styles/new-york/authentication-04.json
+++ b/apps/www/public/r/styles/new-york/authentication-04.json
@@ -1,18 +0,0 @@
-{
-  "name": "authentication-04",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input",
-    "label"
-  ],
-  "files": [
-    {
-      "path": "block/authentication-04.tsx",
-      "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n      <div className=\"flex items-center justify-center py-12\">\n        <div className=\"mx-auto grid w-[350px] gap-6\">\n          <div className=\"grid gap-2 text-center\">\n            <h1 className=\"text-3xl font-bold\">Login</h1>\n            <p className=\"text-balance text-muted-foreground\">\n              Enter your email below to login to your account\n            </p>\n          </div>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"email\">Email</Label>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                placeholder=\"m@example.com\"\n                required\n              />\n            </div>\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center\">\n                <Label htmlFor=\"password\">Password</Label>\n                <Link\n                  href=\"/forgot-password\"\n                  className=\"ml-auto inline-block text-sm underline\"\n                >\n                  Forgot your password?\n                </Link>\n              </div>\n              <Input id=\"password\" type=\"password\" required />\n            </div>\n            <Button type=\"submit\" className=\"w-full\">\n              Login\n            </Button>\n            <Button variant=\"outline\" className=\"w-full\">\n              Login with Google\n            </Button>\n          </div>\n          <div className=\"mt-4 text-center text-sm\">\n            Don&apos;t have an account?{\" \"}\n            <Link href=\"#\" className=\"underline\">\n              Sign up\n            </Link>\n          </div>\n        </div>\n      </div>\n      <div className=\"hidden bg-muted lg:block\">\n        <Image\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          width=\"1920\"\n          height=\"1080\"\n          className=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
--- a/apps/www/public/r/styles/new-york/command.json
+++ b/apps/www/public/r/styles/new-york/command.json
--- a/apps/www/public/r/styles/new-york/input.json
+++ b/apps/www/public/r/styles/new-york/input.json
@@ -4,7 +4,7 @@
  "files": [
    {
      "path": "ui/input.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n",
      "type": "registry:ui",
      "target": ""
    }
--- a/apps/www/public/r/styles/new-york/login-01.json
+++ b/apps/www/public/r/styles/new-york/login-01.json
@@ -11,13 +11,13 @@
  "files": [
    {
      "path": "block/login-01/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/new-york/block/login-01/components/login-form\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-screen w-full items-center justify-center px-4\">\n      <LoginForm />\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/new-york/block/login-01/components/login-form\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/login/page.tsx"
    },
    {
      "path": "block/login-01/components/login-form.tsx",
-      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport function LoginForm() {\n  return (\n    <Card className=\"mx-auto max-w-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-2xl\">Login</CardTitle>\n        <CardDescription>\n          Enter your email below to login to your account\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"grid gap-4\">\n          <div className=\"grid gap-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center\">\n              <Label htmlFor=\"password\">Password</Label>\n              <Link href=\"#\" className=\"ml-auto inline-block text-sm underline\">\n                Forgot your password?\n              </Link>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div className=\"mt-4 text-center text-sm\">\n          Don&apos;t have an account?{\" \"}\n          <Link href=\"#\" className=\"underline\">\n            Sign up\n          </Link>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Login</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </div>\n              <Button type=\"submit\" className=\"w-full\">\n                Login\n              </Button>\n              <Button variant=\"outline\" className=\"w-full\">\n                Login with Google\n              </Button>\n            </div>\n            <div className=\"mt-4 text-center text-sm\">\n              Don&apos;t have an account?{\" \"}\n              <a href=\"#\" className=\"underline underline-offset-4\">\n                Sign up\n              </a>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": ""
    }
--- a/apps/www/public/r/styles/new-york/login-02.json
+++ b/apps/www/public/r/styles/new-york/login-02.json
@@ -0,0 +1,25 @@
+{
+  "name": "login-02",
+  "type": "registry:block",
+  "description": "A two column login page with a cover image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/login-02/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/new-york/block/login-02/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <GalleryVerticalEnd className=\"size-4\" />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "block/login-02/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/default/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <div className=\"flex flex-col items-center gap-2 text-center\">\n        <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n        <p className=\"text-balance text-sm text-muted-foreground\">\n          Enter your email below to login to your account\n        </p>\n      </div>\n      <div className=\"grid gap-6\">\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"email\">Email</Label>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </div>\n        <div className=\"grid gap-2\">\n          <div className=\"flex items-center\">\n            <Label htmlFor=\"password\">Password</Label>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" className=\"w-full\">\n          Login\n        </Button>\n        <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n          <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n            Or continue with\n          </span>\n        </div>\n        <Button variant=\"outline\" className=\"w-full\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n            <path\n              d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n              fill=\"currentColor\"\n            />\n          </svg>\n          Login with GitHub\n        </Button>\n      </div>\n      <div className=\"text-center text-sm\">\n        Don&apos;t have an account?{\" \"}\n        <a href=\"#\" className=\"underline underline-offset-4\">\n          Sign up\n        </a>\n      </div>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
--- a/apps/www/public/r/styles/new-york/login-03.json
+++ b/apps/www/public/r/styles/new-york/login-03.json
@@ -0,0 +1,25 @@
+{
+  "name": "login-03",
+  "type": "registry:block",
+  "description": "A login page with a muted background color.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/login-03/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/new-york/block/login-03/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <GalleryVerticalEnd className=\"size-4\" />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "block/login-03/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card>\n        <CardHeader className=\"text-center\">\n          <CardTitle className=\"text-xl\">Welcome back</CardTitle>\n          <CardDescription>\n            Login with your Apple or Google account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <div className=\"grid gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <Button variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  Login with Apple\n                </Button>\n                <Button variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  Login with Google\n                </Button>\n              </div>\n              <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n                <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n                  Or continue with\n                </span>\n              </div>\n              <div className=\"grid gap-6\">\n                <div className=\"grid gap-2\">\n                  <Label htmlFor=\"email\">Email</Label>\n                  <Input\n                    id=\"email\"\n                    type=\"email\"\n                    placeholder=\"m@example.com\"\n                    required\n                  />\n                </div>\n                <div className=\"grid gap-2\">\n                  <div className=\"flex items-center\">\n                    <Label htmlFor=\"password\">Password</Label>\n                    <a\n                      href=\"#\"\n                      className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n                    >\n                      Forgot your password?\n                    </a>\n                  </div>\n                  <Input id=\"password\" type=\"password\" required />\n                </div>\n                <Button type=\"submit\" className=\"w-full\">\n                  Login\n                </Button>\n              </div>\n              <div className=\"text-center text-sm\">\n                Don&apos;t have an account?{\" \"}\n                <a href=\"#\" className=\"underline underline-offset-4\">\n                  Sign up\n                </a>\n              </div>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n      <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary  \">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
--- a/apps/www/public/r/styles/new-york/login-04.json
+++ b/apps/www/public/r/styles/new-york/login-04.json
--- a/apps/www/public/r/styles/new-york/login-05.json
+++ b/apps/www/public/r/styles/new-york/login-05.json
@@ -0,0 +1,25 @@
+{
+  "name": "login-05",
+  "type": "registry:block",
+  "description": "A simple email-only login page.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/login-05/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/new-york/block/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "block/login-05/components/login-form.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <div className=\"flex flex-col gap-6\">\n          <div className=\"flex flex-col items-center gap-2\">\n            <a\n              href=\"#\"\n              className=\"flex flex-col items-center gap-2 font-medium\"\n            >\n              <div className=\"flex h-8 w-8 items-center justify-center rounded-md\">\n                <GalleryVerticalEnd className=\"size-6\" />\n              </div>\n              <span className=\"sr-only\">Acme Inc.</span>\n            </a>\n            <h1 className=\"text-xl font-bold\">Welcome to Acme Inc.</h1>\n            <div className=\"text-center text-sm\">\n              Don&apos;t have an account?{\" \"}\n              <a href=\"#\" className=\"underline underline-offset-4\">\n                Sign up\n              </a>\n            </div>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"email\">Email</Label>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                placeholder=\"m@example.com\"\n                required\n              />\n            </div>\n            <Button type=\"submit\" className=\"w-full\">\n              Login\n            </Button>\n          </div>\n          <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n            <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n              Or\n            </span>\n          </div>\n          <div className=\"grid gap-4 sm:grid-cols-2\">\n            <Button variant=\"outline\" className=\"w-full\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Continue with Apple\n            </Button>\n            <Button variant=\"outline\" className=\"w-full\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Continue with Google\n            </Button>\n          </div>\n        </div>\n      </form>\n      <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary  \">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
--- a/apps/www/public/r/styles/new-york/textarea.json
+++ b/apps/www/public/r/styles/new-york/textarea.json
@@ -4,7 +4,7 @@
  "files": [
    {
      "path": "ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Textarea = React.forwardRef<\n  HTMLTextAreaElement,\n  React.ComponentProps<\"textarea\">\n>(({ className, ...props }, ref) => {\n  return (\n    <textarea\n      className={cn(\n        \"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <textarea\n        className={cn(\n          \"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n",
      "type": "registry:ui",
      "target": ""
    }
--- a/apps/www/registry/default/block/authentication-01.tsx
+++ b/apps/www/registry/default/block/authentication-01.tsx
@@ -1,45 +0,0 @@
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { Input } from "@/registry/default/ui/input"
-import { Label } from "@/registry/default/ui/label"
-
-export const description =
-  "A simple login form with email and password. The submit button says 'Sign in'."
-
-export const iframeHeight = "600px"
-
-export const containerClassName =
-  "w-full h-screen flex items-center justify-center px-4"
-
-export default function LoginForm() {
-  return (
-    <Card className="w-full max-w-sm">
-      <CardHeader>
-        <CardTitle className="text-2xl">Login</CardTitle>
-        <CardDescription>
-          Enter your email below to login to your account.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-4">
-        <div className="grid gap-2">
-          <Label htmlFor="email">Email</Label>
-          <Input id="email" type="email" placeholder="m@example.com" required />
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor="password">Password</Label>
-          <Input id="password" type="password" required />
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">Sign in</Button>
-      </CardFooter>
-    </Card>
-  )
-}
--- a/apps/www/registry/default/block/authentication-02.tsx
+++ b/apps/www/registry/default/block/authentication-02.tsx
@@ -1,67 +0,0 @@
-import Link from "next/link"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { Input } from "@/registry/default/ui/input"
-import { Label } from "@/registry/default/ui/label"
-
-export const description =
-  "A login form with email and password. There's an option to login with Google and a link to sign up if you don't have an account."
-
-export const iframeHeight = "600px"
-
-export const containerClassName =
-  "w-full h-screen flex items-center justify-center px-4"
-
-export default function LoginForm() {
-  return (
-    <Card className="mx-auto max-w-sm">
-      <CardHeader>
-        <CardTitle className="text-2xl">Login</CardTitle>
-        <CardDescription>
-          Enter your email below to login to your account
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-4">
-          <div className="grid gap-2">
-            <Label htmlFor="email">Email</Label>
-            <Input
-              id="email"
-              type="email"
-              placeholder="m@example.com"
-              required
-            />
-          </div>
-          <div className="grid gap-2">
-            <div className="flex items-center">
-              <Label htmlFor="password">Password</Label>
-              <Link href="#" className="ml-auto inline-block text-sm underline">
-                Forgot your password?
-              </Link>
-            </div>
-            <Input id="password" type="password" required />
-          </div>
-          <Button type="submit" className="w-full">
-            Login
-          </Button>
-          <Button variant="outline" className="w-full">
-            Login with Google
-          </Button>
-        </div>
-        <div className="mt-4 text-center text-sm">
-          Don&apos;t have an account?{" "}
-          <Link href="#" className="underline">
-            Sign up
-          </Link>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
--- a/apps/www/registry/default/block/authentication-03.tsx
+++ b/apps/www/registry/default/block/authentication-03.tsx
@@ -1,72 +0,0 @@
-import Link from "next/link"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { Input } from "@/registry/default/ui/input"
-import { Label } from "@/registry/default/ui/label"
-
-export const description =
-  "A sign up form with first name, last name, email and password inside a card. There's an option to sign up with GitHub and a link to login if you already have an account"
-
-export const iframeHeight = "600px"
-
-export const containerClassName =
-  "w-full h-screen flex items-center justify-center px-4"
-
-export default function LoginForm() {
-  return (
-    <Card className="mx-auto max-w-sm">
-      <CardHeader>
-        <CardTitle className="text-xl">Sign Up</CardTitle>
-        <CardDescription>
-          Enter your information to create an account
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-4">
-          <div className="grid grid-cols-2 gap-4">
-            <div className="grid gap-2">
-              <Label htmlFor="first-name">First name</Label>
-              <Input id="first-name" placeholder="Max" required />
-            </div>
-            <div className="grid gap-2">
-              <Label htmlFor="last-name">Last name</Label>
-              <Input id="last-name" placeholder="Robinson" required />
-            </div>
-          </div>
-          <div className="grid gap-2">
-            <Label htmlFor="email">Email</Label>
-            <Input
-              id="email"
-              type="email"
-              placeholder="m@example.com"
-              required
-            />
-          </div>
-          <div className="grid gap-2">
-            <Label htmlFor="password">Password</Label>
-            <Input id="password" type="password" />
-          </div>
-          <Button type="submit" className="w-full">
-            Create an account
-          </Button>
-          <Button variant="outline" className="w-full">
-            Sign up with GitHub
-          </Button>
-        </div>
-        <div className="mt-4 text-center text-sm">
-          Already have an account?{" "}
-          <Link href="#" className="underline">
-            Sign in
-          </Link>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
--- a/apps/www/registry/default/block/authentication-04.tsx
+++ b/apps/www/registry/default/block/authentication-04.tsx
@@ -1,74 +0,0 @@
-import Image from "next/image"
-import Link from "next/link"
-
-import { Button } from "@/registry/default/ui/button"
-import { Input } from "@/registry/default/ui/input"
-import { Label } from "@/registry/default/ui/label"
-
-export const description =
-  "A login page with two columns. The first column has the login form with email and password. There's a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image."
-
-export const iframeHeight = "800px"
-
-export const containerClassName = "w-full h-full p-4 lg:p-0"
-
-export default function Dashboard() {
-  return (
-    <div className="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
-      <div className="flex items-center justify-center py-12">
-        <div className="mx-auto grid w-[350px] gap-6">
-          <div className="grid gap-2 text-center">
-            <h1 className="text-3xl font-bold">Login</h1>
-            <p className="text-balance text-muted-foreground">
-              Enter your email below to login to your account
-            </p>
-          </div>
-          <div className="grid gap-4">
-            <div className="grid gap-2">
-              <Label htmlFor="email">Email</Label>
-              <Input
-                id="email"
-                type="email"
-                placeholder="m@example.com"
-                required
-              />
-            </div>
-            <div className="grid gap-2">
-              <div className="flex items-center">
-                <Label htmlFor="password">Password</Label>
-                <Link
-                  href="/forgot-password"
-                  className="ml-auto inline-block text-sm underline"
-                >
-                  Forgot your password?
-                </Link>
-              </div>
-              <Input id="password" type="password" required />
-            </div>
-            <Button type="submit" className="w-full">
-              Login
-            </Button>
-            <Button variant="outline" className="w-full">
-              Login with Google
-            </Button>
-          </div>
-          <div className="mt-4 text-center text-sm">
-            Don&apos;t have an account?{" "}
-            <Link href="#" className="underline">
-              Sign up
-            </Link>
-          </div>
-        </div>
-      </div>
-      <div className="hidden bg-muted lg:block">
-        <Image
-          src="/placeholder.svg"
-          alt="Image"
-          width="1920"
-          height="1080"
-          className="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
-        />
-      </div>
-    </div>
-  )
-}
--- a/apps/www/registry/default/block/login-01/components/login-form.tsx
+++ b/apps/www/registry/default/block/login-01/components/login-form.tsx
@@ -1,5 +1,4 @@
-import Link from "next/link"
-
+import { cn } from "@/registry/default/lib/utils"
 import { Button } from "@/registry/default/ui/button"
 import {
  Card,
@@ -11,49 +10,59 @@ import {
 import { Input } from "@/registry/default/ui/input"
 import { Label } from "@/registry/default/ui/label"

-export function LoginForm() {
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
  return (
-    <Card className="mx-auto max-w-sm">
-      <CardHeader>
-        <CardTitle className="text-2xl">Login</CardTitle>
-        <CardDescription>
-          Enter your email below to login to your account
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-4">
-          <div className="grid gap-2">
-            <Label htmlFor="email">Email</Label>
-            <Input
-              id="email"
-              type="email"
-              placeholder="m@example.com"
-              required
-            />
-          </div>
-          <div className="grid gap-2">
-            <div className="flex items-center">
-              <Label htmlFor="password">Password</Label>
-              <Link href="#" className="ml-auto inline-block text-sm underline">
-                Forgot your password?
-              </Link>
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-2xl">Login</CardTitle>
+          <CardDescription>
+            Enter your email below to login to your account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form>
+            <div className="flex flex-col gap-6">
+              <div className="grid gap-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="m@example.com"
+                  required
+                />
+              </div>
+              <div className="grid gap-2">
+                <div className="flex items-center">
+                  <Label htmlFor="password">Password</Label>
+                  <a
+                    href="#"
+                    className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                  >
+                    Forgot your password?
+                  </a>
+                </div>
+                <Input id="password" type="password" required />
+              </div>
+              <Button type="submit" className="w-full">
+                Login
+              </Button>
+              <Button variant="outline" className="w-full">
+                Login with Google
+              </Button>
            </div>
-            <Input id="password" type="password" required />
-          </div>
-          <Button type="submit" className="w-full">
-            Login
-          </Button>
-          <Button variant="outline" className="w-full">
-            Login with Google
-          </Button>
-        </div>
-        <div className="mt-4 text-center text-sm">
-          Don&apos;t have an account?{" "}
-          <Link href="#" className="underline">
-            Sign up
-          </Link>
-        </div>
-      </CardContent>
-    </Card>
+            <div className="mt-4 text-center text-sm">
+              Don&apos;t have an account?{" "}
+              <a href="#" className="underline underline-offset-4">
+                Sign up
+              </a>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
  )
 }
--- a/apps/www/registry/default/block/login-01/page.tsx
+++ b/apps/www/registry/default/block/login-01/page.tsx
@@ -4,12 +4,12 @@ export const description = "A simple login form."

 export const iframeHeight = "870px"

-export const containerClassName = "w-full h-full"
-
 export default function Page() {
  return (
-    <div className="flex h-screen w-full items-center justify-center px-4">
-      <LoginForm />
+    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <LoginForm />
+      </div>
    </div>
  )
 }
--- a/apps/www/registry/default/block/login-02/components/login-form.tsx
+++ b/apps/www/registry/default/block/login-02/components/login-form.tsx
@@ -0,0 +1,61 @@
+import { cn } from "@/registry/default/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"form">) {
+  return (
+    <form className={cn("flex flex-col gap-6", className)} {...props}>
+      <div className="flex flex-col items-center gap-2 text-center">
+        <h1 className="text-2xl font-bold">Login to your account</h1>
+        <p className="text-balance text-sm text-muted-foreground">
+          Enter your email below to login to your account
+        </p>
+      </div>
+      <div className="grid gap-6">
+        <div className="grid gap-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="m@example.com" required />
+        </div>
+        <div className="grid gap-2">
+          <div className="flex items-center">
+            <Label htmlFor="password">Password</Label>
+            <a
+              href="#"
+              className="ml-auto text-sm underline-offset-4 hover:underline"
+            >
+              Forgot your password?
+            </a>
+          </div>
+          <Input id="password" type="password" required />
+        </div>
+        <Button type="submit" className="w-full">
+          Login
+        </Button>
+        <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+          <span className="relative z-10 bg-background px-2 text-muted-foreground">
+            Or continue with
+          </span>
+        </div>
+        <Button variant="outline" className="w-full">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path
+              d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+              fill="currentColor"
+            />
+          </svg>
+          Login with GitHub
+        </Button>
+      </div>
+      <div className="text-center text-sm">
+        Don&apos;t have an account?{" "}
+        <a href="#" className="underline underline-offset-4">
+          Sign up
+        </a>
+      </div>
+    </form>
+  )
+}
--- a/apps/www/registry/default/block/login-02/page.tsx
+++ b/apps/www/registry/default/block/login-02/page.tsx
@@ -0,0 +1,36 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/default/block/login-02/components/login-form"
+
+export const description = "A two column login page with a cover image."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="grid min-h-svh lg:grid-cols-2">
+      <div className="flex flex-col gap-4 p-6 md:p-10">
+        <div className="flex justify-center gap-2 md:justify-start">
+          <a href="#" className="flex items-center gap-2 font-medium">
+            <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+              <GalleryVerticalEnd className="size-4" />
+            </div>
+            Acme Inc.
+          </a>
+        </div>
+        <div className="flex flex-1 items-center justify-center">
+          <div className="w-full max-w-xs">
+            <LoginForm />
+          </div>
+        </div>
+      </div>
+      <div className="relative hidden bg-muted lg:block">
+        <img
+          src="/placeholder.svg"
+          alt="Image"
+          className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+        />
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/default/block/login-03/components/login-form.tsx
+++ b/apps/www/registry/default/block/login-03/components/login-form.tsx
@@ -0,0 +1,96 @@
+import { cn } from "@/registry/default/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <Card>
+        <CardHeader className="text-center">
+          <CardTitle className="text-xl">Welcome back</CardTitle>
+          <CardDescription>
+            Login with your Apple or Google account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form>
+            <div className="grid gap-6">
+              <div className="flex flex-col gap-4">
+                <Button variant="outline" className="w-full">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                      d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  Login with Apple
+                </Button>
+                <Button variant="outline" className="w-full">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                      d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  Login with Google
+                </Button>
+              </div>
+              <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+                <span className="relative z-10 bg-background px-2 text-muted-foreground">
+                  Or continue with
+                </span>
+              </div>
+              <div className="grid gap-6">
+                <div className="grid gap-2">
+                  <Label htmlFor="email">Email</Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    placeholder="m@example.com"
+                    required
+                  />
+                </div>
+                <div className="grid gap-2">
+                  <div className="flex items-center">
+                    <Label htmlFor="password">Password</Label>
+                    <a
+                      href="#"
+                      className="ml-auto text-sm underline-offset-4 hover:underline"
+                    >
+                      Forgot your password?
+                    </a>
+                  </div>
+                  <Input id="password" type="password" required />
+                </div>
+                <Button type="submit" className="w-full">
+                  Login
+                </Button>
+              </div>
+              <div className="text-center text-sm">
+                Don&apos;t have an account?{" "}
+                <a href="#" className="underline underline-offset-4">
+                  Sign up
+                </a>
+              </div>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+      <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary  ">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
+        and <a href="#">Privacy Policy</a>.
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/default/block/login-03/page.tsx
+++ b/apps/www/registry/default/block/login-03/page.tsx
@@ -0,0 +1,23 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/default/block/login-03/components/login-form"
+
+export const description = "A login page with a muted background color."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+      <div className="flex w-full max-w-sm flex-col gap-6">
+        <a href="#" className="flex items-center gap-2 self-center font-medium">
+          <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+            <GalleryVerticalEnd className="size-4" />
+          </div>
+          Acme Inc.
+        </a>
+        <LoginForm />
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/default/block/login-04/components/login-form.tsx
+++ b/apps/www/registry/default/block/login-04/components/login-form.tsx
@@ -0,0 +1,104 @@
+import { cn } from "@/registry/default/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import { Card, CardContent } from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <Card className="overflow-hidden">
+        <CardContent className="grid p-0 md:grid-cols-2">
+          <form className="p-6 md:p-8">
+            <div className="flex flex-col gap-6">
+              <div className="flex flex-col items-center text-center">
+                <h1 className="text-2xl font-bold">Welcome back</h1>
+                <p className="text-balance text-muted-foreground">
+                  Login to your Acme Inc account
+                </p>
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="m@example.com"
+                  required
+                />
+              </div>
+              <div className="grid gap-2">
+                <div className="flex items-center">
+                  <Label htmlFor="password">Password</Label>
+                  <a
+                    href="#"
+                    className="ml-auto text-sm underline-offset-2 hover:underline"
+                  >
+                    Forgot your password?
+                  </a>
+                </div>
+                <Input id="password" type="password" required />
+              </div>
+              <Button type="submit" className="w-full">
+                Login
+              </Button>
+              <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+                <span className="relative z-10 bg-background px-2 text-muted-foreground">
+                  Or continue with
+                </span>
+              </div>
+              <div className="grid grid-cols-3 gap-4">
+                <Button variant="outline" className="w-full">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                      d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <span className="sr-only">Login with Apple</span>
+                </Button>
+                <Button variant="outline" className="w-full">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                      d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <span className="sr-only">Login with Google</span>
+                </Button>
+                <Button variant="outline" className="w-full">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                      d="M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <span className="sr-only">Login with Meta</span>
+                </Button>
+              </div>
+              <div className="text-center text-sm">
+                Don&apos;t have an account?{" "}
+                <a href="#" className="underline underline-offset-4">
+                  Sign up
+                </a>
+              </div>
+            </div>
+          </form>
+          <div className="relative hidden bg-muted md:block">
+            <img
+              src="/placeholder.svg"
+              alt="Image"
+              className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+            />
+          </div>
+        </CardContent>
+      </Card>
+      <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
+        and <a href="#">Privacy Policy</a>.
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/default/block/login-04/page.tsx
+++ b/apps/www/registry/default/block/login-04/page.tsx
@@ -0,0 +1,15 @@
+import { LoginForm } from "@/registry/default/block/login-04/components/login-form"
+
+export const description = "A login page with form and image."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
+      <div className="w-full max-w-sm md:max-w-3xl">
+        <LoginForm />
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/default/block/login-05/components/login-form.tsx
+++ b/apps/www/registry/default/block/login-05/components/login-form.tsx
@@ -0,0 +1,81 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { cn } from "@/registry/default/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <form>
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col items-center gap-2">
+            <a
+              href="#"
+              className="flex flex-col items-center gap-2 font-medium"
+            >
+              <div className="flex h-8 w-8 items-center justify-center rounded-md">
+                <GalleryVerticalEnd className="size-6" />
+              </div>
+              <span className="sr-only">Acme Inc.</span>
+            </a>
+            <h1 className="text-xl font-bold">Welcome to Acme Inc.</h1>
+            <div className="text-center text-sm">
+              Don&apos;t have an account?{" "}
+              <a href="#" className="underline underline-offset-4">
+                Sign up
+              </a>
+            </div>
+          </div>
+          <div className="flex flex-col gap-6">
+            <div className="grid gap-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="m@example.com"
+                required
+              />
+            </div>
+            <Button type="submit" className="w-full">
+              Login
+            </Button>
+          </div>
+          <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+            <span className="relative z-10 bg-background px-2 text-muted-foreground">
+              Or
+            </span>
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <Button variant="outline" className="w-full">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path
+                  d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+                  fill="currentColor"
+                />
+              </svg>
+              Continue with Apple
+            </Button>
+            <Button variant="outline" className="w-full">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path
+                  d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+                  fill="currentColor"
+                />
+              </svg>
+              Continue with Google
+            </Button>
+          </div>
+        </div>
+      </form>
+      <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary  ">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
+        and <a href="#">Privacy Policy</a>.
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/default/block/login-05/page.tsx
+++ b/apps/www/registry/default/block/login-05/page.tsx
@@ -0,0 +1,15 @@
+import { LoginForm } from "@/registry/default/block/login-05/components/login-form"
+
+export const description = "A simple email-only login page."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <LoginForm />
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/default/ui/command.tsx
+++ b/apps/www/registry/default/ui/command.tsx
@@ -23,7 +23,9 @@ const Command = React.forwardRef<
 ))
 Command.displayName = CommandPrimitive.displayName

-const CommandDialog = ({ children, ...props }: DialogProps) => {
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
  return (
    <Dialog {...props}>
      <DialogContent className="overflow-hidden p-0 shadow-lg">
--- a/apps/www/registry/default/ui/input.tsx
+++ b/apps/www/registry/default/ui/input.tsx
@@ -2,7 +2,10 @@ import * as React from "react"

 import { cn } from "@/lib/utils"

-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
--- a/apps/www/registry/default/ui/textarea.tsx
+++ b/apps/www/registry/default/ui/textarea.tsx
@@ -2,21 +2,23 @@ import * as React from "react"

 import { cn } from "@/lib/utils"

-const Textarea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.ComponentProps<"textarea">
->(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-})
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
 Textarea.displayName = "Textarea"

 export { Textarea }
--- a/apps/www/registry/new-york/block/authentication-01.tsx
+++ b/apps/www/registry/new-york/block/authentication-01.tsx
@@ -1,45 +0,0 @@
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
-
-export const description =
-  "A simple login form with email and password. The submit button says 'Sign in'."
-
-export const iframeHeight = "600px"
-
-export const containerClassName =
-  "w-full h-screen flex items-center justify-center px-4"
-
-export default function LoginForm() {
-  return (
-    <Card className="w-full max-w-sm">
-      <CardHeader>
-        <CardTitle className="text-2xl">Login</CardTitle>
-        <CardDescription>
-          Enter your email below to login to your account.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-4">
-        <div className="grid gap-2">
-          <Label htmlFor="email">Email</Label>
-          <Input id="email" type="email" placeholder="m@example.com" required />
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor="password">Password</Label>
-          <Input id="password" type="password" required />
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">Sign in</Button>
-      </CardFooter>
-    </Card>
-  )
-}
--- a/apps/www/registry/new-york/block/authentication-02.tsx
+++ b/apps/www/registry/new-york/block/authentication-02.tsx
@@ -1,67 +0,0 @@
-import Link from "next/link"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
-
-export const description =
-  "A login form with email and password. There's an option to login with Google and a link to sign up if you don't have an account."
-
-export const iframeHeight = "600px"
-
-export const containerClassName =
-  "w-full h-screen flex items-center justify-center px-4"
-
-export default function LoginForm() {
-  return (
-    <Card className="mx-auto max-w-sm">
-      <CardHeader>
-        <CardTitle className="text-2xl">Login</CardTitle>
-        <CardDescription>
-          Enter your email below to login to your account
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-4">
-          <div className="grid gap-2">
-            <Label htmlFor="email">Email</Label>
-            <Input
-              id="email"
-              type="email"
-              placeholder="m@example.com"
-              required
-            />
-          </div>
-          <div className="grid gap-2">
-            <div className="flex items-center">
-              <Label htmlFor="password">Password</Label>
-              <Link href="#" className="ml-auto inline-block text-sm underline">
-                Forgot your password?
-              </Link>
-            </div>
-            <Input id="password" type="password" required />
-          </div>
-          <Button type="submit" className="w-full">
-            Login
-          </Button>
-          <Button variant="outline" className="w-full">
-            Login with Google
-          </Button>
-        </div>
-        <div className="mt-4 text-center text-sm">
-          Don&apos;t have an account?{" "}
-          <Link href="#" className="underline">
-            Sign up
-          </Link>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
--- a/apps/www/registry/new-york/block/authentication-03.tsx
+++ b/apps/www/registry/new-york/block/authentication-03.tsx
@@ -1,72 +0,0 @@
-import Link from "next/link"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
-
-export const description =
-  "A sign up form with first name, last name, email and password inside a card. There's an option to sign up with GitHub and a link to login if you already have an account"
-
-export const iframeHeight = "600px"
-
-export const containerClassName =
-  "w-full h-screen flex items-center justify-center px-4"
-
-export default function LoginForm() {
-  return (
-    <Card className="mx-auto max-w-sm">
-      <CardHeader>
-        <CardTitle className="text-xl">Sign Up</CardTitle>
-        <CardDescription>
-          Enter your information to create an account
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-4">
-          <div className="grid grid-cols-2 gap-4">
-            <div className="grid gap-2">
-              <Label htmlFor="first-name">First name</Label>
-              <Input id="first-name" placeholder="Max" required />
-            </div>
-            <div className="grid gap-2">
-              <Label htmlFor="last-name">Last name</Label>
-              <Input id="last-name" placeholder="Robinson" required />
-            </div>
-          </div>
-          <div className="grid gap-2">
-            <Label htmlFor="email">Email</Label>
-            <Input
-              id="email"
-              type="email"
-              placeholder="m@example.com"
-              required
-            />
-          </div>
-          <div className="grid gap-2">
-            <Label htmlFor="password">Password</Label>
-            <Input id="password" type="password" />
-          </div>
-          <Button type="submit" className="w-full">
-            Create an account
-          </Button>
-          <Button variant="outline" className="w-full">
-            Sign up with GitHub
-          </Button>
-        </div>
-        <div className="mt-4 text-center text-sm">
-          Already have an account?{" "}
-          <Link href="#" className="underline">
-            Sign in
-          </Link>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
--- a/apps/www/registry/new-york/block/authentication-04.tsx
+++ b/apps/www/registry/new-york/block/authentication-04.tsx
@@ -1,74 +0,0 @@
-import Image from "next/image"
-import Link from "next/link"
-
-import { Button } from "@/registry/new-york/ui/button"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
-
-export const description =
-  "A login page with two columns. The first column has the login form with email and password. There's a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image."
-
-export const iframeHeight = "800px"
-
-export const containerClassName = "w-full h-full p-4 lg:p-0"
-
-export default function Dashboard() {
-  return (
-    <div className="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
-      <div className="flex items-center justify-center py-12">
-        <div className="mx-auto grid w-[350px] gap-6">
-          <div className="grid gap-2 text-center">
-            <h1 className="text-3xl font-bold">Login</h1>
-            <p className="text-balance text-muted-foreground">
-              Enter your email below to login to your account
-            </p>
-          </div>
-          <div className="grid gap-4">
-            <div className="grid gap-2">
-              <Label htmlFor="email">Email</Label>
-              <Input
-                id="email"
-                type="email"
-                placeholder="m@example.com"
-                required
-              />
-            </div>
-            <div className="grid gap-2">
-              <div className="flex items-center">
-                <Label htmlFor="password">Password</Label>
-                <Link
-                  href="/forgot-password"
-                  className="ml-auto inline-block text-sm underline"
-                >
-                  Forgot your password?
-                </Link>
-              </div>
-              <Input id="password" type="password" required />
-            </div>
-            <Button type="submit" className="w-full">
-              Login
-            </Button>
-            <Button variant="outline" className="w-full">
-              Login with Google
-            </Button>
-          </div>
-          <div className="mt-4 text-center text-sm">
-            Don&apos;t have an account?{" "}
-            <Link href="#" className="underline">
-              Sign up
-            </Link>
-          </div>
-        </div>
-      </div>
-      <div className="hidden bg-muted lg:block">
-        <Image
-          src="/placeholder.svg"
-          alt="Image"
-          width="1920"
-          height="1080"
-          className="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
-        />
-      </div>
-    </div>
-  )
-}
--- a/apps/www/registry/new-york/block/login-01/components/login-form.tsx
+++ b/apps/www/registry/new-york/block/login-01/components/login-form.tsx
@@ -1,5 +1,4 @@
-import Link from "next/link"
-
+import { cn } from "@/registry/new-york/lib/utils"
 import { Button } from "@/registry/new-york/ui/button"
 import {
  Card,
@@ -11,49 +10,59 @@ import {
 import { Input } from "@/registry/new-york/ui/input"
 import { Label } from "@/registry/new-york/ui/label"

-export function LoginForm() {
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
  return (
-    <Card className="mx-auto max-w-sm">
-      <CardHeader>
-        <CardTitle className="text-2xl">Login</CardTitle>
-        <CardDescription>
-          Enter your email below to login to your account
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-4">
-          <div className="grid gap-2">
-            <Label htmlFor="email">Email</Label>
-            <Input
-              id="email"
-              type="email"
-              placeholder="m@example.com"
-              required
-            />
-          </div>
-          <div className="grid gap-2">
-            <div className="flex items-center">
-              <Label htmlFor="password">Password</Label>
-              <Link href="#" className="ml-auto inline-block text-sm underline">
-                Forgot your password?
-              </Link>
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-2xl">Login</CardTitle>
+          <CardDescription>
+            Enter your email below to login to your account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form>
+            <div className="flex flex-col gap-6">
+              <div className="grid gap-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="m@example.com"
+                  required
+                />
+              </div>
+              <div className="grid gap-2">
+                <div className="flex items-center">
+                  <Label htmlFor="password">Password</Label>
+                  <a
+                    href="#"
+                    className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                  >
+                    Forgot your password?
+                  </a>
+                </div>
+                <Input id="password" type="password" required />
+              </div>
+              <Button type="submit" className="w-full">
+                Login
+              </Button>
+              <Button variant="outline" className="w-full">
+                Login with Google
+              </Button>
            </div>
-            <Input id="password" type="password" required />
-          </div>
-          <Button type="submit" className="w-full">
-            Login
-          </Button>
-          <Button variant="outline" className="w-full">
-            Login with Google
-          </Button>
-        </div>
-        <div className="mt-4 text-center text-sm">
-          Don&apos;t have an account?{" "}
-          <Link href="#" className="underline">
-            Sign up
-          </Link>
-        </div>
-      </CardContent>
-    </Card>
+            <div className="mt-4 text-center text-sm">
+              Don&apos;t have an account?{" "}
+              <a href="#" className="underline underline-offset-4">
+                Sign up
+              </a>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
  )
 }
--- a/apps/www/registry/new-york/block/login-01/page.tsx
+++ b/apps/www/registry/new-york/block/login-01/page.tsx
@@ -4,12 +4,12 @@ export const description = "A simple login form."

 export const iframeHeight = "870px"

-export const containerClassName = "w-full h-full"
-
 export default function Page() {
  return (
-    <div className="flex h-screen w-full items-center justify-center px-4">
-      <LoginForm />
+    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <LoginForm />
+      </div>
    </div>
  )
 }
--- a/apps/www/registry/new-york/block/login-02/components/login-form.tsx
+++ b/apps/www/registry/new-york/block/login-02/components/login-form.tsx
@@ -0,0 +1,61 @@
+import { cn } from "@/registry/default/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"form">) {
+  return (
+    <form className={cn("flex flex-col gap-6", className)} {...props}>
+      <div className="flex flex-col items-center gap-2 text-center">
+        <h1 className="text-2xl font-bold">Login to your account</h1>
+        <p className="text-balance text-sm text-muted-foreground">
+          Enter your email below to login to your account
+        </p>
+      </div>
+      <div className="grid gap-6">
+        <div className="grid gap-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="m@example.com" required />
+        </div>
+        <div className="grid gap-2">
+          <div className="flex items-center">
+            <Label htmlFor="password">Password</Label>
+            <a
+              href="#"
+              className="ml-auto text-sm underline-offset-4 hover:underline"
+            >
+              Forgot your password?
+            </a>
+          </div>
+          <Input id="password" type="password" required />
+        </div>
+        <Button type="submit" className="w-full">
+          Login
+        </Button>
+        <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+          <span className="relative z-10 bg-background px-2 text-muted-foreground">
+            Or continue with
+          </span>
+        </div>
+        <Button variant="outline" className="w-full">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path
+              d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+              fill="currentColor"
+            />
+          </svg>
+          Login with GitHub
+        </Button>
+      </div>
+      <div className="text-center text-sm">
+        Don&apos;t have an account?{" "}
+        <a href="#" className="underline underline-offset-4">
+          Sign up
+        </a>
+      </div>
+    </form>
+  )
+}
--- a/apps/www/registry/new-york/block/login-02/page.tsx
+++ b/apps/www/registry/new-york/block/login-02/page.tsx
@@ -0,0 +1,36 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/new-york/block/login-02/components/login-form"
+
+export const description = "A two column login page with a cover image."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="grid min-h-svh lg:grid-cols-2">
+      <div className="flex flex-col gap-4 p-6 md:p-10">
+        <div className="flex justify-center gap-2 md:justify-start">
+          <a href="#" className="flex items-center gap-2 font-medium">
+            <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+              <GalleryVerticalEnd className="size-4" />
+            </div>
+            Acme Inc.
+          </a>
+        </div>
+        <div className="flex flex-1 items-center justify-center">
+          <div className="w-full max-w-xs">
+            <LoginForm />
+          </div>
+        </div>
+      </div>
+      <div className="relative hidden bg-muted lg:block">
+        <img
+          src="/placeholder.svg"
+          alt="Image"
+          className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+        />
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/new-york/block/login-03/components/login-form.tsx
+++ b/apps/www/registry/new-york/block/login-03/components/login-form.tsx
@@ -0,0 +1,96 @@
+import { cn } from "@/registry/new-york/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <Card>
+        <CardHeader className="text-center">
+          <CardTitle className="text-xl">Welcome back</CardTitle>
+          <CardDescription>
+            Login with your Apple or Google account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form>
+            <div className="grid gap-6">
+              <div className="flex flex-col gap-4">
+                <Button variant="outline" className="w-full">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                      d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  Login with Apple
+                </Button>
+                <Button variant="outline" className="w-full">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                      d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  Login with Google
+                </Button>
+              </div>
+              <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+                <span className="relative z-10 bg-background px-2 text-muted-foreground">
+                  Or continue with
+                </span>
+              </div>
+              <div className="grid gap-6">
+                <div className="grid gap-2">
+                  <Label htmlFor="email">Email</Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    placeholder="m@example.com"
+                    required
+                  />
+                </div>
+                <div className="grid gap-2">
+                  <div className="flex items-center">
+                    <Label htmlFor="password">Password</Label>
+                    <a
+                      href="#"
+                      className="ml-auto text-sm underline-offset-4 hover:underline"
+                    >
+                      Forgot your password?
+                    </a>
+                  </div>
+                  <Input id="password" type="password" required />
+                </div>
+                <Button type="submit" className="w-full">
+                  Login
+                </Button>
+              </div>
+              <div className="text-center text-sm">
+                Don&apos;t have an account?{" "}
+                <a href="#" className="underline underline-offset-4">
+                  Sign up
+                </a>
+              </div>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+      <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary  ">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
+        and <a href="#">Privacy Policy</a>.
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/new-york/block/login-03/page.tsx
+++ b/apps/www/registry/new-york/block/login-03/page.tsx
@@ -0,0 +1,23 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/new-york/block/login-03/components/login-form"
+
+export const description = "A login page with a muted background color."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+      <div className="flex w-full max-w-sm flex-col gap-6">
+        <a href="#" className="flex items-center gap-2 self-center font-medium">
+          <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+            <GalleryVerticalEnd className="size-4" />
+          </div>
+          Acme Inc.
+        </a>
+        <LoginForm />
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/new-york/block/login-04/components/login-form.tsx
+++ b/apps/www/registry/new-york/block/login-04/components/login-form.tsx
@@ -0,0 +1,104 @@
+import { cn } from "@/registry/new-york/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import { Card, CardContent } from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <Card className="overflow-hidden">
+        <CardContent className="grid p-0 md:grid-cols-2">
+          <form className="p-6 md:p-8">
+            <div className="flex flex-col gap-6">
+              <div className="flex flex-col items-center text-center">
+                <h1 className="text-2xl font-bold">Welcome back</h1>
+                <p className="text-balance text-muted-foreground">
+                  Login to your Acme Inc account
+                </p>
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="m@example.com"
+                  required
+                />
+              </div>
+              <div className="grid gap-2">
+                <div className="flex items-center">
+                  <Label htmlFor="password">Password</Label>
+                  <a
+                    href="#"
+                    className="ml-auto text-sm underline-offset-2 hover:underline"
+                  >
+                    Forgot your password?
+                  </a>
+                </div>
+                <Input id="password" type="password" required />
+              </div>
+              <Button type="submit" className="w-full">
+                Login
+              </Button>
+              <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+                <span className="relative z-10 bg-background px-2 text-muted-foreground">
+                  Or continue with
+                </span>
+              </div>
+              <div className="grid grid-cols-3 gap-4">
+                <Button variant="outline" className="w-full">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                      d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <span className="sr-only">Login with Apple</span>
+                </Button>
+                <Button variant="outline" className="w-full">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                      d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <span className="sr-only">Login with Google</span>
+                </Button>
+                <Button variant="outline" className="w-full">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                      d="M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <span className="sr-only">Login with Meta</span>
+                </Button>
+              </div>
+              <div className="text-center text-sm">
+                Don&apos;t have an account?{" "}
+                <a href="#" className="underline underline-offset-4">
+                  Sign up
+                </a>
+              </div>
+            </div>
+          </form>
+          <div className="relative hidden bg-muted md:block">
+            <img
+              src="/placeholder.svg"
+              alt="Image"
+              className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+            />
+          </div>
+        </CardContent>
+      </Card>
+      <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
+        and <a href="#">Privacy Policy</a>.
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/new-york/block/login-04/page.tsx
+++ b/apps/www/registry/new-york/block/login-04/page.tsx
@@ -0,0 +1,15 @@
+import { LoginForm } from "@/registry/new-york/block/login-04/components/login-form"
+
+export const description = "A login page with form and image."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
+      <div className="w-full max-w-sm md:max-w-3xl">
+        <LoginForm />
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/new-york/block/login-05/components/login-form.tsx
+++ b/apps/www/registry/new-york/block/login-05/components/login-form.tsx
@@ -0,0 +1,81 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { cn } from "@/registry/new-york/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <form>
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col items-center gap-2">
+            <a
+              href="#"
+              className="flex flex-col items-center gap-2 font-medium"
+            >
+              <div className="flex h-8 w-8 items-center justify-center rounded-md">
+                <GalleryVerticalEnd className="size-6" />
+              </div>
+              <span className="sr-only">Acme Inc.</span>
+            </a>
+            <h1 className="text-xl font-bold">Welcome to Acme Inc.</h1>
+            <div className="text-center text-sm">
+              Don&apos;t have an account?{" "}
+              <a href="#" className="underline underline-offset-4">
+                Sign up
+              </a>
+            </div>
+          </div>
+          <div className="flex flex-col gap-6">
+            <div className="grid gap-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="m@example.com"
+                required
+              />
+            </div>
+            <Button type="submit" className="w-full">
+              Login
+            </Button>
+          </div>
+          <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+            <span className="relative z-10 bg-background px-2 text-muted-foreground">
+              Or
+            </span>
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <Button variant="outline" className="w-full">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path
+                  d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+                  fill="currentColor"
+                />
+              </svg>
+              Continue with Apple
+            </Button>
+            <Button variant="outline" className="w-full">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path
+                  d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+                  fill="currentColor"
+                />
+              </svg>
+              Continue with Google
+            </Button>
+          </div>
+        </div>
+      </form>
+      <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary  ">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
+        and <a href="#">Privacy Policy</a>.
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/new-york/block/login-05/page.tsx
+++ b/apps/www/registry/new-york/block/login-05/page.tsx
@@ -0,0 +1,15 @@
+import { LoginForm } from "@/registry/new-york/block/login-05/components/login-form"
+
+export const description = "A simple email-only login page."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <LoginForm />
+      </div>
+    </div>
+  )
+}
--- a/apps/www/registry/new-york/ui/command.tsx
+++ b/apps/www/registry/new-york/ui/command.tsx
@@ -23,7 +23,9 @@ const Command = React.forwardRef<
 ))
 Command.displayName = CommandPrimitive.displayName

-const CommandDialog = ({ children, ...props }: DialogProps) => {
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
  return (
    <Dialog {...props}>
      <DialogContent className="overflow-hidden p-0">
--- a/apps/www/registry/new-york/ui/input.tsx
+++ b/apps/www/registry/new-york/ui/input.tsx
@@ -2,7 +2,10 @@ import * as React from "react"

 import { cn } from "@/lib/utils"

-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
--- a/apps/www/registry/new-york/ui/textarea.tsx
+++ b/apps/www/registry/new-york/ui/textarea.tsx
@@ -2,21 +2,23 @@ import * as React from "react"

 import { cn } from "@/lib/utils"

-const Textarea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.ComponentProps<"textarea">
->(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-})
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
 Textarea.displayName = "Textarea"

 export { Textarea }
--- a/apps/www/registry/registry-blocks.ts
+++ b/apps/www/registry/registry-blocks.ts
@@ -816,4 +816,76 @@ export const blocks: Registry = [
    category: "Authentication",
    subcategory: "Login",
  },
+  {
+    name: "login-02",
+    type: "registry:block",
+    registryDependencies: ["button", "card", "input", "label"],
+    files: [
+      {
+        path: "block/login-02/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        path: "block/login-02/components/login-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    category: "Authentication",
+    subcategory: "Login",
+  },
+  {
+    name: "login-03",
+    type: "registry:block",
+    registryDependencies: ["button", "card", "input", "label"],
+    files: [
+      {
+        path: "block/login-03/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        path: "block/login-03/components/login-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    category: "Authentication",
+    subcategory: "Login",
+  },
+  {
+    name: "login-04",
+    type: "registry:block",
+    registryDependencies: ["button", "card", "input", "label"],
+    files: [
+      {
+        path: "block/login-04/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        path: "block/login-04/components/login-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    category: "Authentication",
+    subcategory: "Login",
+  },
+  {
+    name: "login-05",
+    type: "registry:block",
+    registryDependencies: ["button", "card", "input", "label"],
+    files: [
+      {
+        path: "block/login-05/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        path: "block/login-05/components/login-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    category: "Authentication",
+    subcategory: "Login",
+  },
 ]
--- a/apps/www/scripts/build-registry.mts
+++ b/apps/www/scripts/build-registry.mts
@@ -3,7 +3,7 @@ import { existsSync, promises as fs, readFileSync } from "fs"
 import { tmpdir } from "os"
 import path from "path"
 import { cwd } from "process"
-import template from "lodash/template"
+import template from "lodash.template"
 import { rimraf } from "rimraf"
 import { Project, ScriptKind, SyntaxKind } from "ts-morph"
 import { z } from "zod"
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -1,11 +1,5 @@
 # @shadcn/ui

-## 0.9.4
-
-### Patch Changes
-
- [#4397](https://github.com/shadcn-ui/ui/pull/4397) [`a1bed46`](https://github.com/shadcn-ui/ui/commit/a1bed464f329e9025a7fa1ae7dee094d4c9c6f44) Thanks [@JensAstrup](https://github.com/JensAstrup)! - replace lodash.template
-
 ## 0.9.3

 ### Patch Changes
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
  "name": "shadcn-ui",
-  "version": "0.9.4",
+  "version": "0.9.3",
  "description": "Add components to your apps.",
  "publishConfig": {
    "access": "public"
@@ -57,7 +57,7 @@
    "fast-glob": "^3.3.2",
    "fs-extra": "^11.1.0",
    "https-proxy-agent": "^6.2.0",
-    "lodash": "^4.17.21",
+    "lodash.template": "^4.5.0",
    "node-fetch": "^3.3.0",
    "ora": "^6.1.2",
    "prompts": "^2.4.2",
@@ -70,7 +70,7 @@
    "@types/babel__core": "^7.20.1",
    "@types/diff": "^5.0.3",
    "@types/fs-extra": "^11.0.1",
-    "@types/lodash": "^4.17.7",
+    "@types/lodash.template": "^4.5.1",
    "@types/prompts": "^2.4.2",
    "rimraf": "^4.1.3",
    "tsup": "^6.6.3",
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -24,7 +24,7 @@ import * as templates from "@/src/utils/templates"
 import chalk from "chalk"
 import { Command } from "commander"
 import { execa } from "execa"
-import template from "lodash/template"
+import template from "lodash.template"
 import ora from "ora"
 import prompts from "prompts"
 import { z } from "zod"
--- a/packages/shadcn/CHANGELOG.md
+++ b/packages/shadcn/CHANGELOG.md
@@ -1,15 +1,5 @@
 # @shadcn/ui

-## 2.1.7
-
-### Patch Changes
-
- [#5711](https://github.com/shadcn-ui/ui/pull/5711) [`500dbe2`](https://github.com/shadcn-ui/ui/commit/500dbe2664c04936cc3edb739fc97f6cecff57c5) Thanks [@bcorbold](https://github.com/bcorbold)! - Update spread/unspread helpers to handle ArrayLiteralExpression and nested values within arrays
-
- [#5678](https://github.com/shadcn-ui/ui/pull/5678) [`fb36ca4`](https://github.com/shadcn-ui/ui/commit/fb36ca41591ae952f3a015e2a4470f26458cf1b5) Thanks [@Tobbe](https://github.com/Tobbe)! - support aliases longer than one char
-
- [#5813](https://github.com/shadcn-ui/ui/pull/5813) [`d5bf001`](https://github.com/shadcn-ui/ui/commit/d5bf0018fda42faeb314dc3edc87b8cd7c0354c6) Thanks [@shadcn](https://github.com/shadcn)! - fix handling of aliases
-
 ## 2.1.6

 ### Patch Changes
--- a/packages/shadcn/package.json
+++ b/packages/shadcn/package.json
@@ -1,6 +1,6 @@
 {
  "name": "shadcn",
-  "version": "2.1.7",
+  "version": "2.1.6",
  "description": "Add components to your apps.",
  "publishConfig": {
    "access": "public"
--- a/packages/shadcn/src/utils/get-project-info.ts
+++ b/packages/shadcn/src/utils/get-project-info.ts
@@ -10,7 +10,6 @@ import { getPackageInfo } from "@/src/utils/get-package-info"
 import fg from "fast-glob"
 import fs from "fs-extra"
 import { loadConfig } from "tsconfig-paths"
-import { z } from "zod"

 type ProjectInfo = {
  framework: Framework
@@ -30,12 +29,6 @@ const PROJECT_SHARED_IGNORE = [
  "build",
 ]

-const TS_CONFIG_SCHEMA = z.object({
-  compilerOptions: z.object({
-    paths: z.record(z.string().or(z.array(z.string()))),
-  }),
-})
-
 export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
  const [
    configFiles,
@@ -160,10 +153,7 @@ export async function getTailwindConfigFile(cwd: string) {
 export async function getTsConfigAliasPrefix(cwd: string) {
  const tsConfig = await loadConfig(cwd)

-  if (
-    tsConfig?.resultType === "failed" ||
-    !Object.entries(tsConfig?.paths).length
-  ) {
+  if (tsConfig?.resultType === "failed" || !tsConfig?.paths) {
    return null
  }

@@ -175,12 +165,11 @@ export async function getTsConfigAliasPrefix(cwd: string) {
      paths.includes("./app/*") ||
      paths.includes("./resources/js/*") // Laravel.
    ) {
-      return alias.replace(/\/\*$/, "") ?? null
+      return alias.at(0) ?? null
    }
  }

-  // Use the first alias as the prefix.
-  return Object.keys(tsConfig?.paths)?.[0].replace(/\/\*$/, "") ?? null
+  return null
 }

 export async function isTypeScriptProject(cwd: string) {
@@ -193,30 +182,19 @@ export async function isTypeScriptProject(cwd: string) {
  return files.length > 0
 }

-export async function getTsConfig(cwd: string) {
-  for (const fallback of [
-    "tsconfig.json",
-    "tsconfig.web.json",
-    "tsconfig.app.json",
-  ]) {
-    const filePath = path.resolve(cwd, fallback)
-    if (!(await fs.pathExists(filePath))) {
-      continue
+export async function getTsConfig() {
+  try {
+    const tsconfigPath = path.join("tsconfig.json")
+    const tsconfig = await fs.readJSON(tsconfigPath)
+
+    if (!tsconfig) {
+      throw new Error("tsconfig.json is missing")
    }

-    // We can't use fs.readJSON because it doesn't support comments.
-    const contents = await fs.readFile(filePath, "utf8")
-    const cleanedContents = contents.replace(/\/\*\s*\*\//g, "")
-    const result = TS_CONFIG_SCHEMA.safeParse(JSON.parse(cleanedContents))
-
-    if (result.error) {
-      continue
-    }
-
-    return result.data
+    return tsconfig
+  } catch (error) {
+    return null
  }
-
-  return null
 }

 export async function getProjectConfig(
--- a/packages/shadcn/src/utils/transformers/transform-import.ts
+++ b/packages/shadcn/src/utils/transformers/transform-import.ts
@@ -35,8 +35,8 @@ function updateImportAliases(moduleSpecifier: string, config: Config) {

  // Not a registry import.
  if (!moduleSpecifier.startsWith("@/registry/")) {
-    // We fix the alias and return.
-    const alias = config.aliases.components.split("/")[0]
+    // We fix the alias an return.
+    const alias = config.aliases.components.charAt(0)
    return moduleSpecifier.replace(/^@\//, `${alias}/`)
  }

--- a/packages/shadcn/src/utils/updaters/update-tailwind-config.ts
+++ b/packages/shadcn/src/utils/updaters/update-tailwind-config.ts
@@ -9,7 +9,6 @@ import deepmerge from "deepmerge"
 import objectToString from "stringify-object"
 import { type Config as TailwindConfig } from "tailwindcss"
 import {
-  ArrayLiteralExpression,
  ObjectLiteralExpression,
  Project,
  PropertyAssignment,
@@ -195,11 +194,8 @@ async function addTailwindConfigTheme(
  if (themeInitializer?.isKind(SyntaxKind.ObjectLiteralExpression)) {
    const themeObjectString = themeInitializer.getText()
    const themeObject = await parseObjectLiteral(themeObjectString)
-    const result = deepmerge(themeObject, theme, {
-      arrayMerge: (dst, src) => src,
-    })
+    const result = deepmerge(themeObject, theme)
    const resultString = objectToString(result)
-      .replace(/\'\.\.\.(.*)\'/g, "...$1") // Remove quote around spread element
      .replace(/\'\"/g, "'") // Replace `\" with "
      .replace(/\"\'/g, "'") // Replace `\" with "
      .replace(/\'\[/g, "[") // Replace `[ with [
@@ -291,8 +287,7 @@ export function nestSpreadProperties(obj: ObjectLiteralExpression) {

      // Replace spread with a property assignment
      obj.insertPropertyAssignment(i, {
-        // Need to escape the name with " so that deepmerge doesn't mishandle the key
-        name: `"___${spreadText.replace(/^\.\.\./, "")}"`,
+        name: `___${spreadText.replace(/^\.\.\./, "")}`,
        initializer: `"...${spreadText.replace(/^\.\.\./, "")}"`,
      })

@@ -310,41 +305,11 @@ export function nestSpreadProperties(obj: ObjectLiteralExpression) {
        nestSpreadProperties(
          initializer.asKindOrThrow(SyntaxKind.ObjectLiteralExpression)
        )
-      } else if (
-        initializer &&
-        initializer.isKind(SyntaxKind.ArrayLiteralExpression)
-      ) {
-        nestSpreadElements(
-          initializer.asKindOrThrow(SyntaxKind.ArrayLiteralExpression)
-        )
      }
    }
  }
 }

-export function nestSpreadElements(arr: ArrayLiteralExpression) {
-  const elements = arr.getElements()
-  for (let j = 0; j < elements.length; j++) {
-    const element = elements[j]
-    if (element.isKind(SyntaxKind.ObjectLiteralExpression)) {
-      // Recursive check on objects within arrays
-      nestSpreadProperties(
-        element.asKindOrThrow(SyntaxKind.ObjectLiteralExpression)
-      )
-    } else if (element.isKind(SyntaxKind.ArrayLiteralExpression)) {
-      // Recursive check on nested arrays
-      nestSpreadElements(
-        element.asKindOrThrow(SyntaxKind.ArrayLiteralExpression)
-      )
-    } else if (element.isKind(SyntaxKind.SpreadElement)) {
-      const spreadText = element.getText()
-      // Spread element within an array
-      arr.removeElement(j)
-      arr.insertElement(j, `"${spreadText}"`)
-    }
-  }
-}
-
 export function unnestSpreadProperties(obj: ObjectLiteralExpression) {
  const properties = obj.getProperties()

@@ -354,49 +319,14 @@ export function unnestSpreadProperties(obj: ObjectLiteralExpression) {
      const propAssignment = prop as PropertyAssignment
      const initializer = propAssignment.getInitializer()

-      if (initializer && initializer.isKind(SyntaxKind.StringLiteral)) {
-        const value = initializer
-          .asKindOrThrow(SyntaxKind.StringLiteral)
-          .getLiteralValue()
+      if (initializer?.isKind(SyntaxKind.StringLiteral)) {
+        const value = initializer.getLiteralValue()
        if (value.startsWith("...")) {
          obj.insertSpreadAssignment(i, { expression: value.slice(3) })
          propAssignment.remove()
        }
      } else if (initializer?.isKind(SyntaxKind.ObjectLiteralExpression)) {
        unnestSpreadProperties(initializer as ObjectLiteralExpression)
-      } else if (
-        initializer &&
-        initializer.isKind(SyntaxKind.ArrayLiteralExpression)
-      ) {
-        unnsetSpreadElements(
-          initializer.asKindOrThrow(SyntaxKind.ArrayLiteralExpression)
-        )
-      }
-    }
-  }
-}
-
-export function unnsetSpreadElements(arr: ArrayLiteralExpression) {
-  const elements = arr.getElements()
-  for (let j = 0; j < elements.length; j++) {
-    const element = elements[j]
-    if (element.isKind(SyntaxKind.ObjectLiteralExpression)) {
-      // Recursive check on objects within arrays
-      unnestSpreadProperties(
-        element.asKindOrThrow(SyntaxKind.ObjectLiteralExpression)
-      )
-    } else if (element.isKind(SyntaxKind.ArrayLiteralExpression)) {
-      // Recursive check on nested arrays
-      unnsetSpreadElements(
-        element.asKindOrThrow(SyntaxKind.ArrayLiteralExpression)
-      )
-    } else if (element.isKind(SyntaxKind.StringLiteral)) {
-      const spreadText = element.getText()
-      // check if spread element
-      const spreadTest = /(?:^['"])(\.\.\..*)(?:['"]$)/g
-      if (spreadTest.test(spreadText)) {
-        arr.removeElement(j)
-        arr.insertElement(j, spreadText.replace(spreadTest, "$1"))
      }
    }
  }
@@ -433,12 +363,6 @@ function parseObjectLiteralExpression(node: ObjectLiteralExpression): any {
        result[name] = parseObjectLiteralExpression(
          property.getInitializer() as ObjectLiteralExpression
        )
-      } else if (
-        property.getInitializer()?.isKind(SyntaxKind.ArrayLiteralExpression)
-      ) {
-        result[name] = parseArrayLiteralExpression(
-          property.getInitializer() as ArrayLiteralExpression
-        )
      } else {
        result[name] = parseValue(property.getInitializer())
      }
@@ -447,34 +371,12 @@ function parseObjectLiteralExpression(node: ObjectLiteralExpression): any {
  return result
 }

-function parseArrayLiteralExpression(node: ArrayLiteralExpression): any[] {
-  const result: any[] = []
-  for (const element of node.getElements()) {
-    if (element.isKind(SyntaxKind.ObjectLiteralExpression)) {
-      result.push(
-        parseObjectLiteralExpression(
-          element.asKindOrThrow(SyntaxKind.ObjectLiteralExpression)
-        )
-      )
-    } else if (element.isKind(SyntaxKind.ArrayLiteralExpression)) {
-      result.push(
-        parseArrayLiteralExpression(
-          element.asKindOrThrow(SyntaxKind.ArrayLiteralExpression)
-        )
-      )
-    } else {
-      result.push(parseValue(element))
-    }
-  }
-  return result
-}
-
 function parseValue(node: any): any {
-  switch (node.getKind()) {
+  switch (node.kind) {
    case SyntaxKind.StringLiteral:
-      return node.getText()
+      return node.text
    case SyntaxKind.NumericLiteral:
-      return Number(node.getText())
+      return Number(node.text)
    case SyntaxKind.TrueKeyword:
      return true
    case SyntaxKind.FalseKeyword:
@@ -482,9 +384,7 @@ function parseValue(node: any): any {
    case SyntaxKind.NullKeyword:
      return null
    case SyntaxKind.ArrayLiteralExpression:
-      return node.getElements().map(parseValue)
-    case SyntaxKind.ObjectLiteralExpression:
-      return parseObjectLiteralExpression(node)
+      return node.elements.map(parseValue)
    default:
      return node.getText()
  }
--- a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/favicon.ico
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/favicon.ico
--- a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/globals.css
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/globals.css
@@ -1,27 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
--- a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/layout.tsx
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/layout.tsx
@@ -1,22 +0,0 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
-}
--- a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/other.css
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/other.css
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
--- a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/page.tsx
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/page.tsx
@@ -1,113 +0,0 @@
-import Image from 'next/image'
-
-export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore the Next.js 13 playground.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  )
-}
--- a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next-env.d.ts
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next-env.d.ts
@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
--- a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next.config.ts
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next.config.ts
@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
-
-module.exports = nextConfig
--- a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/package.json
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/package.json
@@ -1,11 +0,0 @@
-{
-  "name": "test-cli-next-app",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  }
-}
--- a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/postcss.config.js
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/postcss.config.js
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
--- a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tailwind.config.ts
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tailwind.config.ts
@@ -1,21 +0,0 @@
-// @ts-nocheck
-import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}'
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
-      }
-    }
-  },
-  plugins: []
-}
-export default config
--- a/Show More
+++ b/Show More